jquery-css3-animation-queue - npm Package Compare versions

Comparing version 1.0.4 to 1.0.7

bower.json

@@ -0,0 +0,0 @@ {

jquery-css3-animation-queue.js

@@ -10,5 +10,5 @@ /*!
  * Version
- * 1.0.4
+ * 1.0.7
  *
- * Copyright (c) 2016 Richard Hung.
+ * Copyright (c) 2018 Richard Hung.
  *
@@ -23,3 +23,12 @@ * License
 
+
 	// Global Variables
+	if (!window.jqueryCss3AnimationQueue) window.jqueryCss3AnimationQueue = {};
+	if (!window.jqueryCss3AnimationQueue.settings) window.jqueryCss3AnimationQueue.settings = {};
+	// Time to wait before triggering the next element in queue
+	if (!window.jqueryCss3AnimationQueue.settings.delay) window.jqueryCss3AnimationQueue.settings.delay = 500;
+	// Space between the top of the element and bottom of browser before element is added to active animation queue
+	if (!window.jqueryCss3AnimationQueue.settings.offset) window.jqueryCss3AnimationQueue.settings.offset = 150;
+	// Attempt to sort queue by position top of each element rather than position in DOM
+	if (typeof window.jqueryCss3AnimationQueue.settings.applySort === 'undefined') window.jqueryCss3AnimationQueue.settings.applySort = true;
 	var queue             = []; // Queue of elements that have reached animation break point
@@ -32,6 +41,8 @@ var transitionObjects = $('.animated.standby'); // All elements to be animated
 	methods.sortByOffsetTop = function(a,b) {
-		var a_offset = 50;
-		var b_offset = 50;
-		var a_top    = a.offset().top;
+		var a_offset = window.jqueryCss3AnimationQueue.settings.offset;
+		var b_offset = window.jqueryCss3AnimationQueue.settings.offset;
+    var a_top    = a.offset().top;
+    var a_left   = a.offset().left;
 		var b_top    = b.offset().top;
+		var b_left   = b.offset().left;
 
@@ -46,4 +57,8 @@ // Check if elements have custom offset
 
-		// Artificially push one pixel down for the next item to prevent same line items from having random order
-		b_offset--;
+    // Artificially push few pixels down for the next item to prevent same line items from having random order
+    if (a_left < b_left) { // If "a" is to the "left" of "b"
+      b_offset = b_offset - 5;
+    } else if (b_left < a_left) { // If "b" is to the "left" of "a"
+      a_offset = a_offset - 5;
+    }
 
@@ -61,3 +76,3 @@ // Compare the two animation tops
 			// Set default delay
-			var delay = 500;
+			var delay = window.jqueryCss3AnimationQueue.settings.delay;
 
@@ -86,9 +101,10 @@ // Shift the first element out of queue
 		var window_height = $(window).height();
-		var apply_sort    = false;
+		var queue_updated = false;
 
 		// Loop through list of elements waiting for animation
 		transitionObjects.each(function() {
-			var element     = $(this);
-			var element_top = element.offset().top;
-			var offset      = 50; // Space between the top of the element and bottom of browser before element is added to active animation queue
+			var element       = $(this);
+			var element_top   = element.offset().top;
+			var offset        = window.jqueryCss3AnimationQueue.settings.offset;
+			var window_bottom = scroll_top + window_height;
 
@@ -101,3 +117,3 @@ // Check if element has custom offset
 			// Check if browser scroll is at break point
-			if (scroll_top + window_height > element_top - offset) {
+			if (window_bottom > element_top + offset) {
 				// Add element to animation queue
@@ -109,6 +125,6 @@ queue.push(element);
 
-				apply_sort = true;
+				queue_updated = true;
 			}
 		});
-		if (apply_sort) {
+		if (queue_updated && window.jqueryCss3AnimationQueue.settings.applySort) {
 			queue.sort(methods.sortByOffsetTop);
@@ -148,3 +164,3 @@ }
 
-	}
+	}; // End update
 
@@ -151,0 +167,0 @@ $.fn.jqueryCss3AnimationQueue = function(method) {

package.json

 {
   "name": "jquery-css3-animation-queue",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "Queue CSS3 animations to display when browser scrolls down to see element in viewport",
@@ -14,3 +14,3 @@ "main": "jquery-css3-animation-queue.js",
   "dependencies": {
-    "jquery" : "^1.4"
+    "jquery" : "^3.0.0"
   },
@@ -17,0 +17,0 @@ "keywords": [

README.md

@@ -51,9 +51,18 @@ # jQuery CSS3 Animation Queue
 
-## Advanced Usage
+## Options
 
-### Options
-
 The plugin reads the data properties `delay` and `offset` on each element.
 
-The `delay` property determines how much time to wait before animating the next element in the queue. If unset, defaults to `500` milliseconds. This is separate to the actual CSS animation duration and may contain a different value.
+### Delay
+
+Default value: `500`
+
+The `delay` property determines how much time to wait, in milliseconds, before animating the next element in the queue. This is separate to the actual CSS animation duration and may contain a different value.
+
+To override the default value, you can set your own value to the global window variable in your JavaScript.
+```javascript
+window.jqueryCss3AnimationQueue.settings.delay = 5000;
+```
+
+Each animated element can also have a `data-delay` attribute which will override the default.
 ```html
@@ -63,3 +72,14 @@ <div class="animated standby fadeIn" data-delay="2000">The next element in queue will animate in two seconds.</div>
 
-The `offset` property determines how much space between the bottom of the browser and the top of the element before the element is added to the active queue. If unset, defaults to `50` pixels. Higher numbers mean the user will have to scroll down more before animation starts.
+### Offset
+
+Default value: `150`
+
+The `offset` property determines how much space, in pixels, between the bottom of the browser and the top of the element before the element is added to the active queue. Higher numbers mean the user will have to scroll down more before animation starts.
+
+To override the default value, you can set your own value to the global window variable in your JavaScript.
+```javascript
+window.jqueryCss3AnimationQueue.settings.offset = 500;
+```
+
+Each animated element can also have a `data-offset` attribute which will override the default.
 ```html
@@ -69,4 +89,15 @@ <div class="animated standby fadeIn" data-offset="200">This element will be added to the animation queue when the space between the bottom of the browser and the top of the element is more than 200 pixels.</div>
 
-### Methods
+### Sort By Offset Top
 
+Default value: `true`
+
+The plugin will also attempt to sort the queue by the top position of each element. Elements lower in the DOM but higher in position due to negative margins or absolute / fixed positions would be in front of the queue. A side effect is that multiple elements on the same line may animate out of order, due to having the same top position.
+
+You can disable the sort function in your JavaScript. Due to this setting affecting multiple elements, there is no per-element override. However, this setting can be toggled on and off as needed without breaking the plugin.
+```javascript
+window.jqueryCss3AnimationQueue.settings.applySort = false;
+```
+
+## Methods
+
 The plugin comes with several methods that you can call manually from outside the plugin. The most common one is `update`.
@@ -76,3 +107,3 @@
 
-```
+```javascript
 $('.newly_added_div').addClass('animated standby fadeIn');
@@ -79,0 +110,0 @@ $.fn.jqueryCss3AnimationQueue('update');

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14857

increased by16.48%

Lines of code

169

increased by9.74%

Number of lines in readme file

111

increased by38.75%

Dependency changes

• + Addedjquery@3.7.1(transitive)

• - Removedjquery@1.12.4(transitive)

• Updatedjquery@^3.0.0