jjcosgrove / Jquery Aniview
Licence: mit
A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.
Stars: ✭ 205
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Jquery Aniview
Balancedgallery
A balanced photo gallery plugin for jQuery.
Stars: ✭ 158 (-22.93%)
Mutual labels: jquery-plugin, jquery
Hc Offcanvas Nav
JavaScript library for creating toggled off-canvas multi-level navigations, allowing endless nesting of submenu elements, supporting swipe gestures, keyboard interactions and ARIA attributes.
Stars: ✭ 201 (-1.95%)
Mutual labels: jquery-plugin, jquery
Jquery Scrollstop
A jQuery plugin that fires events when scrolling stops and starts.
Stars: ✭ 158 (-22.93%)
Mutual labels: jquery-plugin, jquery
Calx.js
jQuery Calx - a jQuery plugin for creating formula-based calculation form
Stars: ✭ 190 (-7.32%)
Mutual labels: jquery-plugin, jquery
Jquery Contextmenu
jQuery contextMenu plugin & polyfill
Stars: ✭ 2,148 (+947.8%)
Mutual labels: jquery-plugin, jquery
Viewport.jquery
viewport.jquery - simple but handy jQuery plugin adding methods and CSS selectors to check if element is in certain viewport
Stars: ✭ 156 (-23.9%)
Mutual labels: jquery-plugin, jquery
Sticky Sidebar
😎 Pure JavaScript tool for making smart and high performance sticky sidebar.
Stars: ✭ 2,057 (+903.41%)
Mutual labels: jquery-plugin, jquery
Magnificent.js
🔍 Zoom responsively, images & more, w/ jQuery.
Stars: ✭ 153 (-25.37%)
Mutual labels: jquery-plugin, jquery
Bootstrap Input Spinner
A Bootstrap 4 / jQuery plugin to create input spinner elements for number input
Stars: ✭ 176 (-14.15%)
Mutual labels: jquery-plugin, jquery
Jquery Gantt
🌈 Lightweight jQuery gantt plugin.
Stars: ✭ 193 (-5.85%)
Mutual labels: jquery-plugin, jquery
Rangeslider.js
🎚 HTML5 input range slider element polyfill
Stars: ✭ 2,153 (+950.24%)
Mutual labels: jquery-plugin, jquery
Normalmap.js
normalmap.js is a library for creating simple interactive lighting effects using normal maps.
Stars: ✭ 156 (-23.9%)
Mutual labels: jquery-plugin, jquery
Jquery.resizeend
A custom event that fires when a user stops resizing their browser.
Stars: ✭ 155 (-24.39%)
Mutual labels: jquery-plugin, jquery
Stickyfloat
This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs. This plugin solves that problem with as little code as I could possible get it so it will run in the most optimized way, while also allow you to customize it in many important ways which might suit you best.
Stars: ✭ 166 (-19.02%)
Mutual labels: jquery-plugin, jquery
Jquery.serializeobject
Encode a set of form elements as a JSON object for manipulation/submission.
Stars: ✭ 149 (-27.32%)
Mutual labels: jquery-plugin, jquery
Jquery Connections
Add stylable lines connecting page elements. ⮑ Handy for visualizing relations and graph edges. ⮐
Stars: ✭ 151 (-26.34%)
Mutual labels: jquery-plugin, jquery
Bdialog
Extend the Bootstrap Modal features, making dialog more functions and easier to use, dialog type including modal, alert, mask and toast types
Stars: ✭ 174 (-15.12%)
Mutual labels: jquery-plugin, jquery
jQuery AniView
A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.
Demo
http://jjcosgrove.github.io/jquery-aniview/
Installation (via npm)
npm install jquery-aniview
CDN
Instead of a local installation you may request a remote copy of jQuery AniView from unpkg CDN.
To request the latest version, use the following:
<script src="https://unpkg.com/jquery-aniview/dist/jquery.aniview.js"></script>
For maximum security you may also decide to:
-
reference a specific version of jQuery AniView
-
generate a SRI hash of that version and use it to ensure integrity
-
set the CORS settings attribute to make anonymous requests to CDN
Example:
<script src="https://unpkg.com/[email protected]/dist/jquery.aniview.js"
integrity="sha384-zDA6q/t525x7f6KD/OaOe24vCxSPU3eraILc2NU+ZA7ISsc3ExQbj8PB56FRMq6H"
crossorigin="anonymous"></script>
Initialisation
$('.aniview').AniView();
Options
var options = {
animateThreshold: 100,
scrollPollInterval: 50
}
$('.aniview').AniView(options);
| Option | Type | Description | Default |
|---|---|---|---|
| animateThreshold | int | +ve numbers delay the animation sequence until the specified number of pixels have come into view. -ve numbers will trigger the animation sequence prior to the element coming into view. | 0 |
| scrollPollInterval | int | The frequency at which user scrolling is 'polled' i.e. tested. This is in milliseconds (ms) and is an extension to jQuery's in-built 'scroll' event/handler. | 20 |
Markup
<div class="aniview" data-av-animation="slideInRight"></div>
Full Example
A typical working example (minimal) might look something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My AniView Page</title>
<link type="text/css" rel="stylesheet" href="animate.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.aniview.js"></script>
<script>
$(document).ready(function(){
$('.aniview').AniView();
});
</script>
</head>
<body>
<div>
<p class="aniview" data-av-animation="slideInRight">
This is my awesome animated element!
</p>
</div>
</body>
</html>
Notes
Any element already in the viewport when the user loads the page will have it's animation triggered immediately if one has been set. In other words, it will not wait for the user to begin scrolling before initiating the animation on these elements.
Contribute
Bugs or feature requests/contributions can be done via:
https://github.com/jjcosgrove/jquery-aniview/issues
Authors
- Just me for now.
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].