記錄--滾動視差動畫和解決方法

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助最簡單的代碼，最極致的享受，主打的就是一個炫酷～滾動視差滾動視差效果（Parallax Scrolling）是指讓多層背景以不同的速度位移，形成立體的運動效果的視覺體驗，在前端強交互的時代，更應該多考慮這種用戶體驗較好的動效～實現方 ...

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

最簡單的代碼，最極致的享受，主打的就是一個炫酷～

滾動視差

滾動視差效果（Parallax Scrolling）是指讓多層背景以不同的速度位移，形成立體的運動效果的視覺體驗，在前端強交互的時代，更應該多考慮這種用戶體驗較好的動效～

實現方案

JS監聽瀏覽器 scroll 事件，不斷改變元素位置
background-attachment屬性，將圖片位置相對於視口固定
translateZ()修改元素的縮小比例，使得滾動速度出現差異

JS實現

// html
<div class="parallax">
  <img src="./images/bc1.png" id="bc1" />
  <img src="./images/bc2.png" id="bc2" />
  <img src="./images/bc3.png" id="bc3" />
  <img src="./images/bc4.png" id="bc4" />
  <img src="./images/bc5.png" id="bc5" />
  <img src="./images/tree.png" id="tree" />
  <h2 id="text">Rolling Parallax</h2>
  <img src="./images/leaf.png" id="leaf" />
  <img src="./images/plant.png" id="plant" />
</div>

<div class="contentBox">
  <h2>Parallax Scrolling</h2>
  <text class="content">
    content...
  </text>
</div>

