Skip to content

Easy parallax plugin using pure javascript. Also works on mobile platforms. Cross browser support.

License

Notifications You must be signed in to change notification settings

marrio-h/universal-parallax

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Repository files navigation

npm version Package Quality

Universal Parallax

Easy parallax plugin using pure javascript. Lightweight (2kb) and cross browser compatibility - including mobile platforms (iOS, Android).

⚑ Features

  • Easy setup
  • Pure JavaScript
  • Adaptive height
  • Works on mobile devices
  • Lightweight (2kb minified)

πŸ’Ύ Install

$ npm i universal-parallax -S or yarn add universal-parallax

πŸš€ Setup

#1

Choose between:

  • Include this in your <head> section
<link href="node_modules/universal-parallax/dist/universal-parallax.min.css" rel="stylesheet">
  • Or add this CSS
.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -100;
}

.parallax {
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;

	/* BG behaviour */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

⚑ BG behaviour in seperate class gives more flexibility controlling them ⚑ SASS version available in /dist folder

#2

If <section> is your container, make the parallax element inside it

<section>
	<div class="parallax" data-parallax-image="path/to/your_image">
</section>

⚑ You can also use background-image to define your image instead of using data-parallax-image=""

#3

Static HTML

Include the script to your project

Put the script at the bottom of your markup right after jQuery

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="node_modules/universal-parallax/dist/universal-parallax.min.js"></script>

Load

Webpack

Add jQuery via the "webpack.ProvidePlugin" to your webpack configuration:


//...
plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
],
//...

Load the required stylesheet and JS:

import 'universal-parallax/dist/universal-parallax.min.css';
import 'universal-parallax';

#4

Initialize the JS function

<script>
$(document).ready(function(){
  $('.parallax').universalParallax();
});
</script>

That's it! 🏁

Custom speed

You can change the parallax speed; the higher the number, the slower the parallax effect

$(document).ready(function(){
     $('.parallax').universalParallax({
        speed: 6.0,
    });
});

⚑ speed: 1 is the minimum value before the background image is fixed

Tips

Opacity

If you want your backround color to shine through or dampen the image without making it a .png - just add transparency to it

.parallax {
	opacity: 0.5;
}

About

Easy parallax plugin using pure javascript. Also works on mobile platforms. Cross browser support.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published