BMoroz45 22.07.2023 18:27

Как создать эффект параллакса на сайте с использованием CSS?

Добрый день! Мне нужна помощь с созданием эффекта параллакса на моем сайте с использованием CSS. Я хотела бы, чтобы фоновое изображение двигалось с разной скоростью при прокрутке страницы, создавая эффект глубины и объема.


.parallax {
  background-image: url("bg.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

.parallax-content {
  transform: translate3d(0, -50%, 0);
  position: relative;
  top: 50%;
  text-align: center;
  color: white;
}

У меня уже есть основной CSS-код для блока, который должен иметь эффект параллакса. Я установила фоновое изображение и задала необходимые стили. Однако, при прокрутке страницы фоновое изображение не двигается и эффект параллакса не работает.

Пожалуйста, помогите мне исправить код и создать эффект параллакса на моем сайте. Заранее благодарю за вашу помощь!

Ответы:

Evgeny27Zimin 22.07.2023 18:48
Чтобы создать эффект параллакса на вашем сайте с использованием CSS, вам понадобится внести некоторые изменения в код. Прежде всего, убедитесь, что у вас есть подключенный файл со стилями CSS, в котором вы определили классы ".parallax" и ".parallax-content". Теперь приступим к настройке эффекта параллакса. Для этого вам понадобится использовать "transform: translate3d()" в сочетании с функцией "calc()". Вот измененный код для создания эффекта параллакса: 




  Параллакс
  
    .parallax {
      background-image: url("bg.jpg");
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100vh;
      overflow: hidden; /* Добавляем overflow: hidden для предотвращения появления прокрутки */
    }

    .parallax .parallax-content {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, calc(-50% + var(--scroll-amount)), 0); /* Используем translate3d в сочетании с calc для создания эффекта параллакса */
      text-align: center;
      color: white;
    }
  
  
    // Обработка события прокрутки страницы
    window.addEventListener('scroll', function() {
      // Вычисляем смещение при прокрутке страницы
      var scrollAmount = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
      // Применяем смещение к элементу с классом "parallax-content"
      document.querySelector('.parallax-content').style.setProperty('--scroll-amount', scrollAmount + 'px');
    });
  


  

    

      
Пример эффекта параллакса

      
Здесь может быть ваш контент
В этом обновленном коде происходят следующие изменения: 1. Мы добавляем `overflow: hidden;` для элемента с классом "parallax" для предотвращения появления дополнительной прокрутки. 2. В классе "parallax .parallax-content" мы используем `transform: translate3d(-50%, calc(-50% + var(--scroll-amount)), 0);` для создания эффекта параллакса. Здесь `--scroll-amount` - это CSS переменная, которая будет содержать значение смещения при прокрутке страницы. 3. Мы добавляем JavaScript код, который будет обрабатывать событие прокрутки страницы и применять значение смещения к CSS переменной `--scroll-amount`. Теперь вы можете использовать этот код на своем сайте, заменив "bg.jpg" на ваше фоновое изображение. При прокрутке страницы вы должны увидеть эффект параллакса, где фоновое изображение будет двигаться с разной скоростью. Надеюсь, это поможет вам создать эффект параллакса на вашем сайте. Если у вас возникнут дополнительные вопросы, пожалуйста, не стесняйтесь их задавать. Удачи!

Добавить ответ