//css
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Luckiest Guy", cursive;
}
body {
  background: #f9f9f9;
  min-height: 100vh;
  overflow-x: hidden;
}
.parallax {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.parallax img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
#text {
  position: absolute;
  font-size: 5em;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  letter-spacing: 10px;
}
.contentBox {
  position: relative;
  background: #003329;
  padding: 100px;
}
.contentBox h2 {
  font-size: 36px;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.contentBox .content {
  font-size: 20px;
  color: #fff;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 2px;
}
//js
let text = document.getElementById("text");
let leaf = document.getElementById("leaf");
let bc1 = document.getElementById("bc1");
let bc4 = document.getElementById("bc4");
let bc5 = document.getElementById("bc5");

window.addEventListener("scroll", () => {
  const value = window.scrollY;
  text.style.marginTop = value * 1.5 + "px";
  leaf.style.top = value * -1.5 + "px";
  leaf.style.left = value * 1.5 + "px";
  bc1.style.top = value * 0.5 + "px";
  bc4.style.left = value * -1.5 + "px";
  bc5.style.left = value * 1.5 + "px";
});

預覽效果如下

CSS-background-attachment

前置知識

首先 background-attachment 要和 background-image 一起使用才有意義，表示的是背景圖像是否固定或者隨著頁面的其餘部分滾動。
background-attachment 有四個可選值：fixed，scroll，local，inherit。
scroll 是該屬性的預設值，表示背景圖相對於元素固定，簡單理解就是兩者綁定住了，所以元素滾動了圖片也會跟著滾動。
local 表示背景圖相對於元素內容固定，而相對於其他滾動條則會滾動。舉例來說，假如元素內部設置了overflow：scroll，則元素內部會出現滾動條，此時滾動元素內部滾動條的時候，背景圖會隨著滾動而滾動。而如果我們設置 background-attachment：scroll ，則背景圖會隨著元素內部滾動而固定住。
fixed 表示背景圖相對於視口固定，無論怎麼滾動，元素都巋然不動，如果多個元素都設置了fixed，他們也只會在自己的元素內顯示，互不影響。
inherit 只是指定 background-attachment 的設置從父元素繼承。

scroll與local的區別

scroll效果如下 2023-02-15 17.43.56.gif local效果如下 2023-02-15 17.48.44.gif

//html
<div class="image_1">
  <div class="word">Bye bye, Lucia</div>
</div>
<div class="bg">The best hard are always the bravest</div>
<div class="image_2">
  <div class="word">All children, except one, grow up</div>
</div>
<div class="bg">It's better to burn out than to fade away</div>
<div class="image_3">
  <div class="word">Fading is true while flowering is past</div>
</div>
<div class="bg">There was no possibility of taking a walk</div>
<div class="image_4">
  <div class="word">All this happened, more or less</div>
</div>

//css
* {
  padding: 0;
  margin: 0;
}
.image_1 {
  background-image: url(./images/1.webp);
  background-position: 0 0;
  background-attachment: fixed;
  background-size: cover;
  height: 680px;
  width: 100%;
}
.image_2 {
  background-image: url(./images/2.jpg);
  background-position: 0 0;
  background-attachment: fixed;
  background-size: cover;
  height: 680px;
  width: 100%;
}
.image_3 {
  background-image: url(./images/3.jpg);
  background-position: 0 0;
  background-attachment: fixed;
  background-size: cover;
  height: 680px;
  width: 100%;
}
.image_4 {
  background-image: url(./images/4.jpeg);
  background-position: 0 0;
  background-attachment: fixed;
  background-size: cover;
  height: 680px;
  width: 100%;
}
.word {
  position: relative;
  top: 480px;
  font-size: 55px;
  color: white;
  text-align: center;
  font-weight: bolder;
}
.bg {
  text-align: center;
  font-size: 46px;
  font-weight: bolder;
  height: 220px;
  line-height: 220px;
  background-color: rgb(131, 134, 204);
  color: white;
}

預覽效果如下

CSS-translateZ

前置知識

transform-style: preserve-3d表示讓子元素保留3D轉換。

好吧，直接上代碼～

//html
<div class="wrapper">
  <div class="demo"></div>
</div>

//css
body {
  perspective: 800px;
  perspective-origin: 250px 300px;
}
.wrapper {
  position: relative;
  left: 200px;
  top: 100px;
  height: 480px;
  width: 60%;
  background-color: #0ff;
  transform: rotateY(45deg);
  /* transform-style: preserve-3d; */
}
.demo {
  height: 100%;
  background-image: url(./images/3.jpg);
  background-size: cover;
  transform: translateZ(100px);
}

不加preserve-3d效果

加上preserve-3d效果

看出差異了吧，有層次了，立體感高高的～
需要註意的是 transform-style: preserve-3d 這個屬性加在誰身上，誰的子元素才會有3D效果，比如上面的代碼中把屬性加在 body 上是沒有效果的。

perspective 定義3D元素距視圖的距離。

簡單來理解，如果我設置了 perspective：500px，則表示我在離屏幕500px遠的地方觀看這個元素。註意一下官方講解的 當為元素定義 perspective 屬性時，其子元素會獲得透視效果，所以我們需要將這個屬性設置在父元素上。

加上perspective效果

不加perspective效果

視距 = 距離產生美～

translateZ: 向Z軸平移。

我們現在和屏幕的距離就是Z軸，所以Z軸是朝向我們的，如果translateZ裡面的值越大，說明屏幕離我們越近，translateZ裡面的值越小，屏幕離我們就越遠。

perspective和translateZ的化學反應

這兩者有什麼區別呢，簡單的說就是translateZ是移動圖片，perspective是移動人和屏幕的距離。但是當這兩者結合起來的時候神奇的事情就會發生～

//html
<div class="wrapper">
  <div class="demo"></div>
</div>

//css
.wrapper {
  position: relative;
  left: 200px;
  top: 100px;
  height: 480px;
  width: 60%;
  perspective: 800px;
}
.demo {
  height: 100%;
  background-image: url(./images/3.jpg);
  background-size: cover;
  transform: translateZ(-100px);
}

perspective: 800px的情況

perspective: 100px的情況

我們把視距調小，圖片竟然變小了，按照道理視距越小說明屏幕離我越近，圖片應該變大才對。其實，這裡我們看到的圖片，並不是圖片本體，而是圖片在屏幕上的投影。

同理，我們去理解translateZ的值變大，圖片變大也比較容易了。

translateZ(-100px)的情況

translateZ(-20px)的情況

那麼只要我們將不同的元素的translateZ設置成不同的負值，那麼越大值的元素，它的投影就會越大，滾動速度就會越快，當然這些元素的滾動速度也只有translateZ（0）的幾分之一～

//html
<div class="g-container">
  <div class="section-one">translateZ(-1)</div>
  <div class="section-two">translateZ(-2)</div>
  <div class="section-three">translateZ(-3)</div>
</div>

//css
html {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  perspective: 2px;
}
.g-container {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
  height: 150%;
}
.g-container div {
  font-size: 5vw;
  position: absolute;
  top: 20%;
}
.section-one {
  left: 0%;
  background: rgba(10, 10, 10, 0.2);
  transform: translateZ(-1px);
}
.section-two {
  left: 40%;
  background: rgba(30, 130, 30, 0.2);
  transform: translateZ(-2px);
}
.section-three {
  left: 90%;
  background: rgba(200, 100, 130, 0.2);
  transform: translateZ(-3px);
}

記錄--滾動視差動畫和解決方法

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

滾動視差

實現方案

JS實現

預覽效果如下

CSS-background-attachment

前置知識

scroll與local的區別

預覽效果如下

CSS-translateZ

前置知識

transform-style: preserve-3d表示讓子元素保留3D轉換。

perspective 定義3D元素距視圖的距離。

translateZ: 向Z軸平移。

perspective和translateZ的化學反應

預覽效果如下

本文轉載於:

https://juejin.cn/post/7200653122637103164

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。