Skip to content

Commit 4b42849

Browse files
yama-devyama-dev
committed
update css
1 parent ab3ab61 commit 4b42849

File tree

1 file changed

+27
-127
lines changed

1 file changed

+27
-127
lines changed

‎examples/scroll-effect-module.css‎

Lines changed: 27 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,55 @@
1-
[data-scroll-type="fadein"] {
2-
opacity: 0;
3-
-webkit-transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
4-
transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
1+
:root {
2+
--sem-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
3+
--sem-duration: 0.5s;
54
}
65

7-
[data-scroll-type="fadein"].is-active {
8-
opacity: 1;
9-
-webkit-transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
10-
transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
6+
[data-scroll-type="fadein"] {
7+
opacity: 0;
8+
transition: opacity var(--sem-duration) var(--sem-ease) 0s;
119
}
10+
[data-scroll-type="fadein"].is-active { opacity: 1; }
1211

1312
[data-scroll-type="zoomin"] {
1413
opacity: 0;
15-
-webkit-transform: scale(0.9);
16-
transform: scale(0.9);
17-
-webkit-transform-style: preserve-3d;
18-
transform-style: preserve-3d;
19-
-webkit-backface-visibility: hidden;
20-
backface-visibility: hidden;
21-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
22-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
23-
}
24-
25-
[data-scroll-type="zoomin"].is-active {
26-
opacity: 1;
27-
-webkit-transform: scale(1);
28-
transform: scale(1);
29-
-webkit-transform-style: preserve-3d;
30-
transform-style: preserve-3d;
31-
-webkit-backface-visibility: hidden;
32-
backface-visibility: hidden;
33-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
34-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
14+
transform: scale(0.9);
15+
transition: all var(--sem-duration) var(--sem-ease) 0s;
3516
}
17+
[data-scroll-type="zoomin"].is-active { opacity: 1; transform: scale(1); }
3618

3719
[data-scroll-type="fadeinTop"] {
3820
opacity: 0;
39-
-webkit-transform: translate(0, -30px);
40-
transform: translate(0, -30px);
41-
-webkit-transform-style: preserve-3d;
42-
transform-style: preserve-3d;
43-
-webkit-backface-visibility: hidden;
44-
backface-visibility: hidden;
45-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
46-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
47-
}
48-
49-
[data-scroll-type="fadeinTop"].is-active {
50-
opacity: 1;
51-
-webkit-transform: translate(0, 0);
52-
transform: translate(0, 0);
53-
-webkit-transform-style: preserve-3d;
54-
transform-style: preserve-3d;
55-
-webkit-backface-visibility: hidden;
56-
backface-visibility: hidden;
57-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
58-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
21+
transform: translate(0, -30px);
22+
transition: all var(--sem-duration) var(--sem-ease) 0s;
5923
}
24+
[data-scroll-type="fadeinTop"].is-active { opacity: 1; transform: translate(0, 0); }
6025

6126
[data-scroll-type="fadeinBottom"] {
6227
opacity: 0;
63-
-webkit-transform: translate(0, 30px);
64-
transform: translate(0, 30px);
65-
-webkit-transform-style: preserve-3d;
66-
transform-style: preserve-3d;
67-
-webkit-backface-visibility: hidden;
68-
backface-visibility: hidden;
69-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
70-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
71-
}
72-
73-
[data-scroll-type="fadeinBottom"].is-active {
74-
opacity: 1;
75-
-webkit-transform: translate(0, 0);
76-
transform: translate(0, 0);
77-
-webkit-transform-style: preserve-3d;
78-
transform-style: preserve-3d;
79-
-webkit-backface-visibility: hidden;
80-
backface-visibility: hidden;
81-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
82-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
28+
transform: translate(0, 30px);
29+
transition: all var(--sem-duration) var(--sem-ease) 0s;
8330
}
31+
[data-scroll-type="fadeinBottom"].is-active { opacity: 1; transform: translate(0, 0); }
8432

8533
[data-scroll-type="fadeinLeft"] {
8634
opacity: 0;
87-
-webkit-transform: translate(-80%, 0);
88-
transform: translate(-80%, 0);
89-
-webkit-transform-style: preserve-3d;
90-
transform-style: preserve-3d;
91-
-webkit-backface-visibility: hidden;
92-
backface-visibility: hidden;
93-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
94-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
95-
}
96-
97-
[data-scroll-type="fadeinLeft"].is-active {
98-
opacity: 1;
99-
-webkit-transform: translate(0, 0);
100-
transform: translate(0, 0);
101-
-webkit-transform-style: preserve-3d;
102-
transform-style: preserve-3d;
103-
-webkit-backface-visibility: hidden;
104-
backface-visibility: hidden;
105-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
106-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
35+
transform: translate(-80%, 0);
36+
transition: all var(--sem-duration) var(--sem-ease) 0s;
10737
}
38+
[data-scroll-type="fadeinLeft"].is-active { opacity: 1; transform: translate(0, 0); }
10839

10940
[data-scroll-type="fadeinRight"] {
11041
opacity: 0;
111-
-webkit-transform: translate(80%, 0);
112-
transform: translate(80%, 0);
113-
-webkit-transform-style: preserve-3d;
114-
transform-style: preserve-3d;
115-
-webkit-backface-visibility: hidden;
116-
backface-visibility: hidden;
117-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
118-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
119-
}
120-
121-
[data-scroll-type="fadeinRight"].is-active {
122-
opacity: 1;
123-
-webkit-transform: translate(0, 0);
124-
transform: translate(0, 0);
125-
-webkit-transform-style: preserve-3d;
126-
transform-style: preserve-3d;
127-
-webkit-backface-visibility: hidden;
128-
backface-visibility: hidden;
129-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
130-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
42+
transform: translate(80%, 0);
43+
transition: all var(--sem-duration) var(--sem-ease) 0s;
13144
}
45+
[data-scroll-type="fadeinRight"].is-active { opacity: 1; transform: translate(0, 0); }
13246

13347
[data-scroll-type="spinin"] {
13448
opacity: 0;
135-
-webkit-transform: translate(0, 0) rotate3d(1, 0, 1, -720deg);
136-
transform: translate(0, 0) rotate3d(1, 0, 1, -720deg);
137-
-webkit-transform-style: preserve-3d;
138-
transform-style: preserve-3d;
139-
-webkit-backface-visibility: hidden;
140-
backface-visibility: hidden;
141-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
142-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
49+
transform: translate(0, 0) rotate3d(1, 0, 1, -720deg);
50+
transform-style: preserve-3d;
51+
backface-visibility: hidden;
52+
transition: all var(--sem-duration) var(--sem-ease) 0s;
14353
}
54+
[data-scroll-type="spinin"].is-active { opacity: 1; transform: translate(0, 0) rotate3d(1, 0, 1, 0); }
14455

145-
[data-scroll-type="spinin"].is-active {
146-
opacity: 1;
147-
-webkit-transform: translate(0, 0) rotate3d(1, 0, 1, 0);
148-
transform: translate(0, 0) rotate3d(1, 0, 1, 0);
149-
-webkit-transform-style: preserve-3d;
150-
transform-style: preserve-3d;
151-
-webkit-backface-visibility: hidden;
152-
backface-visibility: hidden;
153-
-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
154-
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
155-
}

0 commit comments

Comments
 (0)