六合彩平特肖|平特肖公式数据
現在的位置: 首頁 > 方法、技巧 > 正文

ScrollReveal-元素隨頁面滾動產生動畫的js插件(轉)

2020年01月27日 方法、技巧 ⁄ 共 4999字 ⁄ 字號 暫無評論

簡介

和 WOW.js 一樣,scrollReveal.js 也是一款頁面滾動顯示動畫的 JavaScript,能讓頁面更加有趣,更吸引用戶眼球。不同的是 WOW.js 的動畫只播放一次,而 scrollReveal.js 的動畫可以播放一次或無限次;WOW.js 依賴 animate.css,而 scrollReveal.js 不依賴其他任何文件。
雖然 scrollReveal.js 不依賴 animate.css,但它的動畫也是用 CSS3 創建的,所以它不支持 IE10 以下的瀏覽器。
IE6、IE7 等老舊瀏覽器不支持 CSS3 動畫,所以沒有效果,并且因為不支持一些屬性或方法會報錯。為了達到更好的兼容,最好加一個瀏覽器及版本判斷。

演示及下載

演示地址1

演示地址2

原文地址

本地下載

安裝

可以通過npm或bower來安裝scrollreveal.js插件。


npm install scrollreveal
bower install scrollreveal

也可以直接引入文件


<script src="js/scrollReveal.js"></script>

使用方法

HTML結構:


<!-- HTML -->
<div class="foo"> Foo </div>
<div class="bar"> Bar </div> 

JavaScript:


window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');  

鏈式編程方法

ScrollReveal的構造函數和它主要的方法都支持鏈式編程。


window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');
 
// 上面的代碼和下面的代碼效果相同
window.sr = ScrollReveal().reveal('.foo, .bar');         

配置參數

可以通過傳入一個配置參數對象到ScrollReveal()中來修改默認的參數設置。也可以通過向reveal()中插入配置參數對象來自定義動畫集合。


// 修改默認配置
window.sr = ScrollReveal({ reset: true });
 
// 自定義一個動畫集合
sr.reveal( '.foo', { wait: 200 } );   

默認參數


// Animation
origin      : 'bottom',
distance    : '20px',
duration    : 500,
delay       : 0,
rotate      : { x: 0, y: 0, z: 0 },
opacity     : 0,
scale       : 0.9,
easing      : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )',
 
// Options
container   : null,
mobile      : true,
reset       : false,
useDelay    : 'always',
viewFactor  : 0.20,
viewOffset  : { top: 0, right: 0, bottom: 0, left: 0 },
afterReveal : function( domEl ) {},
afterReset  : function( domEl ) {}          

參數描述

參數類型可用值描述
originstring'top','right','bottom','left'動畫的方向
distancestring可用任何CSS單位值,如:'20px','10vw','5%'動畫的距離
durationnumber500動畫持續時間,單位毫秒
delaynumber0動畫的延遲時間,單位毫秒
rotateobject/number{ x: 0, y: 0, z: 0 }開始的角度,單位degrees
opacitynumber0開始的透明度
scalenumber0.9開始的縮放值
easingstring'ease'
'ease'
'ease-out'
'ease-in-out'
'ease-in-out'
動畫的easing效果,可以是任何有效的CSS easing值
containernodedocument.getElementById('foo')容器
mobilebooleantrue / false是否在移動手機上顯示動畫效果
resetbooleantrue / false元素是否在容器邊界內來回滾動時都產生動畫效果
useDelaystring'always','once','onload'控制元素什么時候使用動畫延遲
viewFactornumber0.200.20表示元素在產生動畫之前,它的20%在viewport或容器的邊界之內
viewOffsetobject/number{ top: 48, bottom: 24 }增加viewport或容器邊界,單位像素
afterRevealfunction function( domEl ) {}reveal動畫之后觸發的回調函數
afterResetfunction function( domEl ) {}reset動畫之后觸發的回調函數

高級應用

覆蓋配置

reveal()方法中的調用元素可以隨時進行修改。例如:


<div class="foo"> Foo </div>
<div class="foo" id="chocolate"> Chip </div>          

var fooReveal = {
  delay    : 200,
  distance : '90px',
  easing   : 'ease-in-out',
  rotate   : { z: 10 },
  scale    : 1.1
};
 
window.sr = ScrollReveal()
  .reveal( '.foo', fooReveal )
  .reveal( '#chocolate', { delay: 500, scale: 0.9 } );         

配置多個容器

默認的容器是viewport,你可以對它進行修改。


