lemehovskiy / Parallax_background
jQuery parallax background plugin based on GSAP
Stars: ✭ 30
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Parallax background
Cz Parallax
Simple and tiny jQuery plugin for Parallax effect.
Stars: ✭ 10 (-66.67%)
Mutual labels: jquery-plugin, parallax, jquery
Paroller.js
Parallax scrolling jQuery plugin
Stars: ✭ 535 (+1683.33%)
Mutual labels: jquery-plugin, parallax, jquery
Trip.js
🚀 Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.
Stars: ✭ 789 (+2530%)
Mutual labels: jquery-plugin, jquery
Jquery Powertip
💬 A jQuery plugin that creates hover tooltips.
Stars: ✭ 822 (+2640%)
Mutual labels: jquery-plugin, jquery
Jquery Datetextentry
jQuery plugin providing a widget for date entry (not a date picker)
Stars: ✭ 19 (-36.67%)
Mutual labels: jquery-plugin, jquery
Jquery Drawsvg
Lightweight, simple to use jQuery plugin to animate SVG paths
Stars: ✭ 759 (+2430%)
Mutual labels: jquery-plugin, jquery
Printthis
jQuery printing plugin; print specific elements on a page
Stars: ✭ 902 (+2906.67%)
Mutual labels: jquery-plugin, jquery
Selectpage
A simple style and powerful selector, including ajax remote data, autocomplete, pagination, tags, i18n and keyboard navigation features
Stars: ✭ 679 (+2163.33%)
Mutual labels: jquery-plugin, jquery
Jquery.marquee
jQuery plugin to scroll the text like the old traditional marquee
Stars: ✭ 857 (+2756.67%)
Mutual labels: jquery-plugin, jquery
Jquery Selectric
jQuery plugin for easy manipulation and customization of HTML selects
Stars: ✭ 724 (+2313.33%)
Mutual labels: jquery-plugin, jquery
Animatescroll.js
A Simple jQuery Plugin for Animating Scroll
Stars: ✭ 708 (+2260%)
Mutual labels: jquery-plugin, jquery
Tableexport
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files.
Stars: ✭ 781 (+2503.33%)
Mutual labels: jquery-plugin, jquery
Stupid Table Plugin
A stupidly small and simple jQuery table sorter plugin
Stars: ✭ 704 (+2246.67%)
Mutual labels: jquery-plugin, jquery
Push State
Turn static web sites into dynamic web apps.
Stars: ✭ 16 (-46.67%)
Mutual labels: jquery-plugin, jquery
Framecarousel
A jQuery plugin for quickly creating carousels within frames
Stars: ✭ 14 (-53.33%)
Mutual labels: jquery-plugin, jquery
Isinviewport
An ultra-light jQuery plugin that tells you if an element is in the viewport but with a twist.
Stars: ✭ 646 (+2053.33%)
Mutual labels: jquery-plugin, jquery
Rowgrid.js
A small, lightweight JavaScript plugin for placing items in straight rows (jQuery and vanilla JS version) – Demo:
Stars: ✭ 670 (+2133.33%)
Mutual labels: jquery-plugin, jquery
Inputtounsi
A jQuery plugin for entering and validating Tunisian users' data or any other data. It is made very easy to use and easier to customize
Stars: ✭ 25 (-16.67%)
Mutual labels: jquery-plugin, jquery
parallaxBackground
Demo
https://lemehovskiy.github.io/parallax-background
Package Managers
# NPM
npm install parallax_background
Installation
Include js
<script src="TweenLite.min.js"></script>
<script src="CSSPlugin.min.js"></script>
<script src="jquery.min.js"></script>
<script src="parallax_background.js"></script>
Set HTML
<div class="parallax-background">
<div class="parallax-inner" style="background-image: url('background-image.jpg')">
</div>
</div>
Call the plugin
<script type="text/javascript">
$(document).ready(function() {
$('.parallax-background').parallaxBackground();
});
</script>
In result
<html>
<head>
<title>My website</title>
</head>
<body>
<div class="parallax-background">
<div class="parallax-inner" style="background-image: url('background-image.jpg')">
</div>
</div>
<script src="TweenLite.min.js"></script>
<script src="CSSPlugin.min.js"></script>
<script src="jquery.min.js"></script>
<script src="parallax_background.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.parallax-background').parallaxBackground();
});
</script>
</body>
</html>
Data Attribute Settings
In parallaxBackground you can add settings using the data-parallax-background attribute. You still need to call $(element).parallaxBackground() to initialize parallaxBackground on the element.
Example:
<div class="parallax-background" data-parallax-background='{"duration": 3, "zoom": 30}'>
<div class="parallax-inner" style="background-image: url('background-image.jpg')">
</div>
</div>
Settings
Option | Type | Default |
---|---|---|
event | string | scroll |
animation_type | string | shift |
zoom | int | 20 |
rotate_perspective | int | 1400 |
animate_duration | int | 1 |
Browser support
- Chrome
- Firefox
- Opera
- IE10/11
Dependencies
- jQuery 1.7
- Gsap
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].