视觉滚动[反差美]

科普

视差滚动简单的认识就是移动滚动条或者滚动鼠标滑轮,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{
       400px;
      height: 400px;
      background-color: khaki;
      position: absolute;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%) rotate(22.5deg);
    }
  </style>
<div class="aaa">
  <div style=" 100px;height: 100px; display: flex;background-color: #00230b;"></div>
  <div style=" 100px;height: 100px; display: flex;background-color: #00230b;"></div>
  <div style=" 100px;height: 100px; display: flex;background-color: #00230b;"></div>
</div>

图片有视觉差异

编写一个很low的版本

<main data-scroll-container><!-- 定义滚动的容器-->
  <section style="height:calc(52vw* 1.2);position: relative;overflow: hidden;" id="box1">
    <div class="box1_position">
      <div style="display: flex"  data-scroll data-scroll-speed="-1" data-scroll-target="#box1"
           data-scroll-direction="horizontal">
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
      </div>
      <div style="display: flex"  data-scroll data-scroll-speed="1" data-scroll-target="#box1"
           data-scroll-direction="horizontal">
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
      </div>
      <div style="display: flex"  data-scroll data-scroll-speed="-1" data-scroll-target="#box1"
           data-scroll-direction="horizontal">
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
      </div>
      <div style="display: flex"  data-scroll data-scroll-speed="1" data-scroll-target="#box1"
           data-scroll-direction="horizontal">
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
        <div class="line-imgS"></div>
      </div>
    </div>
  </section>
</main>    

其实我编写的目标的目的是为了让你理解最简陋的代码,达到效果的目的

放个css基础问题,主要是我很少这样写

  transform: translate(-50%,-50%) rotate(22.5deg);
垂直居中 倾斜22.4度

案例一

上完整版代码,在大佬的基础上简写了,目的是为了以后拿到就能用和修改,哈哈哈

所以每次学一个东西,所以花的时间有点长

案例二

然后我们可以把他的速度调快点,配合字体写一个横向滚动

案例三

案例四

案例五

deme6

案例七

放上demo的百度云

链接: https://pan.baidu.com/s/1hCeY6BiRuosDGJR2rb-M1g 
提取码: 3m8a