Last active
August 25, 2020 11:55
-
-
Save howbizarre/516d175cc6c46c021fbdc84a9ab9b719 to your computer and use it in GitHub Desktop.
Simple jQuery parallax effect over background images
This file contains 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
.parallax-background { | |
background-position: 50%; | |
background-repeat: no-repeat; | |
background-size: cover; | |
-webkit-background-size: cover; | |
transform: translate3d(0,0,0); | |
-moz-transform: translate3d(0,0,0); | |
-webkit-transform: translate3d(0,0,0); | |
} | |
/* Used for visualization only */ | |
.add-some-space { | |
min-height: 400px; | |
} | |
.parallax-background.add-some-space { | |
box-shadow: inset 0 0 10px #3c3c3c; | |
} |
This file contains 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
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
<title>Simple jQuery Background Parallax</title> | |
<meta name="description" content="Very simple jQuery based parallax efect on the background image." /> | |
<link rel="stylesheet" href="jQ-parallax.css" /> | |
</head> | |
<body> | |
<div class="add-some-space"> </div> | |
<div class="parallax-background add-some-space" style="background-image:url('http://placekitten.com/1920/1250');"> </div> | |
<div class="add-some-space"> </div> | |
<div class="parallax-background add-some-space" style="background-image:url('http://placekitten.com/g/1920/1110');"> </div> | |
<div class="add-some-space"> </div> | |
<div class="parallax-background add-some-space" style="background-image:url('http://placekitten.com/g/1920/1200');"> </div> | |
<div class="add-some-space"> </div> | |
<div class="parallax-background add-some-space" style="background-image:url('http://placekitten.com/g/1920/1400');"> </div> | |
<div class="add-some-space"> </div> | |
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> | |
<script src="jQ-parallax.js"></script> | |
</body> | |
</html> |
This file contains 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
/*global document, window*/ | |
/* DOM elements with background images */ | |
const backgrounds = document.querySelectorAll(".parallax-background"); | |
$(() => { | |
"use strict"; | |
/* global namespace */ | |
const global = { | |
"window": $(window), | |
"document": $(document), | |
"parallaxBackground": $(backgrounds) | |
}; | |
/* check if the element is in viewport */ | |
$.fn.isInViewport = function() { | |
const self = $(this); | |
let elementTop = self.offset().top; | |
let elementBottom = elementTop + self.outerHeight(); | |
let viewportTop = global.window.scrollTop(); | |
let viewportBottom = viewportTop + global.window.height(); | |
return elementBottom > viewportTop && elementTop < viewportBottom; | |
}; | |
global.window.on("load scroll", () => { | |
let scroll = global.document.scrollTop(); | |
const offset = -0.4; | |
global.parallaxBackground.each(function() { | |
const self = $(this); | |
let selfPosition = self.offset().top; | |
if (self.isInViewport()) { | |
self.css({ | |
"background-position": "50% " + (selfPosition * offset - scroll * offset) + "px" | |
}); | |
} | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment