diff options
Diffstat (limited to 'app/dispatch/static/materialize/js/transitions.js')
| -rw-r--r-- | app/dispatch/static/materialize/js/transitions.js | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/app/dispatch/static/materialize/js/transitions.js b/app/dispatch/static/materialize/js/transitions.js new file mode 100644 index 0000000..5460279 --- /dev/null +++ b/app/dispatch/static/materialize/js/transitions.js @@ -0,0 +1,169 @@ +(function ($) {
+ // Image transition function
+ Materialize.fadeInImage = function(selectorOrEl) {
+ var element;
+ if (typeof(selectorOrEl) === 'string') {
+ element = $(selectorOrEl);
+ } else if (typeof(selectorOrEl) === 'object') {
+ element = selectorOrEl;
+ } else {
+ return;
+ }
+ element.css({opacity: 0});
+ $(element).velocity({opacity: 1}, {
+ duration: 650,
+ queue: false,
+ easing: 'easeOutSine'
+ });
+ $(element).velocity({opacity: 1}, {
+ duration: 1300,
+ queue: false,
+ easing: 'swing',
+ step: function(now, fx) {
+ fx.start = 100;
+ var grayscale_setting = now/100;
+ var brightness_setting = 150 - (100 - now)/1.75;
+
+ if (brightness_setting < 100) {
+ brightness_setting = 100;
+ }
+ if (now >= 0) {
+ $(this).css({
+ "-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
+ "filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
+ });
+ }
+ }
+ });
+ };
+
+ // Horizontal staggered list
+ Materialize.showStaggeredList = function(selectorOrEl) {
+ var element;
+ if (typeof(selectorOrEl) === 'string') {
+ element = $(selectorOrEl);
+ } else if (typeof(selectorOrEl) === 'object') {
+ element = selectorOrEl;
+ } else {
+ return;
+ }
+ var time = 0;
+ element.find('li').velocity(
+ { translateX: "-100px"},
+ { duration: 0 });
+
+ element.find('li').each(function() {
+ $(this).velocity(
+ { opacity: "1", translateX: "0"},
+ { duration: 800, delay: time, easing: [60, 10] });
+ time += 120;
+ });
+ };
+
+
+ $(document).ready(function() {
+ // Hardcoded .staggered-list scrollFire
+ // var staggeredListOptions = [];
+ // $('ul.staggered-list').each(function (i) {
+
+ // var label = 'scrollFire-' + i;
+ // $(this).addClass(label);
+ // staggeredListOptions.push(
+ // {selector: 'ul.staggered-list.' + label,
+ // offset: 200,
+ // callback: 'showStaggeredList("ul.staggered-list.' + label + '")'});
+ // });
+ // scrollFire(staggeredListOptions);
+
+ // HammerJS, Swipe navigation
+
+ // Touch Event
+ var swipeLeft = false;
+ var swipeRight = false;
+
+
+ // Dismissible Collections
+ $('.dismissable').each(function() {
+ $(this).hammer({
+ prevent_default: false
+ }).on('pan', function(e) {
+ if (e.gesture.pointerType === "touch") {
+ var $this = $(this);
+ var direction = e.gesture.direction;
+ var x = e.gesture.deltaX;
+ var velocityX = e.gesture.velocityX;
+
+ $this.velocity({ translateX: x
+ }, {duration: 50, queue: false, easing: 'easeOutQuad'});
+
+ // Swipe Left
+ if (direction === 4 && (x > ($this.innerWidth() / 2) || velocityX < -0.75)) {
+ swipeLeft = true;
+ }
+
+ // Swipe Right
+ if (direction === 2 && (x < (-1 * $this.innerWidth() / 2) || velocityX > 0.75)) {
+ swipeRight = true;
+ }
+ }
+ }).on('panend', function(e) {
+ // Reset if collection is moved back into original position
+ if (Math.abs(e.gesture.deltaX) < ($(this).innerWidth() / 2)) {
+ swipeRight = false;
+ swipeLeft = false;
+ }
+
+ if (e.gesture.pointerType === "touch") {
+ var $this = $(this);
+ if (swipeLeft || swipeRight) {
+ var fullWidth;
+ if (swipeLeft) { fullWidth = $this.innerWidth(); }
+ else { fullWidth = -1 * $this.innerWidth(); }
+
+ $this.velocity({ translateX: fullWidth,
+ }, {duration: 100, queue: false, easing: 'easeOutQuad', complete:
+ function() {
+ $this.css('border', 'none');
+ $this.velocity({ height: 0, padding: 0,
+ }, {duration: 200, queue: false, easing: 'easeOutQuad', complete:
+ function() { $this.remove(); }
+ });
+ }
+ });
+ }
+ else {
+ $this.velocity({ translateX: 0,
+ }, {duration: 100, queue: false, easing: 'easeOutQuad'});
+ }
+ swipeLeft = false;
+ swipeRight = false;
+ }
+ });
+
+ });
+
+
+ // time = 0
+ // // Vertical Staggered list
+ // $('ul.staggered-list.vertical li').velocity(
+ // { translateY: "100px"},
+ // { duration: 0 });
+
+ // $('ul.staggered-list.vertical li').each(function() {
+ // $(this).velocity(
+ // { opacity: "1", translateY: "0"},
+ // { duration: 800, delay: time, easing: [60, 25] });
+ // time += 120;
+ // });
+
+ // // Fade in and Scale
+ // $('.fade-in.scale').velocity(
+ // { scaleX: .4, scaleY: .4, translateX: -600},
+ // { duration: 0});
+ // $('.fade-in').each(function() {
+ // $(this).velocity(
+ // { opacity: "1", scaleX: 1, scaleY: 1, translateX: 0},
+ // { duration: 800, easing: [60, 10] });
+ // });
+ });
+}( jQuery ));
|