JavaScript >> Javascript 文檔 >  >> JavaScript

使用 simpleParallax 創建視差滾動的最簡單方法

SimpleParallax 是一個非常簡單小巧的 JavaScript 庫,可以在任何圖像上添加視差動畫。

視差效果直接添加到圖像標籤上,不需要像大多數其他視差庫那樣使用背景圖像。基本上,您可以在製作網站上添加視差效果而不會破壞其佈局。

您還可以選擇在圖片標籤/srcset 圖像上應用視差。實現非常簡單,動畫流暢自然。

安裝

安裝非常簡單。您可以選擇將腳本直接包含到您的 HTML 中:

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

或者選擇通過 npm/yarn 安裝:

#npm
npm install simple-parallax-js

#yarn
yarn add simple-parallax-js

通過包管理器安裝後,可以按如下方式導入:

import simpleParallax from 'simple-parallax-js';

初始化

要添加視差效果,您可以定位任何您想要的圖像。例如:

<img class="thumbnail" src="image.jpg" alt="image">

只需添加以下 JavaScript 代碼:

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);

您還可以選擇在多張圖像上應用視差,例如:

var images = document.querySelectorAll(img);
new simpleParallax(images);

主要案例

默認情況下,如果不指定任何參數,simpleParallax 將使用 up 方向。它會導致圖像向下滾動時從下向上平移,向上滾動時從上向下平移。

您可以在這些方向中進行選擇 - 向上 - - 向下 - - 左上 - 右上 - 左下 - 右下 .

如果您希望在不同的圖像上應用不同的設置,請不要猶豫初始化幾個 simpleParallax 實例。該庫將自動在當前實例的同一進程循環中添加新實例。因此,不會消耗額外的性能。

 <img class="left" src="image.jpg" alt="image">
 <img class="right" src="image.jpg" alt="image">
var imageLeft = document.querySelector('.left'),
    imageRight = document.querySelector('.right');

new simpleParallax(imageLeft, { 
    orientation: 'left' 
});
new simpleParallax(imageRight, { 
    orientation: 'right' 
});

更多設置

視差效果是通過應用於圖像的縮放效果創建的。這種縮放效果很容易改變(默認值為1.3 )。設置的比例越高,視差效果越快,越明顯。

new simpleParallax(image, { 
    scale: 2 
});

溢出 是另一個有趣的設置。 溢出 設置為 false 默認。如果設置為 true ,圖像將從其自然流動中翻譯出來。

new simpleParallax(image, { 
    overflow: true 
});

有用的鏈接

  • Github
  • 帶有示例的演示網站
  • Medium 案例研究

Tutorial JavaScript 教程
  1. 什麼是 Web 組件

  2. 如何使用 Vue JS 和 Quasar 框架製作二維碼生成器

  3. 構建 Frontend 項目時,何時使用 useEffect、useState 和 useContext?

  4. Python編程和腳本

  5. 了解 SharedArrayBuffer 和跨域隔離

  6. 如何開始用 jest 和酵素為 React 編寫單元測試

  7. JS中==和===的區別

  1. 使用 Redis Cache 使您的 SSR 站點速度提高 42 倍

  2. 我在隔離期間創建了 31 個反應組件

  3. 如何驗證 PDF 表單?

  4. 在網站和應用程序上嵌入視頻通話

  5. Vue.js 教程:零到六十

  6. JavaScript 是否通過引用傳遞?

  7. 如何在 JavaScript 中將元素插入 DOM

  1. 最具爭議的 HTML5 擴展

  2. 已創建 JSON 工具

  3. 擴展:Google Chrome 軟肋(第 1 部分)🔓

  4. Node Hero – Node.js 數據庫教程