滾動上的移動影像-有解無憂

所以，實際上，我在影片方面非常糟糕，但我正在努力做到這一點。當我從各種來源學習影片效果時，我真的很自豪我的兩個影片網站現在正在生產中使用。3.5 天我正在嘗試實作以下影片

https://www.loom.com/share/6758e946dad7474db2bc5b99b4cd56f3

要在滾動上移動影像，但在花了很多時間之后我仍然無法獲得所需的輸出。我通過 css3 和 js 撰寫了我的自定義影片，但仍然無法達到預期的效果。請幫助我，讓我知道如何在滾動上實作移動影像。

uj5u.com熱心網友回復：

我強烈建議使用該Rellax JS庫。

https://codepen.io/gcwebdev/pen/BaJjweE

var rellax = new Rellax('.rellax');

body {
  padding: 4rem;
  background-color: #282828;
  height: 500vh;
}

.parent {
  margin-top: 15em;
  color: white;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent>div {
  position: absolute;
  top: 0;
}

.child1 {
  width: 40vw;
  height: 80vh;
  background-color: white;
  border-radius: 3em;
}

.child2>div {
  background-color: #999;
  border-radius: 1em;
  position: absolute;
}

.child2-one {
  width: 200px;
  height: 100px;
  top: 70px;
  left: 100px;
}

.child2-two {
  width: 200px;
  height: 250px;
  top: 250px;
  left: 175px;
}

.child2-three {
  width: 100px;
  height: 75px;
  top: 500px;
  left: -250px;
}

<link href="https://cssanimation.rocks/levelup/public/03/04-end/stylesheets/main.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.0.0/rellax.min.js"></script>

<div class="parent">
  <div class="child1"></div>
  <div class="child2">
    <div class="child2-one rellax" id="one" data-rellax-speed="4">one</div>
    <div class="child2-two rellax" id="two" data-rellax-speed="-1">two</div>
    <div class="child2-three rellax" id="three" data-rellax-speed="3">three</div>
  </div>
  <div class="child3">Child 3</div>
</div>

學分和資源：

（狄克遜和萌）https://dixonandmoe.com/relax/
（多諾萬哈欽森）https://cssanimation.rocks/parallax/
（多諾萬哈欽森）https://codepen.io/donovanh/pen/zwdBzP

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

標籤：javascript css 动画

上一篇：如何在指定時間更改屬性？C＃

下一篇：在本地檔案夾中存盤資料是有限的