Welcome to mirror list, hosted at ThFree Co, Russian Federation.

parallax.less « src - github.com/picturepan2/spectre.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
blob: a7096fccd898e2cc349057f567a4991b3519a945 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
// Parallax
@parallax-deg: 3deg;

.parallax {
  display: block;
  height: auto;
  position: relative;
  width: auto;

  .parallax-content {
    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, .45);
    height: auto;
    transform: perspective(50rem);
    transform-style: preserve-3d;
    transition: all .4s ease;
    width: 100%;

    &::before {
      content: "";
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  .parallax-top-left {
    .parallax-dir();
    left: 0;
    top: 0;

    &:hover ~ .parallax-content {
      transform: perspective(50rem) rotateX(@parallax-deg) rotateY(-@parallax-deg);

      &::before {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
      }
    }
  }

  .parallax-top-right {
    .parallax-dir();
    right: 0;
    top: 0;

    &:hover ~ .parallax-content {
      transform: perspective(50rem) rotateX(@parallax-deg) rotateY(@parallax-deg);

      &::before {
        background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
      }
    }
  }

  .parallax-bottom-left {
    .parallax-dir();
    bottom: 0;
    left: 0;

    &:hover ~ .parallax-content {
      transform: perspective(50rem) rotateX(-@parallax-deg) rotateY(-@parallax-deg);

      &::before {
        background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
      }
    }
  }

  .parallax-bottom-right {
    .parallax-dir();
    bottom: 0;
    right: 0;

    &:hover ~ .parallax-content {
      transform: perspective(50rem) rotateX(-@parallax-deg) rotateY(@parallax-deg);

      &::before {
        background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
      }
    }
  }
}

.parallax-dir() {
  height: 50%;
  position: absolute;
  width: 50%;
  z-index: @zindex-0;
}