當(dāng)前位置：
首頁(yè) >
控制元素到达可视区域内触发动效
發(fā)布時(shí)間：2024/1/8
52
豆豆
生活随笔
收集整理的這篇文章主要介紹了
控制元素到达可视区域内触发动效
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
控制元素到達(dá)可視區(qū)域內(nèi)觸發(fā)動(dòng)效，代碼參考了別人的，有修改，時(shí)間久了，出處想不起來(lái)。后面遇到了會(huì)補(bǔ)充源碼地址。<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="renderer" content="webkit"><title>控制元素到達(dá)可視區(qū)域內(nèi)觸發(fā)動(dòng)效</title><!--[if lt IE 9]><meta http-equiv="refresh" content="0;ie.html" /><![endif]--><style>div.animateDiv{width:100%;height:400px;background: #fff;font-size:36px;color: #000;text-align: center;}.fadeInUp{width:100%;height:100px;position:relative;overflow: hidden;line-height: 100px;animation: myfirst 1s linear;-webkit-animation: myfirst 1s linear; /* Safari 和 Chrome */}@-webkit-keyframes myfirst /* Safari and Chrome */ {0% {color:#fff; top:300px;}100% {color:#000; top:0;}}</style>
</head><body>
<div class="container-fluid"><div class="row"><div class="col-lg-12" style="width:100%;height:1000px;background: #5cb85c"></div><div class="col-lg-12"><div class="animateDiv"><div data-animate="fadeInUp">青青子衿，悠悠我心。縱我不往，子寧不嗣音？</div></div></div><div class="col-lg-12" style="width:100%;height:800px;background: #5bc0de"></div><div class="col-lg-12"><div class="animateDiv"><div data-animate="fadeInUp">青青子佩，悠悠我思。縱我不往，子寧不來(lái)？</div></div></div><div class="col-lg-12" style="width:100%;height:800px;background: #c7ddef"></div><div class="col-lg-12"><div class="animateDiv"><div data-animate="fadeInUp">挑兮達(dá)兮，在城闕兮。一日不見，如三月兮。 </div></div></div><div class="col-lg-12" style="width:100%;height:800px;background: #7fd53e"></div><div class="col-lg-12"><div class="animateDiv"><div data-animate="fadeInUp">詩(shī)經(jīng)《國(guó)風(fēng)·鄭風(fēng)·子衿》</div></div></div></div>
</div><script src="js/jquery-3.1.1.min.js"></script>
<script>/*說(shuō)明：這是一個(gè)滾動(dòng)到可視區(qū)域播放動(dòng)畫的插件，當(dāng)窗口滾動(dòng)到可視區(qū)域時(shí)添加ClassName進(jìn)入動(dòng)畫；1.查找頁(yè)面內(nèi)所含有[data-animate]的元素，遍歷得到他們本身；[data-animate]值為動(dòng)態(tài)獲取，需手寫animation，更多動(dòng)畫效果請(qǐng)?jiān)L問(wèn)https://daneden.github.io/animate.css/；2.調(diào)用函數(shù):計(jì)算元素是否到達(dá)可視區(qū)域 返回Boolean值；3.添加有動(dòng)畫的ClassName；注意：此方法不能用于ifarm,窗口滾動(dòng)影響判斷*/$(function(){var windowHeight = $(window).height(); //窗口高度// 監(jiān)聽頁(yè)面滾動(dòng)$(window).scroll(function(event){// 添加【data-animatie】var dataAnimateEl = $('[data-animate]');if (dataAnimateEl.length > 0 ) {dataAnimateEl.each(function(){var element = $(this);var is_Animat = is_Visible_Area(element); //調(diào)用函數(shù)計(jì)算是否到達(dá)可視區(qū)域 返回Booleanvar annimationVal=element.data("animate");if (is_Animat){element.addClass(annimationVal);}})}});//函數(shù)作用：計(jì)算元素是否到達(dá)可視區(qū)域function is_Visible_Area(element) {var objHeight = $(element).offset().top;//元素到頂部的高度let winPos = $(window).scrollTop();//距離頂部滾動(dòng)let val = objHeight-winPos;if (val<windowHeight && val > 0) {//可視區(qū)域// console.log("有動(dòng)畫")return true;}else {//不可視區(qū)域// console.log("不在可視區(qū)域內(nèi)")return false;}}});</script>
</body>
</html>
在vue中使用
methods: {handleAnimate:function(){var windowHeight = $(window).height(); //窗口高度// 添加【data-animatie】var dataAnimateEl = $('[data-animate]');if (dataAnimateEl.length > 0 ) {dataAnimateEl.each(function(){var element = $(this);var is_Animat = false; //調(diào)用函數(shù)計(jì)算是否到達(dá)可視區(qū)域 返回Booleanvar objHeight = $(element).offset().top;//元素到頂部的高度let windowsScrollTop = $(window).scrollTop();//距離頂部滾動(dòng)let val = objHeight-windowsScrollTop;if (val < windowHeight && val > 0) {//可視區(qū)域is_Animat=true;}var annimationVal=element.data("animate");if (is_Animat) {element.addClass(annimationVal);}})}} }, mounted:function(){window.addEventListener('scroll', this.handleAnimate) }總結(jié)
以上是生活随笔為你收集整理的控制元素到达可视区域内触发动效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： win10同时安装wps和office时
- 下一篇： 五分钟搞懂什么是红黑树（全程图解）