咨询电话:15632335515
当前位置: 主页 > 建站教程 >

CSS3动画如何实现滑动到当屏时才播放

发布时间:2019-03-16 15:37:00 作者:admin
        声明在阅读这篇文章之前,青锋建站已经给大家开发好一套用于控制animate.css动画库万能调用代码,使用非常方便,仅仅需要添加两个CSS类就可以实现。当然本篇所讲到的也可以实现,只思路稍复杂一些,适合懂一些JS基础的前端开发人员使用。要控制CSS3动画,实现滑动到当屏时才进行播放控制,一般需要结合JS或JQuery来实现更加复杂的控制。下面青锋建站给大家作出实现方法思路和具体的控制代码。

CSS3动画滑动到当屏播放的实现思路分析

        实现的方法和思路是当滑动到当前屏幕时需要控制HTML元素的可见性和可见时触发动画效果。控制元素的可见性可以使用CSS中的visibility:hidden/visible;来实现。当然也许会有人提出使用display:none/block来实现,但是这里不可以使用,原因是:display会使元素失去高度和宽度的属性,不方便使用JS来控制高度的变化。
         控制CSS3动画滑动的当屏时控制可以使用动画元素的外部元素的onmouseover事件或scroll事件来触发,并且增加css样式。Css样式包括:元素可见、绑定动画。使用onmouseover来触发大家很容易理解,但是控制的精细程度不如scroll事件。使用scroll事件触发的原理是当然需要动画效果的元素到达屏幕的中间是触发动画操作,当然这个位置可以调节,根据动画元素的高度来决定,下面有具体的实例。下面是具体的控制CSS3动画效果的代码(我们使用scroll事件来控制):

Javascript控制CSS3动画当屏播放代码:

var animationTop1=$(".div1").offset().top;
var animationTop2=$(".div2").offset().top;
var animationTop3=$(".div3").offset().top;
var animationTop4=$(".div4").offset().top;
var animationTop5=$(".div5").offset().top;
$(window).scroll(function(){
var curtop=$(window).scrollTop()+$(window).height()*0.6;
if(curtop>animationTop1&&curtop<animationTop2)
{
$(".div11").css({"visibility":"visible","-webkit-animation":"fadeInUp 1s","animation":"fadeInUp 1s"});
$(".div12").css({"visibility":"visible","-webkit-animation":"fadeInUp 1.5s","animation":"fadeInUp 1.5s"});
$(".div13").css({"visibility":"visible","-webkit-animation":"fadeInUp 2s","animation":"fadeInUp 2s"});
$(".div14").css({"visibility":"visible","-webkit-animation":"fadeInUp 2.5s","animation":"fadeInUp 2.5s"});
}
if(curtop>animationTop2&&curtop<animationTop3)
{
$(".div2").css({"visibility":"visible","-webkit-animation":"bounceInRight 1s","animation":"bounceInRight 2s"});
}
if(curtop>animationTop3&&curtop<animationTop4)
{
$(".div3").css({"visibility":"visible","-webkit-animation":"fadeInUp 2s","animation":"fadeInUp 2s"});
}
 
if(curtop>animationTop4&&curtop<animationTop5)
{
$(".div4").css({"visibility":"visible","-webkit-animation":"bounceIn 2s","animation":"bounceIn 2s"});
}
});
 

JQ控制动画代码使用详解:

1、$(window).height()*0.6这里指的是当动画元素到达屏幕的0.6倍高度是触发。可以改为其他数值。
2、var animationTop1=$(".div1").offset().top;这里的.div1是动画的CSS类名。
3、({"visibility":"visible","-webkit-animation":"fadeInUp 1s","animation":"fadeInUp 1s"});这里fadeInUp为CSS3动画关键帧的名称。
4、控制代码是在JQuery基础上写的,使用前需要在页面头部加载jquery.js,这段代码需要放在网页的最底部。
 
更多网站设计技巧学习,请访问青锋建站http://www.m-afa.com
分享到:

相关文章MORE

最新发布MORE

  • CSS3动画如何实现滑动到当屏时才播放
  • 外贸网站优化成功的关键_青锋网站建设
  • HTTPS和HTTP的区别_青锋建站
  • 关键词的选择是SEO成功的关键_青锋建站
  • 网站建设哪家公司好_青锋建站
  • 网站建设   石家庄网络公司   网站建设教程   网络营销技巧   石家庄SEO   建站分站   PHP源码   网站案例   建站新闻   青锋工作室
  • 联系电话:15632335515   QQ:943703539
  • 联系地址:石家庄高新区汾河道69号
  • Copyright © 2016-2026 青锋建站 版权所有
  • 15632335515
  • 本港台同步报码室