滾動視差讓你不相信「眼見爲實」

時間  2019-12-31
標籤 滾動 視差 讓你 不相信 眼見爲實 简体版
原文   原文鏈接

引言

視差滾動（Parallax Scrolling）是指讓多層背景以不一樣的速度移動，造成立體的運動效果。javascript

其實，這項技術早在 2013 年就已經開始在一些國外的網站中獲得了大量的應用。因爲它給網站帶來了很是出色的視覺體驗，如今已經有數不勝數的網站應用了這項技術。css

我是在最近的項目中用到了這塊，以爲有必要整理一下。本文主要是簡單的介紹一下什麼是視差滾動，實現方式以及如何在現有框架(vue/react)中使用視差滾動。html

什麼是視差滾動？

視差效果， 最初是一個天文術語。當咱們看着繁星點點的天空時，較遠的恆星運動較慢，而較近的恆星運動較快。當咱們坐在車裏看着窗外時，咱們會有相同的感受。遠處的山脈彷佛沒有動，附近的稻田很快過去了。許多遊戲使用視差效果來增長場景的三維度。說的簡單點就是，滾動屏幕時，網頁中元素的位置會發生變化。可是不一樣的元素位置變化的速度不一樣，致使網頁中產生分層元素的錯覺。前端

看完上面這段，相信你對視差滾動的概念已經有了一個初步的瞭解。下面讓咱們先來看一下如何用 css 來實現視差滾動。vue

css 實現

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

background-attachment: fixed

平時業務開發中可能不太會用到background-attachment，讓咱們先來認識一下它。react

background-attachment CSS 屬性決定背景圖像的位置是在視口內固定，仍是隨着包含它的區塊滾動。css3

它一共有三個屬性:git

  • fixed: 鍵字表示背景相對於視口固定。即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。
  • local: 此關鍵字表示背景相對於元素的內容固定。若是一個元素擁有滾動機制，背景將會隨着元素的內容滾動。
  • scroll: 此關鍵字表示背景相對於元素自己固定， 而不是隨着它的內容滾動。 咱們使用 background-attachment: fixed 來實現視差滾動，看一下示例:
// html
<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>
複製代碼
// css
$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, .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;
}
複製代碼

效果以下:github

固然，你能夠直接去這裏查看:https://codepen.io/jack-cool/pen/MWYogYQ

transform: translate3d

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

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

先來看一下示例:

// html
<div id="app">
   <div class="one">one</div>
   <div class="two">two</div>
   <div class="three">three</div>
 </div>
複製代碼
// css
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來實現視差滾動的原理:

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

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

三、滾動滾動條，因爲子元素設置了不一樣的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

最後

你能夠關注個人同名公衆號【前端森林】，這裏我會按期發一些大前端相關的前沿文章和平常開發過程當中的實戰總結。固然，我也是開源社區的積極貢獻者，github地址https://github.com/Jack-cool，歡迎star！！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程