jQuery Plugins › jQuery Slider Plugins ›

Responsive Touch-enabled Parallax Slider With jQuery And CSS3

File Size: 3.68 KB
Views Total: 5470
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE10+, FireFox, Opera, Safari#parallax#Image Slider
Responsive Touch-enabled Parallax Slider With jQuery And CSS3

A pretty cool, responsive jQuery/CSS3 slider component that features transparent letters and a subtle parallax scrolling effect when your switch between slides. Fully responsive and mobile friendly. Supports both mouse drag and touch swipe events. Heavily based on CSS3 flexbox model and transition/transform/animation properties.

See also:

How to use it:

1. Create the html structure for the slider.

<div class="cont">
  <div class="slider"></div>
  <ul class="nav"></ul>
  <div data-target='right' class="side-nav side-nav--right"></div>
  <div data-target='left' class="side-nav side-nav--left"></div>
</div>

2. The primary CSS/CSS3 styles for the slider.

.cont {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slider {
  position: relative;
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  cursor: all-scroll;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.slider.animation {
  -webkit-transition: -webkit-transform 750ms ease-in-out;
  transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
}

.slider.animation .slide__darkbg {
  -webkit-transition: -webkit-transform 750ms ease-in-out;
  transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
}

.slider.animation .slide__text {
  -webkit-transition: -webkit-transform 750ms ease-in-out;
  transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
}

.slider.animation .slide__letter {
  -webkit-transition: -webkit-transform 750ms ease-in-out;
  transition: -webkit-transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out;
  transition: transform 750ms ease-in-out, -webkit-transform 750ms ease-in-out;
}

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

.slide--1 { left: 0%; }

.slide--2 { left: 100%; }

.slide--3 { left: 200%; }

.slide--4 { left: 300%; }

.slide--5 { left: 400%; }

.slide__darkbg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  z-index: 10;
}

3. The CSS to make transparent text.

.slide__text-wrapper {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 15;
}

.slide__letter {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  font-size: 50vw;
  font-weight: 800;
  color: #000;
  z-index: 2;
  will-change: transform;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.slide__text {
  font-size: 8vw;
  font-weight: 800;
  text-transform: uppercase;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  letter-spacing: 12px;
  color: #fff;
  will-change: transform;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.slide__text:nth-child(odd) { z-index: 2; }

.slide__text:nth-child(even) { z-index: 1; }

4. Add background images to the slides.

.slide--1__darkbg {
  left: 0%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg") center center no-repeat;
  background-size: cover;
  background-position: 0px center, 0px center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.slide--1__darkbg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 39, 0.83);
}

.slide--1__letter {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--1-min-min.jpg") center center no-repeat;
  background-position: 0px center, 0px center;
  background-size: cover;
}

.slide--2__darkbg {
  left: -50%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg") center center no-repeat;
  background-size: cover;
  background-position: 0px center, 0px center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.slide--2__darkbg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 39, 0.83);
}

.slide--2__letter {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--2-min-min.jpg") center center no-repeat;
  background-position: 0px center, 0px center;
  background-size: cover;
}

.slide--3__darkbg {
  left: -100%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg") center center no-repeat;
  background-size: cover;
  background-position: 0px center, 0px center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.slide--3__darkbg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 39, 0.83);
}

.slide--3__letter {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--3-min-min.jpg") center center no-repeat;
  background-position: 0px center, 0px center;
  background-size: cover;
}

.slide--4__darkbg {
  left: -150%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
  background-size: cover;
  background-position: 0px center, 0px center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.slide--4__darkbg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 39, 0.83);
}

.slide--4__letter {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--4-min-min.jpg") center center no-repeat;
  background-position: 0px center, 0px center;
  background-size: cover;
}

.slide--5__darkbg {
  left: -200%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
  background-size: cover;
  background-position: 0px center, 0px center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.slide--5__darkbg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 15, 39, 0.83);
}

.slide--5__letter {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city--5-min-min.jpg") center center no-repeat;
  background-position: 0px center, 0px center;
  background-size: cover;
}

5. Style the navigation controls.

.nav {
  position: absolute;
  bottom: 25px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  list-style-type: none;
  z-index: 10;
}

.nav__slide {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: 10px;
  cursor: pointer;
}
@media screen and (max-width: 400px) {

.nav__slide {
  width: 22px;
  height: 22px;
}
}

.nav__slide:hover:after {
  -webkit-transform: translate(-50%, -50%) scale(1, 1);
  transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}

.nav__slide:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0, 0);
  transform: translate(-50%, -50%) scale(0, 0);
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0;
  -webkit-transition: 300ms;
  transition: 300ms;
}

.nav__slide--1 { margin-left: 0; }

.nav-active:after {
  -webkit-transform: translate(-50%, -50%) scale(1, 1);
  transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}

.side-nav {
  position: absolute;
  width: 10%;
  height: 100%;
  top: 0;
  z-index: 20;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: 300ms;
  transition: 300ms;
}

.side-nav:hover { opacity: .1; }

.side-nav--right {
  right: 0;
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
}

.side-nav--left {
  left: 0;
  background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
}

6. Put the necessary jQuery library in the webpage.

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

7. The main JavaScript / jQuery script to active the slider.

