如何做ptp刷流量的网站,南宁网站建设公司怎么赚钱,每个网站都有服务器吗,湖南乔口建设公司网站前景
手机站网页实现动画效果#xff0c;animate.css是一个轻量级的css动画库#xff0c;提供预定义的动画效果#xff0c;使用方法参考 Animate.css | A cross-browser library of CSS animations.
问题#xff1a;
添加好动画后#xff0c;发现动画会在页面加载后一…前景
手机站网页实现动画效果animate.css是一个轻量级的css动画库提供预定义的动画效果使用方法参考 Animate.css | A cross-browser library of CSS animations.
问题
添加好动画后发现动画会在页面加载后一次性执行缺少边滚动边展示动画的交互效果
解决
借用WOW.js是对animate.css的扩充让页面滚动更灵动
使用
//引入资源
link relstylesheet href./css/animate.min.css
script src./js/wow.min.js/script//dom
a href./news.html classwow animate__animated animate__flipInX了 解 更 多 GO/a
//js调用
script var wow new WOW({boxClass:wow,animateClass:animate__animated,offset:8,mobile: true,live: true});wow.init();
/script
补充:
wow.min.js内容
/*! WOW - v1.1.2 - 2015-04-07
* Copyright (c) 2015 Matthieu Aussaguel; Licensed MIT */(function(){var a,b,c,d,e,ffunction(a,b){return function(){return a.apply(b,arguments)}},g[].indexOf||function(a){for(var b0,cthis.length;cb;b)if(b in thisthis[b]a)return b;return-1};bfunction(){function a(){}return a.prototype.extendfunction(a,b){var c,d;for(c in b)db[c],nulla[c](a[c]d);return a},a.prototype.isMobilefunction(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.createEventfunction(a,b,c,d){var e;return nullb(b!1),nullc(c!1),nulld(dnull),null!document.createEvent?(edocument.createEvent(CustomEvent),e.initCustomEvent(a,b,c,d)):null!document.createEventObject?(edocument.createEventObject(),e.eventTypea):e.eventNamea,e},a.prototype.emitEventfunction(a,b){return null!a.dispatchEvent?a.dispatchEvent(b):b in(null!a)?a[b]():onb in(null!a)?a[onb]():void 0},a.prototype.addEventfunction(a,b,c){return null!a.addEventListener?a.addEventListener(b,c,!1):null!a.attachEvent?a.attachEvent(onb,c):a[b]c},a.prototype.removeEventfunction(a,b,c){return null!a.removeEventListener?a.removeEventListener(b,c,!1):null!a.detachEvent?a.detachEvent(onb,c):delete a[b]},a.prototype.innerHeightfunction(){returninnerHeightin window?window.innerHeight:document.documentElement.clientHeight},a}(),cthis.WeakMap||this.MozWeakMap||(cfunction(){function a(){this.keys[],this.values[]}return a.prototype.getfunction(a){var b,c,d,e,f;for(fthis.keys,bd0,ef.length;ed;bd)if(cf[b],ca)return this.values[b]},a.prototype.setfunction(a,b){var c,d,e,f,g;for(gthis.keys,ce0,fg.length;fe;ce)if(dg[c],da)return void(this.values[c]b);return this.keys.push(a),this.values.push(b)},a}()),athis.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(afunction(){function a(){undefined!typeof consolenull!consoleconsole.warn(MutationObserver is not supported by your browser.),undefined!typeof consolenull!consoleconsole.warn(WOW.js cannot detect dom mutations, please call .sync() after loading new content.)}return a.notSupported!0,a.prototype.observefunction(){},a}()),dthis.getComputedStyle||function(a){return this.getPropertyValuefunction(b){var c;returnfloatb(bstyleFloat),e.test(b)b.replace(e,function(a,b){return b.toUpperCase()}),(null!(ca.currentStyle)?c[b]:void 0)||null},this},e/(\-([a-z]){1})/g,this.WOWfunction(){function e(a){nulla(a{}),this.scrollCallbackf(this.scrollCallback,this),this.scrollHandlerf(this.scrollHandler,this),this.resetAnimationf(this.resetAnimation,this),this.startf(this.start,this),this.scrolled!0,this.configthis.util().extend(a,this.defaults),this.animationNameCachenew c,this.wowEventthis.util().createEvent(this.config.boxClass)}return e.prototype.defaults{boxClass:wow,animateClass:animated,offset:0,mobile:!0,live:!0,callback:null},e.prototype.initfunction(){var a;return this.elementwindow.document.documentElement,interactive(adocument.readyState)||completea?this.start():this.util().addEvent(document,DOMContentLoaded,this.start),this.finished[]},e.prototype.startfunction(){var b,c,d,e;if(this.stopped!1,this.boxesfunction(){var a,c,d,e;for(dthis.element.querySelectorAll(.this.config.boxClass),e[],a0,cd.length;ca;a)bd[a],e.push(b);return e}.call(this),this.allfunction(){var a,c,d,e;for(dthis.boxes,e[],a0,cd.length;ca;a)bd[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(ethis.boxes,c0,de.length;dc;c)be[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(window,scroll,this.scrollHandler),this.util().addEvent(window,resize,this.scrollHandler),this.intervalsetInterval(this.scrollCallback,50)),this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g[],c0,db.length;dc;c)fb[c],g.push(function(){var a,b,c,d;for(cf.addedNodes||[],d[],a0,bc.length;ba;a)ec[a],d.push(this.doSync(e));return d}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stopfunction(){return this.stopped!0,this.util().removeEvent(window,scroll,this.scrollHandler),this.util().removeEvent(window,resize,this.scrollHandler),null!this.interval?clearInterval(this.interval):void 0},e.prototype.syncfunction(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSyncfunction(a){var b,c,d,e,f;if(nulla(athis.element),1a.nodeType){for(aa.parentNode||a,ea.querySelectorAll(.this.config.boxClass),f[],c0,de.length;dc;c)be[c],g.call(this.all,b)0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled!0)):f.push(void 0);return f}},e.prototype.showfunction(a){return this.applyStyle(a),a.classNamea.className this.config.animateClass,null!this.config.callbackthis.config.callback(a),this.util().emitEvent(a,this.wowEvent),this.util().addEvent(a,animationend,this.resetAnimation),this.util().addEvent(a,oanimationend,this.resetAnimation),this.util().addEvent(a,webkitAnimationEnd,this.resetAnimation),this.util().addEvent(a,MSAnimationEnd,this.resetAnimation),a},e.prototype.applyStylefunction(a,b){var c,d,e;return da.getAttribute(data-wow-duration),ca.getAttribute(data-wow-delay),ea.getAttribute(data-wow-iteration),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animatefunction(){returnrequestAnimationFramein window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStylefunction(){var a,b,c,d,e;for(dthis.boxes,e[],b0,cd.length;cb;b)ad[b],e.push(a.style.visibilityvisible);return e},e.prototype.resetAnimationfunction(a){var b;return a.type.toLowerCase().indexOf(animationend)0?(ba.target||a.srcElement,b.classNameb.className.replace(this.config.animateClass,).trim()):void 0},e.prototype.customStylefunction(a,b,c,d,e){return bthis.cacheAnimationName(a),a.style.visibilityb?hidden:visible,cthis.vendorSet(a.style,{animationDuration:c}),dthis.vendorSet(a.style,{animationDelay:d}),ethis.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?none:this.cachedAnimationName(a)}),a},e.prototype.vendors[moz,webkit],e.prototype.vendorSetfunction(a,b){var c,d,e,f;d[];for(c in b)eb[c],a[c]e,d.push(function(){var b,d,g,h;for(gthis.vendors,h[],b0,dg.length;db;b)fg[b],h.push(a[fc.charAt(0).toUpperCase()c.substr(1)]e);return h}.call(this));return d},e.prototype.vendorCSSfunction(a,b){var c,e,f,g,h,i;for(hd(a),gh.getPropertyCSSValue(b),fthis.vendors,c0,ef.length;ec;c)if[c],gg||h.getPropertyCSSValue(-i-b);return g},e.prototype.animationNamefunction(a){var b;try{bthis.vendorCSS(a,animation-name).cssText}catch(c){bd(a).getPropertyValue(animation-name)}returnnoneb?:b},e.prototype.cacheAnimationNamefunction(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationNamefunction(a){return this.animationNameCache.get(a)},e.prototype.scrollHandlerfunction(){return this.scrolled!0},e.prototype.scrollCallbackfunction(){var a;return!this.scrolled||(this.scrolled!1,this.boxesfunction(){var b,c,d,e;for(dthis.boxes,e[],b0,cd.length;cb;b)ad[b],a(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTopfunction(a){for(var b;void 0a.offsetTop;)aa.parentNode;for(ba.offsetTop;aa.offsetParent;)ba.offsetTop;return b},e.prototype.isVisiblefunction(a){var b,c,d,e,f;return ca.getAttribute(data-wow-offset)||this.config.offset,fwindow.pageYOffset,efMath.min(this.element.clientHeight,this.util().innerHeight())-c,dthis.offsetTop(a),bda.clientHeight,edbf},e.prototype.utilfunction(){return null!this._util?this._util:this._utilnew b},e.prototype.disabledfunction(){return!this.config.mobilethis.util().isMobile(navigator.userAgent)},e}()}).call(this);
