Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
02 Июн 2023
2 мин
131

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

«Создайте потрясающий сайт с параллакс-эффектом на фоне, используя этот понятный и подробный пошаговый гайд для новичков!»

Параллакс-эффект — это интересный и популярный прием в веб-дизайне, который создает иллюзию глубины и движения, когда фон и контент на сайте двигаются с разной скоростью при прокрутке страницы. В этой статье мы рассмотрим, как создать сайт с использованием параллакс-эффекта на фоне.

Шаг 1: Подготовка

Для начала, вам потребуется следующее:

  • HTML-файл (index.html)
  • CSS-файл (styles.css)
  • JavaScript-файл (script.js)
  • Изображения для фона

Шаг 2: Создание HTML-структуры

Ваш HTML-файл должен содержать следующую структуру:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
  <title>Parallax Site</title>
</head>
<body>
  <div class="parallax-section" data-speed="1" style="background-image: url('image1.jpg');">
    <h1>Заголовок 1</h1>
  </div>
  <div class="content">
    <p>Текст статьи...</p>
    
  </div>
  <div class="parallax-section" data-speed="2" style="background-image: url('image2.jpg');">
    <h1>Заголовок 2</h1>
  </div>
  <div class="content">
    <p>Текст статьи...</p>
  </div>
</body>
</html>

Здесь мы создали два блока с классом parallax-section, которые будут иметь параллакс-эффект. Обратите внимание на атрибут data-speed, который указывает скорость движения фона относительно контента.

Шаг 3: Написание CSS-стилей

Теперь напишем стили для нашего сайта в файле styles.css:

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

.parallax-section {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  padding: 2rem;
  text-align: center;
}

Здесь мы задаем основные стили для блоков с параллакс-эффектом и контентом.

Шаг 4: Добавление JavaScript для параллакс-эффекта

В файле script.js добавьте следующий код:

document.addEventListener('scroll', function () {
  const parallaxSections = document.querySelectorAll('.parallax-section');

  parallaxSections.forEach((section) =&gt; {
    const speed = section.getAttribute('data-speed');
    const yOffset = window.pageYOffset;
    const backgroundPosition = -(yOffset * speed);

    section.style.backgroundPositionY = `${backgroundPosition}px`;
  });
});

Этот код будет отслеживать прокрутку страницы и изменять положение фона блоков с параллакс-эффектом в зависимости от их data-speed.

Теперь ваш сайт готов, и вы можете наслаждаться красивым параллакс-эффектом на фоне! 😊

Не забудьте посетить нашу партнерскую школу по веб-разработке, если хотите узнать больше!

Добавить комментарий