視覺滾動[反差美]

 # 科普 視差滾動簡單的認識就是移動滾動條或者滾動滑鼠滑輪,dom盒子移動的速度加減的差別造成頁面的不同的效果 就是一種反差感,對於沒有設計美感功底的程式設計師,只有寫出可移植的demo,形成自己的美感培養 `codepen` 好像需要**富強**,我在後天整理好,放上了百度雲的demo連結可以去下載 在這裡介紹大家一個東西,相當於零配置webpack,就是`parceljs` 放上網址`https://parceljs.org/getting_started.html` 使用起來也特別簡單 ```js npm install -g parcel-bundler yarn init -y parcel index.html ``` 我看YouTube大佬是這樣的用的,然後說說我為什麼用scss,因為我們想編寫的是可移植的demo,寫成scss或者less方便調整,目錄結構更加清晰 # 文件 https://github.com/locomotivemtl/locomotive-scroll | 屬性 | 描述 | | ---------------------------------------------------------- | ---------------------- | | data-scroll-container | 定義容器 | | data-scroll | 檢測是否在視野中 | | data-scroll-speed="number" | 元素視差速度,負數反轉 | | data-scroll-target="#xxx" | 目標元素在檢視中的位置 | | data-scroll-directio n="vertical 垂直 \| horizontal 水平" | 視差的方向 | | | | ```js import LocomotiveScroll from 'locomotive-scroll'; const scroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true,// 是否平滑的滾動 // multiplier:10 // 滾動的速度 }); ``` # 編寫視差滾動的效果 [案例網址](https://tympanus.net/Development/TileScroll/) 編寫雛形 ```html

```  圖片有視覺差異 編寫一個很low的版本 ```js

``` 其實我編寫的目標的目的是為了讓你理解最簡陋的程式碼,達到效果的目的  放個css基礎問題,主要是我很少這樣寫 ```css transform: translate(-50%,-50%) rotate(22.5deg); 垂直居中 傾斜22.4度 ``` ## 案例一 上完整版程式碼,在大佬的基礎上簡寫了,目的是為了以後拿到就能用和修改,哈哈哈 所以每次學一個東西,所以花的時間有點長  ## 案例二  然後我們可以把他的速度調快點,配合字型寫一個橫向滾動 ## 案例三  ## 案例四  ## 案例五  # deme6  ## 案例七  放上demo的百度雲 ```js 連結: https://pan.baidu.com/s/1hCeY6BiRuosDGJR2rb-M1g 提取碼: 3m