iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
0
Modern Web

30天學習30套前端技術(2018年)系列 第 20

[十分鐘學習] Parallax - 某站做出視覺效果竟然是靠它

example1

對任何裝置、相容性高的視差引擎

GitHub Star: 12,400
Javascripting Overall: 85%
瀏覽器: ChromeFirefoxIE9+
RWD: 不支援
License: MIT


《安裝》

  • CDN

      <!-- Parallax v3.1.0 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
    
  • npm

      $ npm i -s parallax-js
    

《範例》

  • 景深效果

      <div id="【物件】">
      	<div data-depth="【深度】">...</div>
      </div>
      <script>
      	parallaxInstance = new Parallax( document.getElementById( "【物件】" ) , { 
      		// 參數設定[註1]
      	});
      </script>
    

    [註1]

    參數 描述
    relativeInput 當游標在指定場景InputElemt內移動時,則啟動景深效果
    clipRelativeInput 當游標塊快觸碰到場景的邊界時,則景深效果會逐漸停止
    hoverOnly 當游標在場景內移動時,則啟動景深效果
    inputElement 指定場景
    calibrateX 紀錄x轴游標的初始值來做運算
    calibrateY 紀錄y轴游標的初始值來做運算
    invertX 景深效果與x轴游標的行徑方向相反
    invertY 景深效果與y轴游標的行徑方向相反
    limitX 限制x轴的移動距離
    limitY 限制y轴的移動距離
    scalarX x軸運動靈敏度將和此相乘,數字越大幅度越大
    scalarY y軸運動靈敏度將和此相乘,數字越大幅度越大
    frictionX x軸圖層間的摩擦力,數字越大幅度越大
    frictionY y軸圖層間的摩擦力,數字越大幅度越大
    originX x軸游標起始點,0.5是中間,0是左邊
    originY y軸游標起始點,0.5是中間,0是上面
    precision 1代表元件座標位置會被四捨五入,此設定無須更動
    selector 指定物件,null為.layout
    onReady 景深效果開始後執行此函式

《延伸》

  1. parallax.js
  2. wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device

上一篇
[十分鐘學習] Fine Uploader - 拖曳上傳
下一篇
[十分鐘學習] Hover.css - 強化系游標移入動畫效果
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言