В этом уроке мы рассмотрим красивый эффект прокрутки параллакса самым простым способом, со стационарным фоном и прокручиваемым контентом.

Скачать исходные файлы Посмотреть демонстрацию

Краткое введение

Параллакс — это эффект, при котором положение объекта кажется разным, если смотреть с разных позиций. Параллаксное движение, или, в нашем случае, параллаксная прокрутка, дает нам иллюзию того, что два объекта, находящиеся на одной прямой видимости, но на расстоянии друг от друга, кажутся движущимися с разной скоростью. Если вы когда-нибудь смотрели в окно автомобиля, двигаясь по шоссе со скоростью 100 км в час, вы заметите, что столбы линий электропередач проносятся с большой скоростью, а горы на заднем плане кажутся очень медленными. , почти на месте. Это параллаксное движение в действии.

Что касается Интернета, мы можем вызвать эффект параллакса для контейнеров с фоновыми изображениями и текстом над ними. В своей простейшей форме прокрутка параллакса заставит содержимое прокручиваться как обычно, а фон останется неподвижным. Прелесть этой техники в ее простейшей форме в том, что для нее требуется только CSS. Давайте копать.

Разметка и структура

Если бы у вас был исправлен сайт, который не отвечал, то не было бы никакой хитрости, чтобы добиться этого. Однако мы живем в эпоху адаптивного веб-дизайна, так что не стоит. Не бойся! В нашем распоряжении есть хороший CSS. Но сначала посмотрим на разметку. Разметка проста — у нас будут чередующиеся sections фона/заголовка и sections для максимального эффекта. Вот как это выглядит:

  

    
Безмятежный
  



  

    
Лорем Ипсум Долор
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Рост
  



  

    
Лорем Ипсум Долор
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Спокойствие
  



  

    
Лорем Ипсум Долор
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  

Каждый section с классом parallax будет содержать наши фоновые изображения и текст заголовка, а каждый section с классом content будет простым разделом, содержащим контент. Класс container представляет собой плавный элемент div с максимальной шириной, что делает отзывчивость всего этого очень простой. Теперь давайте углубимся в CSS.

Стилизация и работа с CSS

Первое, что нужно отметить, это то, что все мои фоновые изображения имеют width 1600 пикселей и height 600 пикселей. Это позволяет мне установить разделы параллакса на фиксированную высоту 600 пикселей. Хотя есть еще кое-что. Поскольку я не хочу повторяющихся фонов (я использую большие и жирные изображения), я не могу всегда ожидать, что пользователи будут иметь максимальную ширину (что позволит фоновым изображениям быть полностью видимыми). К счастью для нас, мы можем использовать свойство CSS background-size и установить для него значение cover . Это заставляет фоновое изображение занимать все доступное пространство, пропорционально расширяя его. Однако для максимальной поддержки он должен иметь префикс, так что помните об этом.

Пока все хорошо, кроме самого главного. Нам нужно, чтобы наше фоновое изображение оставалось неподвижным, пока наш контент прокручивается мимо него. Опять же, CSS облегчает нам жизнь. Мы используем свойство background-attachment и устанавливаем для него значение fixed . Простой! Вот как выглядит мой CSS с некоторыми примерами медиа-запросов:

 /* =============================================== ============
  ПЕРВИЧНАЯ СТРУКТУРА
================================================== ========== */
.контейнер {
  максимальная ширина: 960 пикселей;
  поле: 0 авто;
}
/* =============================================== ============
  РАЗДЕЛЫ
================================================== ========== */
section.module:последний ребенок {
  нижняя граница: 0;
}
section.module h2 {
  нижняя граница: 40px;
  семейство шрифтов: "Roboto Slab", с засечками;
  размер шрифта: 30px;
}
section.module p {
  нижняя граница: 40px;
  размер шрифта: 16px;
  вес шрифта: 300;
}
section.module p:последний ребенок {
  нижняя граница: 0;
}
section.module.content {
  отступ: 40px 0;
}
section.module.parallax {
  высота: 600 пикселей;
  фоновая позиция: 50% 50%;
  фоновый повтор: без повтора;
  background-attachment: исправлено;
  размер фона: обложка;
}
section.module.parallax h1 {
  цвет: rgba (255, 255, 255, 0,8);
  размер шрифта: 48px;
  высота строки: 600 пикселей;
  вес шрифта: 700;
  выравнивание текста: по центру;
  преобразование текста: верхний регистр;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0,2);
}
section.module.parallax-1 {
  фоновое изображение: URL("../img/demo/_small/1.jpg");
}
section.module.parallax-2 {
  фоновое изображение: URL("../img/demo/_small/2.jpg");
}
section.module.parallax-3 {
  фоновое изображение: URL("../img/demo/_small/3.jpg");
}

@media все и (минимальная ширина: 600 пикселей) {
  section.module h2 {
    размер шрифта: 42px;
  }
  section.module p {
    размер шрифта: 20px;
  }
  section.module.parallax h1 {
    размер шрифта: 96 пикселей;
  }
}
@media все и (минимальная ширина: 960 пикселей) {
  section.module.parallax h1 {
    размер шрифта: 160 пикселей;
  }
}

Поддержка браузера и информация о собственности

Поддержка браузера в целом действительно отличная. IE8 и более ранние версии не будут поддерживать свойство background-size , но об этом должен позаботиться простой условный стиль. Кроме того, все поддерживается, и у вас не должно быть никаких проблем. Для получения дополнительной информации о свойствах CSS, используемых в этом руководстве, посетите MDN:

• Фоновая позиция — ссылка MDN
• Размер фона — ссылка MDN
• Фоновое вложение — ссылка на MDN

Заворачивать

Здесь мы реализовали что-то простое, эффективное и немного отличающееся от обычного вида прокрутки всего сразу. Мы использовали несколько хороших, но малоизвестных приемов CSS для достижения желаемого эффекта. И это обертка! Не забывайте, что вы можете просмотреть демоверсию и загрузить исходный код, щелкнув ссылки ниже, а если у вас есть вопросы, комментарии или отзывы, вы также можете оставить их ниже.