視覺滾動[反差美]

房東家的貓發表於2020-11-06
視覺

科普

視差滾動簡單的認識就是移動滾動條或者滾動滑鼠滑輪,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 class="aaa">
  <div style="width: 100px;height: 100px; display: flex;background-color: #00230b;"></div>
  <div style="width: 100px;height: 100px; display: flex;background-color: #00230b;"></div>
  <div style="width: 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

相關文章