A lightweight full page parallax scroll effect.
A Pen by Emily Hayman on CodePen.
Created
November 8, 2016 23:15
-
-
Save CodeMyUI/0ba729244a906a978b20d836c6b5d268 to your computer and use it in GitHub Desktop.
Full Page Parallax Scroll Effect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <section class="background"> | |
| <div class="content-wrapper"> | |
| <p class="content-title">Full Page Parallax Effect</p> | |
| <p class="content-subtitle">Scroll down and up to see the effect!</p> | |
| </div> | |
| </section> | |
| <section class="background"> | |
| <div class="content-wrapper"> | |
| <p class="content-title">Cras lacinia non eros nec semper.</p> | |
| <p class="content-subtitle">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut massa mattis nibh semper pretium.</p> | |
| </div> | |
| </section> | |
| <section class="background"> | |
| <div class="content-wrapper"> | |
| <p class="content-title">Etiam consequat lectus.</p> | |
| <p class="content-subtitle">Nullam tristique urna sed tellus ornare congue. Etiam vitae erat at nibh aliquam dapibus.</p> | |
| </div> | |
| </section> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ------------- 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"); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> | |
| <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://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(http://s8.postimg.org/lf2udl5np/4_Aihmii.jpg); | |
| transform: translateY(-$parallax-offset / 2); | |
| .content-wrapper { | |
| transform: translateY($parallax-offset /2); | |
| } | |
| } | |
| &:nth-child(2) { | |
| background-image: url(http://s8.postimg.org/ow4wgk4px/ugqti_Lg.jpg); | |
| } | |
| &:nth-child(3) { | |
| background-image: url(http://s8.postimg.org/grwsbtiat/x_ZMOBTj.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); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment