首先不要忘了,这是个jQuery代码,记得先引入jQuery。
初始化代码:
页面初始化时添加默认class,在这个class上可以编写默认的样式。即初始状态。
function commonAnimationInitial() { var $object = $(".common-animate-item"); $object.each(function () { var $this = $(this); $this.addClass("normalmove"); }); }
位置监测代码:
function commonAnimationAction() { var $object = $(".normalmove"); $object.each(function () { var $this = $(this); if ($this.length) { var $a = $(this).offset().top; var $b = $(window).scrollTop(); var $c = $(window).height() * 0.75; //指定元素(从屏幕顶部算起)进入屏幕的75%的位置时添加Class var $d = $(window).height(); var $selfHeight = $(this).height(); if (($b > ($a - $c)) || ($b > ($a - $d + $selfHeight))) { $this.addClass("normalanimate"); } } }); }
执行代码:
$(function(){ commonAnimationInitial(); commonAnimationAction(); }); $(window).on("scroll",function(){ commonAnimationAction() });
可参考样式:
.normalmove { transition-duration: 0.6s; transform: translateY(50px); opacity: 0; } .normalmove.normalanimate { transform: translateY(0px); opacity: 1; }
评论区
发表新的留言
您可以留言提出您的疑问或建议。
您的留言得到回复时,会通过您填写的邮箱提醒您。