Full Page Parallax Scroll Effect

Developer
Emily Hayman
Size
4,446 Kb
Views
133,584
  1. Full Page Parallax Scroll Effect Previews
  2. Full Page Parallax Scroll Effect HTML Codes
  3. Full Page Parallax Scroll Effect CSS Codes
  4. Full Page Parallax Scroll Effect JS Codes

How do I make an full page parallax scroll effect?

A lightweight full page parallax scroll effect.. What is a full page parallax scroll effect? How do you make a full page parallax scroll effect? This script and codes were developed by Emily Hayman on 14 June 2022, Tuesday.

Full Page Parallax Scroll Effect Previews
IQ Test

Full Page Parallax Scroll Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full Page Parallax Scroll Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <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> <script src="js/index.js"></script>
</body>
</html>

Full Page Parallax Scroll Effect - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Montserrat);
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(30vh); transform: translateY(30vh); -webkit-transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
}
.background:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3);
}
.background:first-child { background-image: url(http://s8.postimg.org/lf2udl5np/4_Aihmii.jpg); -webkit-transform: translateY(-15vh); transform: translateY(-15vh);
}
.background:first-child .content-wrapper { -webkit-transform: translateY(15vh); transform: translateY(15vh);
}
.background:nth-child(2) { background-image: url(http://s8.postimg.org/ow4wgk4px/ugqti_Lg.jpg);
}
.background:nth-child(3) { background-image: url(http://s8.postimg.org/grwsbtiat/x_ZMOBTj.jpg);
}
/* Set stacking context of slides */
.background:nth-child(1) { z-index: 3;
}
.background:nth-child(2) { z-index: 2;
}
.background:nth-child(3) { z-index: 1;
}
.content-wrapper { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; -ms-flex-flow: column nowrap; flex-flow: column nowrap; color: #fff; font-family: Montserrat; text-transform: uppercase; -webkit-transform: translateY(40vh); transform: translateY(40vh); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1); transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
}
.content-title { font-size: 12vh; line-height: 1.4;
}
.background.up-scroll { -webkit-transform: translate3d(0, -15vh, 0); transform: translate3d(0, -15vh, 0);
}
.background.up-scroll .content-wrapper { -webkit-transform: translateY(15vh); transform: translateY(15vh);
}
.background.up-scroll + .background { -webkit-transform: translate3d(0, 30vh, 0); transform: translate3d(0, 30vh, 0);
}
.background.up-scroll + .background .content-wrapper { -webkit-transform: translateY(30vh); transform: translateY(30vh);
}
.background.down-scroll { -webkit-transform: translate3d(0, -130vh, 0); transform: translate3d(0, -130vh, 0);
}
.background.down-scroll .content-wrapper { -webkit-transform: translateY(40vh); transform: translateY(40vh);
}
.background.down-scroll + .background:not(.down-scroll) { -webkit-transform: translate3d(0, -15vh, 0); transform: translate3d(0, -15vh, 0);
}
.background.down-scroll + .background:not(.down-scroll) .content-wrapper { -webkit-transform: translateY(15vh); transform: translateY(15vh);
}

Full Page Parallax Scroll Effect - Script Codes JS Codes

// ------------- 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");
}
Full Page Parallax Scroll Effect - Script Codes
Full Page Parallax Scroll Effect - Script Codes
Home Page Home
Developer Emily Hayman
Username eehayman
Uploaded June 14, 2022
Rating 3
Size 4,446 Kb
Views 133,584
Do you need developer help for Full Page Parallax Scroll Effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emily Hayman (eehayman) Script Codes
Name
Slider Animation Effect
SVG Stroke Animation - Origami Crane
A Pen by Emily Hayman
Single Div Apple Mouse
The Rhetoric of Donald Trump - A Data Visualization
CSS Variable-Powered Clock
Custom Dropdown List
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!