Движущееся изображение при прокрутке

Так что, на самом деле, я очень плохо разбираюсь в анимации, но я стараюсь быть в этом хорош. Поскольку я изучаю анимационные эффекты из разных источников, я очень горжусь тем, что два моих анимационных сайта теперь используются в производстве. Уже 3,5 дня пытаюсь реализовать следующие анимации

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

Чтобы переместить изображение при прокрутке, но, потратив на него много времени, я все еще не могу получить желаемый результат. Я написал свою собственную анимацию через css3 и js, но так и не смог добиться желаемого результата. Пожалуйста, помогите мне и дайте мне знать, как я могу добиться движущегося изображения при прокрутке.

javascript css animation

17.03.2022 19:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я настоятельно рекомендую использовать библиотеку 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>

Кредиты и ресурсы: