https://www.visitaanekoski.fi/codesigner1779024479.jquery-animations.js

1/*
2 * CSS3 Animations
3 * Copyright (c) 2016 Codesign Oy / Marko Niskanen
4 * Version: 0.0.1
5 * 
6 *
7 */
8
9
10jQuery.fn.extend({
11  appear: function (options) {
12
13    var appearList = [];
14    var appearOn = [];
15    var appearOff = [];
16    var postAppearTimer = null;
17
18    var settings = $.extend({
19      delay: 250
20    }, options );
21
22    var appearElems = this;
23    var scrollTop = 0;
24    var scrollTopOld = -1000;
25    var lock = false;
26    var lockCounter = 0;
27
28    var doAppear = function() {
29        var windowHeight = jQuery(window).height();
30        var scrollTop = jQuery('body').scrollTop() + jQuery('html').scrollTop();
31        var scrollBottom = scrollTop + windowHeight;
32
33        var appeared = appearElems.filter(function(){
34          var elem = $(this);
35          var offset = elem.offset();
36          var height = elem.height();
37          var left = offset.left;
38          var top = offset.top;
39          var bottom = top+height;
40
41          if ((top<scrollBottom)&&(top>scrollTop)) {
42            return true;
43          } 
44          if ((bottom<scrollBottom)&&(bottom>scrollTop)) {
45            return true; 
46          } 
47          return false;  
48          
49        });
50
51        settings.onAppear(appeared);
52    }
53
54
55    var appearCheck = function(e) {
56      scrollTop = jQuery('body').scrollTop() + jQuery('html').scrollTop();
57      if (lock) {
58        lockCounter++; // lisätään lukkoa .. 
59      } else {
60        lock = true;
61        if (scrollTopOld!=scrollTop) {
62          doAppear();
63        }
64        
65
66        if (lockCounter>0) {
67          lockCounter = 0;
68          lock = true;
69          doAppear();          
70        }
71        lock = false;
72
73      }
74    };
75
76    $(window).scroll(appearCheck);
77    $(window).resize(appearCheck);
78    jQuery(function(){
79      appearCheck();
80    })
81
82    return this.each(function () {
83      var elem = jQuery(this);
84      // TODO mieti tarvitaanko tätä...      
85    });
86   }
87});
88
89
90
91
92
93
94var socoolSetAnimClasses = function(elem, newClasses) {
95  var i,j;
96
97  var classes = jQuery(elem).prop('className');
98
99  if ((classes !== undefined) && (classes!=='')) {
100    var classList = classes.split(/\s+/);
101    var elemClass = '';
102    for (i = 0; i < classList.length; i++) {
103      oldClass = classList[i];
104      if (jQuery.inArray(oldClass, newClasses)==-1) {
105        if (oldClass.indexOf('sAnim') === 0) {
106          elem.removeClass(oldClass);
107        }
108      } 
109    }
110  }
111
112  for (j = 0; j < newClasses.length; j++) {
113    newClass = newClasses[j];
114    if (!elem.hasClass(newClass)) {
115      if (newClass!=='sAnimgo') {
116        elem.addClass(newClass);
117      }
118    } 
119  }
120
121
122  classes = elem.attr('class');
123
124
125};
126
127
128jQuery(function(){
129
130jQuery('[data-animation]').each(function(i,element) {
131    var elem =jQuery(element);
132    var delay = elem.attr('data-delay');
133    var speed = elem.attr('data-speed');
134    var animation = elem.attr('data-animation');
135    if (speed===undefined || speed==='') {
136      speed = 'Normal';
137    }
138    if (animation!=='') {
139      animation = 'sAnim' + animation;
140      speed = 'sAnim' + speed;
141
142      socoolSetAnimClasses(elem, [speed, animation]);
143  }
144  }
145);
146var onBlockAppear = function($affected) {
147  var animatedElements = jQuery($affected).find('[data-animation]');
148  
149  jQuery.each(animatedElements,function(i,element) {
150    var elem =jQuery(element);
151    var delay = elem.attr('data-delay');
152    var speed = elem.attr('data-speed');
153    if (speed===undefined || speed==='') {
154      speed = 'Normal';
155    }
156
157    var animation = elem.attr('data-animation');
158
159
160
161    if (animation!=='') {
162      animation = 'sAnim' + animation;
163      speed = 'sAnim' + speed;
164
165      socoolSetAnimClasses(elem, ['sAnimgo', speed, animation]);
166
167      if (delay===undefined || delay==='') {
168        delay = 0;
169      } else {
170        delay = parseInt(delay);
171      }
172      if (delay>20) {
173        elem.css({'animation-delay':delay+'ms'});
174        elem.addClass('sAnimgo');
175      } else {
176        elem.css({'animation-delay':'0ms'});
177        elem.addClass('sAnimgo');
178      } 
179
180    }
181
182  });
183  
184
185};
186
187var onBlockDisappear = function($affected) {
188  var animatedElements = jQuery($affected).find('[data-animation]');
189  
190  jQuery.each(animatedElements,function(i,element) {
191    var elem =jQuery(element);
192//    elem.removeClass('sAnimgo');
193    elem.addClass('sAnimAway');
194  });
195}
196
197jQuery('.socool-block').appear({onAppear: onBlockAppear, onDisappear: onBlockDisappear});
198
199
200});