当前位置:网站首页>視覺滾動[反差美]

視覺滾動[反差美]

2020-11-06 21:07:15 itread01

![](https://img2020.cnblogs.com/blog/1308525/202011/1308525-20201106171550872-1552437424.png) # 科普 視差滾動簡單的認識就是移動滾動條或者滾動滑鼠滑輪,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
``` ![](https://img2020.cnblogs.com/blog/1308525/202011/1308525-20201105162548213-790697576.png) 圖片有視覺差異 編寫一個很low的版本 ```js
``` 其實我編寫的目標的目的是為了讓你理解最簡陋的程式碼,達到效果的目的 ![](https://img2020.cnblogs.com/blog/1308525/202011/1308525-20201105162621139-304607781.gif) 放個css基礎問題,主要是我很少這樣寫 ```css transform: translate(-50%,-50%) rotate(22.5deg); 垂直居中 傾斜22.4度 ``` ## 案例一 上完整版程式碼,在大佬的基礎上簡寫了,目的是為了以後拿到就能用和修改,哈哈哈 所以每次學一個東西,所以花的時間有點長 ![](https://img2020.cnblogs.com/blog/1308525/202011/1308525-20201105163156193-473132075.gif) ## 案例二 ![](https://img2020.cnblogs.com/blog/1308525/202011/1308525-20201105163605746-946794281.gif) 然後我們可以把他的速度調快點,配合字型寫一個橫向滾動 ## 案例三 ![](https://img2020.cnblogs.com/blog/1308525/202011/1308525-20201105163827982-436521225.gif) ## 案例四 ![](https://img2020.cnblogs.com/blog/1308525/202011/1308525-20201105164628530-2100723946.gif) ## 案例五 ![](https://img2020.cnblogs.com/blog/1308525/202011/1308525-20201105165016465-1226539148.gif) # deme6 ![](https://img2020.cnblogs.com/blog/1308525/202011/1308525-20201106163644310-1921902154.gif) ## 案例七 ![](https://img2020.cnblogs.com/blog/1308525/202011/1308525-20201106165323190-877821587.gif) 放上demo的百度雲 ```js 連結: https://pan.baidu.com/s/1hCeY6BiRuosDGJR2rb-M1g 提取碼: 3m

版权声明
本文为[itread01]所创,转载请带上原文链接,感谢
https://www.itread01.com/content/1604667726.html