Full Page Parallax Effect

Scroll down and up to see the effect!

Cras lacinia non eros nec semper.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut massa mattis nibh semper pretium.

Etiam consequat lectus.

Nullam tristique urna sed tellus ornare congue. Etiam vitae erat at nibh aliquam dapibus.

@import url(https://fonts.googleapis.com/css?family=Montserrat); // ------------- MIXINS ------------- // @mixin transition($time, $property: all, $easing: ease-in) { transition: $property $time $easing; } // ------------- VARIABLES ------------- // $parallax-offset: 30vh; $content-offset: 40vh; $transition-speed: 1.2s; $slide-number: 3; html, body { overflow: hidden; } .background { background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; will-change: transform; backface-visibility: hidden; height: 100vh + $parallax-offset; position: fixed; width: 100%; transform: translateY($parallax-offset); @include transition($transition-speed, all, cubic-bezier(0.22, 0.44, 0, 1)); &:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.3); } &:first-child { background-image: url(https://i.postimg.cc/kXq9Qmnj/bgd1.jpg); transform: translateY(-$parallax-offset / 2); .content-wrapper { transform: translateY($parallax-offset /2); } } &:nth-child(2) { background-image: url(https://i.postimg.cc/W14vywqg/photo-1424746219973-8fe3bd07d8e3.jpg); } &:nth-child(3) { background-image: url(https://i.postimg.cc/TY0xQ41T/photo-1433840496881-cbd845929862.jpg); } } /* Set stacking context of slides */ @for $i from 1 to ($slide-number + 1) { .background:nth-child(#{$i}) { z-index: ($slide-number + 1) - $i; } } .content { &-wrapper { height: 100vh; display: flex; justify-content: center; text-align: center; flex-flow: column nowrap; color: #fff; font-family: Montserrat; text-transform: uppercase; transform: translateY($content-offset); will-change: transform; backface-visibility: hidden; @include transition($transition-speed + .5, all, cubic-bezier(0.22, 0.44, 0, 1)); } &-title { font-size: 12vh; line-height: 1.4; } } // ------------- SET TRANSFORM VALUES ------------- // .background.up-scroll { transform: translate3d(0,-$parallax-offset / 2,0); .content-wrapper { transform: translateY($parallax-offset / 2); } + .background { transform: translate3d(0,$parallax-offset,0); .content-wrapper { transform: translateY($parallax-offset); } } } .background.down-scroll { transform: translate3d(0,-(100vh + $parallax-offset),0); .content-wrapper { transform: translateY($content-offset); } + .background:not(.down-scroll) { transform: translate3d(0,-$parallax-offset / 2,0); .content-wrapper { transform: translateY($parallax-offset / 2); } } } // ------------- 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 = 600; //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.removeClass("up-scroll").addClass("down-scroll"); } function previousItem() { var $currentSlide = $(".background").eq(currentSlideNumber); $currentSlide.removeClass("down-scroll").addClass("up-scroll"); }

Una breve storia