Fullscreen Split Text Slider With jQuery And CSS3

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:

<div class="slider">
  <div class="slide active">
    <div class="panel">
      <div class="top" data-back="JQUERY"></div>
      <div class="bottom" data-back="JQUERY"></div>
    </div>
    <div class="center">
      <h1>Popular JS Library</h1>
    </div>
  </div>
  <div class="slide">
    <div class="panel">
      <div class="top" data-back="REACT"></div>
      <div class="bottom" data-back="REACT"></div>
    </div>
    <div class="center">
      <h1>UI JS Library</h1>
    </div>
  </div>
  <div class="slide">
    <div class="panel">
      <div class="top" data-back="ANGULAR"></div>
      <div class="bottom" data-back="ANGULAR"></div>
    </div>
    <div class="center">
      <h1>JS MVW Framework</h1>
    </div>
  </div>
  <div class="slide">
    <div class="panel">
      <div class="top" data-back="VUEJS"></div>
      <div class="bottom" data-back="VUEJS"></div>
    </div>
    <div class="center">
      <h1>JS MVVW Framework</h1>
    </div>
  </div>
</div>

2. The core CSS/CSS3 styles for the slider:

body {
  height: 100vh;
  width: 100vw;
  font-family: "Average Sans", sans-serif;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide .center {
  opacity: 0;
  -webkit-transition: opacity linear 300ms;
  transition: opacity linear 300ms;
}

.slide .panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide.active .center {
  opacity: 1;
  -webkit-transition: opacity linear 300ms;
  transition: opacity linear 300ms;
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  z-index: 2;
  text-align: center;
}

.center h1 {
  font-size: 10vh;
  line-height: 1;
}

3. The CSS/CSS3 rules for the split effect.

.slide .top, .slide .bottom {
  content: attr(data-back);
  position: absolute;
  font-size: 50vh;
  font-weight: 800;
  height: 50vh;
  width: 100vw;
  text-align: center;
  z-index: 1;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-transition: -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865), -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
}

.slide .top:after, .slide .bottom:after {
  position: relative;
  display: inline-block;
  -webkit-transition: -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  transition: transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865), -webkit-transform 600ms cubic-bezier(1, 0.005, 0.57, 0.865);
  content: attr(data-back);
  font-family: "BenchNine", sans-serif;
}

.slide .top {
  line-height: 100vh;
  -webkit-transform: translatey(-50vh);
  transform: translatey(-50vh);
}

.slide .top:after {
  -webkit-transform: translatey(50vh);
  transform: translatey(50vh);
}

.slide .bottom {
  bottom: 0;
  line-height: 0vh;
  -webkit-transform: translatey(50vh);
  transform: translatey(50vh);
}

.slide .bottom:after {
  -webkit-transform: translatey(-50vh);
  transform: translatey(-50vh);
}

.slide.active .top, .slide.active .bottom {
  -webkit-transition: none;
  transition: none;
  -webkit-transform: translatey(0);
  transform: translatey(0);
  z-index: -1;
}

.slide.active .top:after, .slide.active .bottom:after {
  -webkit-transition: -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 1200ms;
  transition: -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 1200ms;
  transition: transform cubic-bezier(0.23, 1, 0.32, 1) 1200ms;
  transition: transform cubic-bezier(0.23, 1, 0.32, 1) 1200ms, -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 1200ms;
  -webkit-transform: translatey(0);
  transform: translatey(0);
}

4. Include the necessary jQuery library (Slim build) at the bottom of the html page.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> 

5. Apply the split effect to your text when sliding to the next slide.

function nextSlide(){
  if ($('.active + .slide').length > 0){
    $('.active + .slide').addClass('active');
    $($('.active')[0]).removeClass('active');
  } else{
    $('.active').removeClass('active');
    $('.slide:nth-child(1)').addClass('active');
  }
}

$(document).on('click',nextSlide);

---

This awesome jQuery plugin is developed by nathantaylor. For more Advanced Usages, please check the demo page or visit the official website.