视差滚动简单的认识就是移动滚动条或者滚动鼠标滑轮,dom盒子移动的速度加减的差别造成页面的不同的效果
就是一种反差感,对于没有设计美感功底的程序员,只有写出可移植的demo,形成自己的美感培养
codepen 好像需要富强,我在后天整理好,放上了百度云的demo链接可以去下载
在这里介绍大家一个东西,相当于零配置webpack,就是parceljs
放上网址https://parceljs.org/getting_started.html
使用起来也特别简单
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 水平" 视差的方向
import LocomotiveScroll from 'locomotive-scroll'; const scroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true,// 是否平滑的滚动 // multiplier:10 // 滚动的速度 }); 编写视差滚动的效果
案例网址
编写雏形
<style> .aaa{ width: 400px; height: 400px; background-color: khaki; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%) rotate(22.5deg); } </style> <div> <div></div> <div></div> <div></div> </div>图片有视觉差异
编写一个很low的版本
<main data-scroll-container><!-- 定义滚动的容器--> <section> <div> <div data-scroll data-scroll-speed="-1" data-scroll-target="#box1" data-scroll-direction="horizontal"> <div></div> <div></div> <div></div> <div></div> </div> <div data-scroll data-scroll-speed="1" data-scroll-target="#box1" data-scroll-direction="horizontal"> <div></div> <div></div> <div></div> <div></div> </div> <div data-scroll data-scroll-speed="-1" data-scroll-target="#box1" data-scroll-direction="horizontal"> <div></div> <div></div> <div></div> <div></div> </div> <div data-scroll data-scroll-speed="1" data-scroll-target="#box1" data-scroll-direction="horizontal"> <div></div> <div></div> <div></div> <div></div> </div> </div> </section> </main>其实我编写的目标的目的是为了让你理解最简陋的代码,达到效果的目的
放个css基础问题,主要是我很少这样写
transform: translate(-50%,-50%) rotate(22.5deg); 垂直居中 倾斜22.4度 案例一上完整版代码,在大佬的基础上简写了,目的是为了以后拿到就能用和修改,哈哈哈
所以每次学一个东西,所以花的时间有点长
然后我们可以把他的速度调快点,配合字体写一个横向滚动
案例三