控制元素到达可视区域内触发动效
生活随笔
收集整理的這篇文章主要介紹了
控制元素到达可视区域内触发动效
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
控制元素到達可視區(qū)域內(nèi)觸發(fā)動效，代碼參考了別人的，有修改，時間久了，出處想不起來。后面遇到了會補充源碼地址。<!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>控制元素到達可視區(qū)域內(nèi)觸發(fā)動效</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">青青子佩，悠悠我思。縱我不往，子寧不來？</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">挑兮達兮，在城闕兮。一日不見，如三月兮。 </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">詩經(jīng)《國風(fēng)·鄭風(fēng)·子衿》</div></div></div></div>
</div><script src="js/jquery-3.1.1.min.js"></script>
<script>/*說明：這是一個滾動到可視區(qū)域播放動畫的插件，當窗口滾動到可視區(qū)域時添加ClassName進入動畫；1.查找頁面內(nèi)所含有[data-animate]的元素，遍歷得到他們本身；[data-animate]值為動態(tài)獲取，需手寫animation，更多動畫效果請訪問https://daneden.github.io/animate.css/；2.調(diào)用函數(shù):計算元素是否到達可視區(qū)域 返回Boolean值；3.添加有動畫的ClassName；注意：此方法不能用于ifarm,窗口滾動影響判斷*/$(function(){var windowHeight = $(window).height(); //窗口高度// 監(jiān)聽頁面滾動$(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ù)計算是否到達可視區(qū)域 返回Booleanvar annimationVal=element.data("animate");if (is_Animat){element.addClass(annimationVal);}})}});//函數(shù)作用：計算元素是否到達可視區(qū)域function is_Visible_Area(element) {var objHeight = $(element).offset().top;//元素到頂部的高度let winPos = $(window).scrollTop();//距離頂部滾動let val = objHeight-winPos;if (val<windowHeight && val > 0) {//可視區(qū)域// console.log("有動畫")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ù)計算是否到達可視區(qū)域 返回Booleanvar objHeight = $(element).offset().top;//元素到頂部的高度let windowsScrollTop = $(window).scrollTop();//距離頂部滾動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é)
以上是生活随笔為你收集整理的控制元素到达可视区域内触发动效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win10同时安装wps和office时
- 下一篇： 五分钟搞懂什么是红黑树（全程图解）