滾動視差讓你不相信“眼見為實”-有解無憂

引言

視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，其實，這項技術早在 2013 年就已經開始在一些國外的網站中得到了大量的應用，由于它給網站帶來了非常出色的視覺體驗，現在已經有數不勝數的網站應用了這項技術，我是在最近的專案中用到了這塊，覺得有必要整理一下，本文主要是簡單的介紹一下什么是視差滾動，實作方式以及如何在現有框架(vue/react)中使用視差滾動，

什么是視差滾動？

視差效果，最初是一個天文術語，當我們看著繁星點點的天空時，較遠的恒星運動較慢，而較近的恒星運動較快，當我們坐在車里看著窗外時，我們會有相同的感覺，遠處的山脈似乎沒有動，附近的稻田很快過去了，許多游戲使用視差效果來增加場景的三維度，說的簡單點就是，滾動螢屏時，網頁中元素的位置會發生變化，但是不同的元素位置變化的速度不同，導致網頁中產生分層元素的錯覺，看完上面這段，相信你對視差滾動的概念已經有了一個初步的了解，下面讓我們先來看一下如何用 css 來實作視差滾動，

css 實作

css 中主要有兩種實作方式:分別是通過background-attachment: fixed和transform: translate3d來實作，下面讓我們看一下具體的實作方式:

background-attachment: fixed

平時業務開發中可能不太會用到background-attachment，讓我們先來認識一下它，background-attachment CSS 屬性決定背景影像的位置是在視口內固定，還是隨著包含它的區塊滾動，它一共有三個屬性:

fixed: 鍵字表示背景相對于視口固定，即使一個元素擁有滾動機制，背景也不會隨著元素的內容滾動，
local: 此關鍵字表示背景相對于元素的內容固定，如果一個元素擁有滾動機制，背景將會隨著元素的內容滾動，
scroll: 此關鍵字表示背景相對于元素本身固定，而不是隨著它的內容滾動，我們使用 background-attachment: fixed 來實作視差滾動，看一下示例:

<div class="a-text">1</div>
<div class="a-img1">2</div>
<div class="a-text">3</div>
<div class="a-img2">4</div>
<div class="a-text">5</div>
<div class="a-img3">6</div>
<div class="a-text">7</div>

$img1: "https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg";
$img2: "https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg";
$img3: "https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg";
div {
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  line-height: 100vh;
  text-align: center;
  font-size: 20vh;
}
.a-img1 {
  background-image: url($img1);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}
.a-img2 {
  background-image: url($img2);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}
.a-img3 {
  background-image: url($img3);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

效果如下:

當然，你可以直接去這里查看:https://codepen.io/jack-cool/pen/MWYogYQ

transform: translate3d

同樣，讓我們先來看一下兩個概念transform和perspective

transform: css3 屬性，可以對元素進行變換(2d/3d)，包括平移 translate,旋轉 rotate,縮放 scale,等等
perspective: css3 屬性，當元素涉及 3d 變換時，perspective 可以定義我們眼睛看到的 3d 立體效果，即空間感，

先來看一下示例:

<div id="app">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>

html {
  overflow: hidden;
  height: 100%;
}
body {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
#app {
  width: 100vw;
  height: 200vh;
  background: skyblue;
  padding-top: 100px;
}
.one {
  width: 500px;
  height: 200px;
  background: #409eff;
  transform: translateZ(0px);
  margin-bottom: 50px;
}
.two {
  width: 500px;
  height: 200px;
  background: #67c23a;
  transform: translateZ(-1px);
  margin-bottom: 150px;
}
.three {
  width: 500px;
  height: 200px;
  background: #e6a23c;
  transform: translateZ(-2px);
  margin-bottom: 150px;
}

效果如下:

當然，你可以直接去這里查看:https://codepen.io/jack-cool/pen/zYxzOpb

這里解釋下使用transform: translate3d來實作視差滾動的原理:

1、給容器設定上transform-style: preserve-3d和perspective: xpx，那么處于這個容器下的子元素就會處于 3D 空間中;

2、給子元素分別設定不同的transform: translateZ()，這時不同子元素在 3D Z 軸方向距離螢屏的距離也就不一樣;

3、滾動滾動條，由于子元素設定了不同的transform: translateZ()，那么他們滾動的上下距離translateY相對螢屏（我們的眼睛），也是不一樣的，這就達到了滾動視差的效果，

總結下來就是: 父容器設定transform-style: preserve-3d和perspective: xpx，子元素設定不同的transform: translateZ()看完了用 css 實作滾動視差的兩種方式，下面讓我們看下如何在現有框架(vue/react)中來應用滾動視差，

vue 或 react 中使用

react 中使用

在 react 中使用可以采用react-parallax，代碼示例:

import React from "react";
import { render } from "react-dom";
import { Parallax } from "react-parallax";
import Introduction from "./Introduction";
const styles = { fontFamily: "sans-serif", textAlign: "center" };
const insideStyles = {
  background: "white",
  padding: 20,
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%,-50%)",
};
const image1 =
  "https://images.pexels.com/photos/830891/pexels-photo-830891.jpeg";