$(document).ready(function() {
  const $cont = $('.cont');
  const $slider = $('.slider');
  const $nav = $('.nav');
  const winW = $(window).width();
  const animSpd = 750; // Change also in CSS
  const distOfLetGo = winW * 0.2;
  let curSlide = 1;
  let animation = false;
  let diff = 0;
  
  // Generating slides
  let arrCities = ['Amsterdam', 'Rome', 'New—York', 'Singapore', 'Prague']; // Change number of slides in CSS also
  let numOfCities = arrCities.length;
  let arrCitiesDivided = [];

  arrCities.map((city) => {
    let length = city.length;
    let letters = Math.floor(length / 4);
    let exp = new RegExp(".{1," + letters + "}", "g");
    
    arrCitiesDivided.push(city.match(exp));
  });
  
  let generateSlide = function(city) {
    let frag1 = $(document.createDocumentFragment());
    let frag2 = $(document.createDocumentFragment());
    const numSlide = arrCities.indexOf(arrCities[city]) + 1;
    const firstLetter = arrCitiesDivided[city][0].charAt(0);

    const $slide =
          $(`<div data-target="${numSlide}" class="slide slide--${numSlide}">
              <div class="slide__darkbg slide--${numSlide}__darkbg"></div>
              <div class="slide__text-wrapper slide--${numSlide}__text-wrapper"></div>
            </div>`);

    const letter = 
          $(`<div class="slide__letter slide--${numSlide}__letter">
              ${firstLetter}
            </div>`);

    for (let i = 0, length = arrCitiesDivided[city].length; i < length; i++) {
      const text = 
            $(`<div class="slide__text slide__text--${i + 1}">
                ${arrCitiesDivided[city][i]}
              </div>`);
      frag1.append(text);
    }

    const navSlide = $(`<li data-target="${numSlide}" class="nav__slide nav__slide--${numSlide}"></li>`);
    frag2.append(navSlide);
    $nav.append(frag2);

    $slide.find(`.slide--${numSlide}__text-wrapper`).append(letter).append(frag1);
    $slider.append($slide);

    if (arrCities[city].length <= 4) {
      $('.slide--'+ numSlide).find('.slide__text').css("font-size", "12vw");
    }
  };

  for (let i = 0, length = numOfCities; i < length; i++) {
    generateSlide(i);
  }

  $('.nav__slide--1').addClass('nav-active');

  // Navigation
  function bullets(dir) {
    $('.nav__slide--' + curSlide).removeClass('nav-active');
    $('.nav__slide--' + dir).addClass('nav-active');
  }
  
  function timeout() {
    animation = false;
  }
  
  function pagination(direction) {
    animation = true;
    diff = 0;
    $slider.addClass('animation');
    $slider.css({
      'transform': 'translate3d(-' + ((curSlide - direction) * 100) + '%, 0, 0)'
    });
    
    $slider.find('.slide__darkbg').css({
        'transform': 'translate3d(' + ((curSlide - direction) * 50) + '%, 0, 0)'
    });
    
    $slider.find('.slide__letter').css({
        'transform': 'translate3d(0, 0, 0)',
    });
    
    $slider.find('.slide__text').css({
      'transform': 'translate3d(0, 0, 0)'
    });
  }
  
  function navigateRight() {
    if (curSlide >= numOfCities) return;
    pagination(0);
    setTimeout(timeout, animSpd);
    bullets(curSlide + 1);
    curSlide++;
  }

  function navigateLeft() {
    if (curSlide <= 1) return;
    pagination(2);
    setTimeout(timeout, animSpd);
    bullets(curSlide - 1);
    curSlide--;
  }

  function toDefault() {
    pagination(1);
    setTimeout(timeout, animSpd);
  }

  // Events
  $(document).on('mousedown touchstart', '.slide', function(e) {
    if (animation) return;
    let target = +$(this).attr('data-target');
    let startX = e.pageX || e.originalEvent.touches[0].pageX;
    $slider.removeClass('animation');
    
    $(document).on('mousemove touchmove', function(e) {
      let x = e.pageX || e.originalEvent.touches[0].pageX;
      diff = startX - x;
      if (target === 1 && diff < 0 || target === numOfCities && diff > 0) return;
      
      $slider.css({
        'transform': 'translate3d(-' + ((curSlide - 1) * 100 + (diff / 30)) + '%, 0, 0)'
      });
      
      $slider.find('.slide__darkbg').css({
        'transform': 'translate3d(' + ((curSlide - 1) * 50 + (diff / 60)) + '%, 0, 0)'
      });
      
      $slider.find('.slide__letter').css({
        'transform': 'translate3d(' +  (diff / 60) + 'vw, 0, 0)',
      });
      
      $slider.find('.slide__text').css({
        'transform': 'translate3d(' + (diff / 15) + 'px, 0, 0)'
      });
    })  
  })
  
  $(document).on('mouseup touchend', function(e) {
    $(document).off('mousemove touchmove');
    
    if (animation) return;
    
    if (diff >= distOfLetGo) {
      navigateRight();
    } else if (diff <= -distOfLetGo) {
      navigateLeft();
    } else {
      toDefault();
    }
  });
  
  $(document).on('click', '.nav__slide:not(.nav-active)', function() {
    let target = +$(this).attr('data-target');
    bullets(target);
    curSlide = target;
    pagination(1);
  }); 
  
  $(document).on('click', '.side-nav', function() {
    let target = $(this).attr('data-target');
    
    if (target === 'right') navigateRight();
    if (target === 'left') navigateLeft();
  });
  
  $(document).on('keydown', function(e) {
    if (e.which === 39) navigateRight();
    if (e.which === 37) navigateLeft();
  });
  
  $(document).on('mousewheel DOMMouseScroll', function(e) {
    if (animation) return;
    let delta = e.originalEvent.wheelDelta;
    
    if (delta > 0 || e.originalEvent.detail < 0) navigateLeft();
    if (delta < 0 || e.originalEvent.detail > 0) navigateRight();
  });
});

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