<div id="fooContainer">
  <div class="foo"> Foo 1 </div>
  <div class="foo"> Foo 2 </div>
  <div class="foo"> Foo 3 </div>
</div>
 
<div id="barContainer">
  <div class="bar"> Bar 1 </div>
  <div class="bar"> Bar 2 </div>
  <div class="bar"> Bar 3 </div>
</div>                

var fooContainer = document.getElementById('fooContainer');
var barContainer = document.getElementById('barContainer');
 
window.sr = ScrollReveal()
  .reveal( '.foo', { container: fooContainer } );
  .reveal( '.bar', { container: barContainer } );      

異步調用內容

可以通過sync()方法來異步加載已經存在的reveal sets中的內容。


!-- index.html -->
<div id="container">
  <div class="foo">foo</div>
  <div class="foo">foo</div>
  <div class="foo">foo</div>
</div>
 
<!-- ajax.html -->
<div class="foo">foo async</div>
<div class="foo">foo async</div>
<div class="foo">foo async</div>           

var fooContainer, content, sr, xmlhttp;
 
fooContainer = document.getElementById('fooContainer');
 
sr = ScrollReveal();
sr.reveal( '.foo', { container: fooContainer } );
 
// Setup a new asynchronous request...
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if ( xmlhttp.readyState == XMLHttpRequest.DONE ) {
    if ( xmlhttp.status == 200 ) {
 
      // Turn our response into HTML...
      var content = document.createElement('div');
      content.innerHTML = xmlhttp.responseText;
      content = content.childNodes;
 
      // Add each element to the DOM...
      for ( var i = 0; i < content.length; i++ ) {
        fooContainer.appendChild( content[ i ]);
      };
 
      // Finally!
      sr.sync();
    }
  }
}
 
xmlhttp.open('GET', 'ajax.html', true);
xmlhttp.send();         

小技巧

加載次序

你需要注意的重要的一點是盡可能在頁面的最后再調用ScrollReveal,也就是說:

  • 頁面中的DOM元素已經被加載完成。
  • 任何第三方的js庫已經被加載。
  • 頁面中的元素樣式已經被加載不會在被覆蓋。

示例代碼如下:


<!DOCTYPE html>
<html>
  <body>
 
    <!-- All the things... -->
 
    <script src="js/scrollreveal.min.js"></script>
    <script>
      window.sr = ScrollReveal();
    </script>
  </body>
</html>                

提升用戶體驗

在大多數情況下,你的元素都是從opacity: 0開始,以使它們可以制作淡入的效果。但是由于JavaScript在頁面開始渲染時才被加載,用戶可能會看到元素閃爍的情況發生。
解決這個問題的方法是在中設置reveal元素的可見性為隱藏狀態。例如下面的代碼:


<!DOCTYPE html>
<html>
  <head>
    <script>
      // If JavaScript is enabled, add '.js-enabled' to <html> element
      document.documentElement.classList.add('js-enabled');
    </script>
    <style>
      /* Ensure elements load hidden before ScrollReveal runs */
      .js-enabled .fooReveal { visibility: hidden; }
    </style>
  </head>
  <body>
 
      <!-- All the things... -->
 
    <script src="js/scrollreveal.min.js"></script>
    <script>
      window.sr = ScrollReveal();
      sr.reveal('.fooReveal');
    </script>
  </body>
</html>          

添加3D透視效果

ScrollReveal支持3D旋轉效果,你需要做的是為你的容器指定一個perspective屬性。


<!DOCTYPE html>
<html>
  <head>
    <script>
      document.documentElement.classList.add('js-enabled');
    </script>
    <style>
      .js-enabled .fooReveal { visibility: hidden; }
      .fooContainer { perspective: 800px; }
    </style>
  </head>
  <body>
 
    <div class="fooContainer">
      <div class="fooReveal"> Foo </div>
      <div class="fooReveal"> Foo </div>
      <div class="fooReveal"> Foo </div>
    </div>
 
    <script src="js/scrollreveal.min.js"></script>
    <script>
      window.sr = ScrollReveal();
    sr.reveal( '.fooReveal', { rotate: {x: 65} } );
  </script>
  </body>
</html>   

本文來源:https://www.cnblogs.com/lalalagq/p/9973564.html

濟南網站建設公司
川芎設計

給我留言

留言無頭像?

六合彩平特肖 002039股票 国内正规股票配资平台有哪些 股市行情300793 股票推荐排名的有多坑 理财软件 长沙麻将打法和算法 贝得来配资 高手总结的打麻将技 快3开奖结果上海 快3北京开奖结果