const image2 =
  "https://images.pexels.com/photos/1236701/pexels-photo-1236701.jpeg";
const image3 =
  "https://images.pexels.com/photos/3210189/pexels-photo-3210189.jpeg";
const image4 =
  "https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg";
const App = () => (
  <div style={styles}>
    {" "}
    <Introduction name="React Parallax" /> <Parallax
      bgImage={image1}
      strength={500}
    >
      {" "}
      <div style={{ height: 500 }}>
        {" "}
        <div style={insideStyles}>HTML inside the parallax</div>{" "}
      </div>{" "}
    </Parallax> <h1>| | |</h1> <Parallax
      bgImage={image3}
      blur={{ min: -1, max: 3 }}
    >
      {" "}
      <div style={{ height: 500 }}>
        {" "}
        <div style={insideStyles}>Dynamic Blur</div>{" "}
      </div>{" "}
    </Parallax> <h1>| | |</h1> <Parallax bgImage={image2} strength={-100}>
      {" "}
      <div style={{ height: 500 }}>
        {" "}
        <div style={insideStyles}>Reverse direction</div>{" "}
      </div>{" "}
    </Parallax> <h1>| | |</h1> <Parallax
      bgImage={image4}
      strength={200}
      renderLayer={(percentage) => (
        <div>
          {" "}
          <div
            style={{
              position: "absolute",
              background: `rgba(255, 125, 0, ${percentage * 1})`,
              left: "50%",
              top: "50%",
              borderRadius: "50%",
              transform: "translate(-50%,-50%)",
              width: percentage * 500,
              height: percentage * 500,
            }}
          />{" "}
        </div>
      )}
    >
      {" "}
      <div style={{ height: 500 }}>
        {" "}
        <div style={insideStyles}>renderProp</div>{" "}
      </div>{" "}
    </Parallax> <div style={{ height: 500 }} /> <h2>{"\u2728"}</h2>{" "}
  </div>
);
render(<App />, document.getElementById("root"));

效果如下:

當然，更多細節可以查看:https://codesandbox.io/s/react-parallax-zw5go

vue 中使用

在 vue 中使用可以采用vue-parallaxy，代碼示例:

<template>
  <div id="app">
    <div style="background-color: #fff; height: 100vh;">
      <h1 style="margin-top: 0; padding-top: 20px;">Scroll down ?</h1>
    </div>
    <div style="position: relative; z-index: 9999; background-color: #fff;">
      <h1 style="margin:0;">Parallax Effect</h1>
      <parallax>
        <img
          src="https://images.pexels.com/photos/830891/pexels-photo-830891.jpeg"
        />
      </parallax>
    </div>
    <div style="background-color: #fff; height: 100vh;"></div>
    <h1>Parallax fixed position</h1>
    <div style="position: relative;">
      <parallax :fixed="true">
        <img
          src="https://images.pexels.com/photos/3210189/pexels-photo-3210189.jpeg"
        />
      </parallax>
    </div>
    <div style="background-color: #fff; height: 100vh;"></div></div
></template>
<script>
  import Parallax from "vue-parallaxy";
  export default { name: "App", components: { Parallax } };
</script>
<style>
  body {
    margin: 0;
  }
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    position: relative;
  }
</style>

效果如下:

當然，更多細節可以查看: https://codesandbox.io/s/vue-parallaxjs-ljh9g

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/294993.html

標籤：其他

上一篇：被演算法“監控”的打工人，這家公司 150 人被演算法裁定為“不敬業”

下一篇：【建議收藏】ヾ(^▽^*)))全網最全輸入輸出格式符整理