Visual rolling [contrast beauty]

 # The popular science Parallax scrolling is simply to move the scroll bar or scroll the mouse wheel ,dom The difference in the speed of box movement, plus or minus, results in different effects on the page It's a sense of contrast , For programmers who don't have the ability to design aesthetically , Only write portable demo, Form your own aesthetic cultivation `codepen` It seems that we need ** Rich and strong **, I'll sort it out the day after tomorrow , Put on Baidu cloud demo Links can be downloaded I'd like to introduce you to one thing , Equivalent to zero configuration webpack, Namely `parceljs` Put in the website `https://parceljs.org/getting_started.html` It's also very easy to use ```js npm install -g parcel-bundler yarn init -y parcel index.html ``` I think YouTube This is how you use it , Then tell me why I use scss, Because what we want to write is portable demo, Written as scss perhaps less Easy to adjust , The directory structure is clearer # file https://github.com/locomotivemtl/locomotive-scroll | Properties | describe | | ---------------------------------------------------------- | ---------------------- | | data-scroll-container | Defining containers | | data-scroll | Check whether it is in the field of vision | | data-scroll-speed="number" | Element parallax velocity , Negative inversion | | data-scroll-target="#xxx" | The location of the target element in the view | | data-scroll-directio n="vertical vertical \| horizontal level " | The direction of parallax | | | | ```js import LocomotiveScroll from 'locomotive-scroll'; const scroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true,// Whether it's smooth rolling // multiplier:10 // The speed of rolling }); ``` # Write parallax scrolling effects [ Case website ](https://tympanus.net/Development/TileScroll/) Write a prototype ```html

```  There is a visual difference in the picture Write a very low Version of ```js

``` In fact, my goal is to make you understand the most rudimentary code , To achieve the purpose of the effect  Put a css Basic issues , It's mainly because I seldom write like this ```css transform: translate(-50%,-50%) rotate(22.5deg); Vertical center Tilt 22.4 degree ``` ## Case a On the full version of the code , On the basis of the big guy, it's abbreviated , The purpose is to use and modify it later , Ha ha ha So learn one thing at a time , So it took a little bit longer  ## Case 2  Then we can speed him up , Write a horizontal scroll with the font ## Case three  ## Case four  ## Case 5  # deme6  ## Case seven  Put it on demo Baidu cloud ```js Link to : https://pan.baidu.com/s/1hCeY6BiRuosDGJR2rb-M1g Extraction code : 3m