jQuery Fullscreen Vertical Slider with Parallax Effect
File Size: | 2.73 KB |
---|---|
Views Total: | 33966 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A cool, responsive, vertical, full page slider with a subtle background parallax scrolling effect, built using jQuery, lodash.js and several CSS3 properties.
See also:
- Smooth Full-page Slider Plugin with Parallax Effects - Vertical Slider
- Simple jQuery Image Carousel with Parallax Effect
- Easy and Fast Parallax Image Slider with CSS3 and jQuery - MrJaredParallaxSlide
How to use it:
1. Add content slides to the page slider.
<div class="container"> <section class="background"> <div class="content-wrapper"> <p class="content-title">Section One</p> <p class="content-subtitle">Subtitle One</p> </div> </section> <section class="background"> <div class="content-wrapper"> <p class="content-title">Section Two</p> <p class="content-subtitle">Subtitle Two</p> </div> </section> <section class="background"> <div class="content-wrapper"> <p class="content-title">Section One</p> <p class="content-subtitle">Subtitle Three</p> </div> </section> </div>
2. The primary CSS / CSS3 rules.
html, body { overflow: hidden; } .background { background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 130vh; position: fixed; width: 100%; -webkit-transform: translateY(20vh); -ms-transform: translateY(20vh); transform: translateY(20vh); -webkit-transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1); }
3. Add background images to the slides
.background:first-child { background-image: url(1.jpg); -webkit-transform: translateY(-10vh); -ms-transform: translateY(-10vh); transform: translateY(-10vh); } .background:first-child .content-wrapper { -webkit-transform: translateY(10vh); -ms-transform: translateY(10vh); transform: translateY(10vh); } .background:nth-child(2) { background-image: url(2.jpg); } .background:nth-child(3) { background-image: url(3.jpg); }
4. Set stacking context of slides.
.background:nth-child(1) { z-index: 2; } .background:nth-child(2) { z-index: 1; } .content-wrapper { height: 100vh; 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; text-align: center; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; color: #fff; font-family: Montserrat; text-transform: uppercase; -webkit-transform: translateY(40vh); -ms-transform: translateY(40vh); transform: translateY(40vh); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1); } .content-title { font-size: 12vh; line-height: 1.4; }
5. Include the needed lodash.js and jQuery JavaScript library at the bottom of the web page.
<script src="/path/to/lodash.min.js"></script> <script src="/path/to/jquery.min.js"></script>
6. The core JavaScript to active the full page slider.
// ------------- VARIABLES ------------- // var ticking = false; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isIe = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); var scrollSensitivitySetting = 30; //Increase/decrease this number to change sensitivity to trackpad gestures (up = less sensitive; down = more sensitive) var slideDurationSetting = 800; //Amount of time for which slide is "locked" var currentSlideNumber = 0; var totalSlideNumber = $(".background").length; // ------------- DETERMINE DELTA/SCROLL DIRECTION ------------- // function parallaxScroll(evt) { if (isFirefox) { //Set delta for Firefox delta = evt.detail * (-120); } else if (isIe) { //Set delta for IE delta = -evt.deltaY; } else { //Set delta for all other browsers delta = evt.wheelDelta; } if (ticking != true) { if (delta <= -scrollSensitivitySetting) { //Down scroll ticking = true; if (currentSlideNumber !== totalSlideNumber - 1) { currentSlideNumber++; nextItem(); } slideDurationTimeout(slideDurationSetting); } if (delta >= scrollSensitivitySetting) { //Up scroll ticking = true; if (currentSlideNumber !== 0) { currentSlideNumber--; } previousItem(); slideDurationTimeout(slideDurationSetting); } } } // ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- // function slideDurationTimeout(slideDuration) { setTimeout(function() { ticking = false; }, slideDuration); } // ------------- ADD EVENT LISTENER ------------- // var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel"; window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false); // ------------- SLIDE MOTION ------------- // function nextItem() { var $previousSlide = $(".background").eq(currentSlideNumber - 1); $previousSlide.css("transform", "translate3d(0,-130vh,0)").find(".content-wrapper").css("transform", "translateY(40vh)"); currentSlideTransition(); } function previousItem() { var $previousSlide = $(".background").eq(currentSlideNumber + 1); $previousSlide.css("transform", "translate3d(0,30vh,0)").find(".content-wrapper").css("transform", "translateY(30vh)"); currentSlideTransition(); } function currentSlideTransition() { var $currentSlide = $(".background").eq(currentSlideNumber); $currentSlide.css("transform", "translate3d(0,-15vh,0)").find(".content-wrapper").css("transform", "translateY(15vh)");; }
This awesome jQuery plugin is developed by eehayman. For more Advanced Usages, please check the demo page or visit the official website.