Skip to content

Instantly share code, notes, and snippets.

@howbizarre

howbizarre/jQ-parallax.css

Last active August 25, 2020 11:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save howbizarre/516d175cc6c46c021fbdc84a9ab9b719 to your computer and use it in GitHub Desktop.
Save howbizarre/516d175cc6c46c021fbdc84a9ab9b719 to your computer and use it in GitHub Desktop.
Download ZIP
Simple jQuery parallax effect over background images
Raw
jQ-parallax.css
.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;
}
Raw
jQ-parallax.html
<!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">&nbsp;</div>
<div class="parallax-background add-some-space" style="background-image:url('http://placekitten.com/1920/1250');">&nbsp;</div>
<div class="add-some-space">&nbsp;</div>
<div class="parallax-background add-some-space" style="background-image:url('http://placekitten.com/g/1920/1110');">&nbsp;</div>
<div class="add-some-space">&nbsp;</div>
<div class="parallax-background add-some-space" style="background-image:url('http://placekitten.com/g/1920/1200');">&nbsp;</div>
<div class="add-some-space">&nbsp;</div>
<div class="parallax-background add-some-space" style="background-image:url('http://placekitten.com/g/1920/1400');">&nbsp;</div>
<div class="add-some-space">&nbsp;</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jQ-parallax.js"></script>
</body>
</html>
Raw
jQ-parallax.js
/*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