This time I will share jQuery Plugin and tutorial about Fullscreen Split Text Slider With jQuery And CSS3, hope it will help you in programming stack.
| File Size: | 1.95 KB |
|---|---|
| Views Total: | 4485 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A responsive, fullscreen slider that comes with a split effect when transitioning between text, built using CSS3 transforms, transitions and a little bit of jQuery.
How to use it:
1. The primary HTML structure for the text slider. You can set the split text using the data-back attribute as this:
01 |
<div class="slider"> |
02 |
<div class="slide active"> |
03 |
<div class="panel"> |
04 |
<div class="top" data-back="JQUERY"></div> |
05 |
<div class="bottom" data-back="JQUERY"></div> |
06 |
</div> |
07 |
<div class="center"> |
08 |
<h1>Popular JS Library</h1> |
09 |
</div> |
10 |
</div> |
11 |
<div class="slide"> |
12 |
<div class="panel"> |
13 |
<div class="top" data-back="REACT"></div> |
14 |
<div class="bottom" data-back="REACT"></div> |
15 |
</div> |
16 |
<div class="center"> |
17 |
<h1>UI JS Library</h1> |
18 |
</div> |
19 |
</div> |
20 |
<div class="slide"> |
21 |
<div class="panel"> |
22 |
<div class="top" data-back="ANGULAR"></div> |
23 |
<div class="bottom" data-back="ANGULAR"></div> |
24 |
</div> |
25 |
<div class="center"> |
26 |
<h1>JS MVW Framework</h1> |
27 |
</div> |
28 |
</div> |
29 |
<div class="slide"> |
30 |
<div class="panel"> |
31 |
<div class="top" data-back="VUEJS"></div> |
32 |
<div class="bottom" data-back="VUEJS"></div> |
33 |
</div> |
34 |
<div class="center"> |
35 |
<h1>JS MVVW Framework</h1> |
36 |
</div> |
37 |
</div> |
38 |
</div> |
2. The core CSS/CSS3 styles for the slider:
01 |
body { |
02 |
height: 100vh; |
03 |
width: 100vw; |
04 |
font-family: "Average Sans", sans-serif; |
05 |
color: white; |
06 |
font-size: 2rem; |
07 |
cursor: pointer; |
08 |
} |
09 |
10 |
.slider { |
11 |
position: absolute; |
12 |
top: 0; |
13 |
left: 0; |
14 |
width: 100%; |
15 |
height: 100%; |
16 |
height: 100vh; |
17 |
overflow: hidden; |
18 |
} |
19 |
20 |
.slide { |
21 |
position: absolute; |
22 |
top: 0; |
23 |
left: 0; |
24 |
width: 100%; |
25 |
height: 100%; |
26 |
} |
27 |
28 |
.slide .center { |
29 |
opacity: 0; |
30 |
-webkit-transition: opacity linear 300ms; |
31 |
transition: opacity linear 300ms; |
32 |
} |
33 |
34 |
.slide .panel { |
35 |
position: absolute; |
36 |
top: 0; |
37 |
left: 0; |
38 |
width: 100%; |
39 |
height: 100%; |
40 |
} |
41 |
42 |
.slide.active .center { |
43 |
opacity: 1; |
44 |
-webkit-transition: opacity linear 300ms; |
45 |
transition: opacity linear 300ms; |
46 |
-webkit-transition-delay: 600ms; |
47 |
transition-delay: 600ms; |
48 |
} |
49 |
50 |
.center { |
51 |
position: absolute; |
