This time I will share jQuery Plugin and tutorial about Responsive Any Content Parallax Plugin With jQuery – Parallux, hope it will help you in programming stack.
Parallux is a jQuery plugin which makes use of CSS3 3D transforms (translate3d) to create smooth hardware accelerated parallax scrolling effect on any content (videos, images, background, sliders, text) with fallbacks to old browsers and specific mobile devices.
How to use it:
1. First you need to include jQuery library and then link the jQuery Parallux plugin’s CSS JavaScript files.
1 |
<link rel="stylesheet" href="dist/jquery.parallux.min.css"> |
2 |
<script src="//code.jquery.com/jquery-2.2.3.min.js"></script> |
3 |
<script src="src/jquery.parallux.js"></script> |
2. Add parallax background and foreground layers to your webpage as follows:
01 |
<div class="parallux"> |
04 |
<div class="parallux-bg fixed"> |
06 |
<div class="parallux-inner dark bg-header" > |
09 |
<h2>Lorem ipsum dolor</h2> |
3. Initialize the plugin and done.
1 |
$(".parallux").parallux(); |
4. Plugin’s default settings.
01 |
$(".parallux").parallux({ |
Change log:
2016-05-26
- JS update
- add gulp support
This awesome jQuery plugin is developed by tomsarduy. For more Advanced Usages, please check the demo page or visit the official website.
