AOS 免写程式!载入套件滚动页面,让你的网页动起来

  现在制作网页几乎都以手机优先,最主要的原因就在於,现在人滑手机的时间比用电脑还长, 甚至搭车、等人就会滑滑手机来打发时间,但也碍於手机只有点击效果,因此有很多特效就无法呈现,因此滚动区块一一的呈现出来,这无论是手机、平板还是电脑,都可一同呈现。

所以早期梅干最常使用的就是waypoints再搭丑CSS3的动画模组,就可让滑鼠滚动页面时,让区块一一的飞出来,相当的简单且方便,但随着waypoints的作者已很久没更新,以至於目前不支援jQuery3.x以上的版本,因此梅干上网找了好久,终於找到一套不但简单易用,且完全不用写到任何的程式码,甚至所有的参数设定,阶可在html的标签中完成,因此想要让网页动起来的朋友,现在也一块来看看AOS这套件吧!


AOS连结网址:https://michalsnik.github.io/aos/


Step1
首先进到AOS外挂的网页时,分别将CSS与JS载入到网页後,再加入AOS.init();来将它启用。


Step2
接着再html的标签中,加入要呈现的特效属性後,当页面滚动到区块时,区块就会向上淡出,而在AOS的官网中,有更详尽的效果展示,因此想知道更多效果,可直接到官网中查看。


Step3
除了新增动态效果以外,甚至还可设定动画的持续时间,因此下回想要让网页动起来,AOS这套件绝不容错过喔!

0
希望看到您的想法,请您发表评论x