Parallax css: параллакс, «липкий» футер и другие / Блог компании Skillbox / Хабр

Здесь мы рассмотрим несколько потрясающих примеров этого эффекта параллакса на веб-сайтах CSS.

1.

Немецкий креативный разработчик Давиде Пероцци начинает наш тур. Густые черные заголовки шрифтов на фоне сепии перемещаются горизонтально при прокрутке, создавая потрясающее движение с большим контрастом в статическом тексте. Плавная прокрутка и проецирование изображений, которые деформируются вместе с анимированным курсором, — все это подчеркивает собственные навыки дизайнера.

2. Собачья студия

Давайте сосредоточимся на анимированной трехмерной собаке в центре этого дизайна, как же вы можете не делать этого. Как привлекает внимание, он попадает в точку. Вращение, изменение размера, мигание, перемещение ушей и изменение цвета в ключевых точках интереса, заголовках. Он помещается за текстом и перемещается вперед, он чередуется с фоном и имеет явное присутствие, что делает его действительно запоминающимся изображением, демонстрирующим, как они справились с эффектами.

3.Firewatch Game

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

4. Садовая студия

Garden Studio самостоятельно ограничивает свое местоположение, используя технику параллакса только в верхней части сайта.Это означает, что изображение должно быть настоящей красоты, демонстрирующей их дизайнерские навыки, и, к счастью, это именно так. Почти графическое изображение сада, окаймляющего страницу слева и справа с силуэтами деревьев и увенчанного осенними лиственными ветвями. Взгляд притягивается к центру и направляется обратно через тщательно продуманные слои к заходящему солнцу. Прекрасный. Прокрутите вниз до статической страницы, как будто солнце полностью садится. Довольно умно и очень эффективно.

5.Мэдис

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

6. Отпечаток глаза

Черный на белом / белый на черном текст, контрастирующий с красочными фотографическими снимками. Статический текст за наложенными изображениями, движение текста, всплывающее при наведении, твердое и творческое.Стилизованный и самобытный сайт с множеством эффектов.

7. Игривый

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

8. Калексо

Calexo — это напиток из каннабиса — нам почти не удалось попасть на сайт, когда мы моложе 21 года !!. Анимированный курсор перенесет вас в путешествие на американских горках по всему сайту. Это загруженный сайт, полный графических элементов и линий, и везде, куда бы вы ни посмотрели, происходит много всего. Каким-то образом это работает, сочетая ретро-качество с более мягкими пастельными тонами, чтобы добиться веселого, умиротворенного, хиппи-ощущения, которое не может быть более подходящим.

9. Majestyk Apps

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

10. Розовый кролик

Pink Rabbit — продюсерская компания из Амстердама, представляющая избранную группу режиссеров кино и телевидения.Поэтому правильно, что здесь сказывается идея роли фильма. Горизонтальная прокрутка примеров изображений из постановок — это все равно, что брать рулон пленки из старой камеры и подносить ее к свету, чтобы посмотреть, что на ней изображено. Добавьте к этому анимированный курсор с розовым размытием и обрисованную в общих чертах производственную информацию о каждом фильме, которая меняется при наведении курсора, и у вас получится довольно крутая целевая страница, на которой можно взаимодействовать.

Возможно, вас заинтересует эта статья по теме «80+ лучших источников для поиска ресурсов и ресурсов для проектирования»

11.Перемотка назад YouTube

Умно, сообразительно, оригинально и сообразительно. Обзор самых важных и незабываемых моментов 2019 года на YouTube сам по себе незабываем. Сначала горизонтальная прокрутка ряда интересных креативных репрезентативных значков каждого клипа, а затем крайняя левая вертикальная прокрутка точного обзора каждого клипа. Оба работают вместе не только во времени, но и дополняют текст и изображения. Это одинаково хорошо в зависимости от того, какую страну вы выбрали.Очаровательно, с идеальным использованием параллакса, абсолютно уместно, чтобы дать что-то необходимое, а не просто произвести впечатление техникой.

12. Laracon

Laracon US — это ежегодное собрание людей, увлеченных созданием потрясающих приложений с помощью веб-фреймворка Laravel. Пока что ну и что. Ключ в том, где он находится, в аквариуме Атланты. Сайт отлично подготавливает сцену. Сцена в пустыне с нисходящим свитком, ведущим вас в воду и под воду.Через слои и слои к морскому дну. Все время просматривайте важную информацию в окружении рыб, дайверов и морских обитателей. Отличный способ создать интересную и эффектную обстановку.

13. Бамбуковая зубная щетка

Bite настолько чистый и свежий, насколько и следовало ожидать с точки зрения гигиены полости рта. Эффект параллакса используется для удержания Bamboo Brush в центре внимания на протяжении всего процесса прокрутки вниз, и это удается. Поскольку изображения и текстовая информация перемещаются по обе стороны, главная звезда располагается впереди и в центре, в конечном итоге помещаясь в специальную коробку.Вы ни на минуту не потеряете то, что здесь предлагают. Параллакс удерживает внимание и фокусирует внимание на сообщении.

14. Sketchy Media

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

15. Победите Боко

После того, как вы приземлились, вам нужно время, чтобы встретиться с монстрами, прежде чем отправиться в путешествие. И вам нужно будет потратить некоторое время на это удивительное путешествие через четырехэтапный процесс исследования / проектирования / тестирования. Каждый раздел — это гениальная дань уважения эффекту параллакса, прокрутка по горизонтали и вертикали через великолепные абстрактные земли и морские пейзажи, и все время проводимое в путешествии рабочего процесса.Одним словом -Гениус.

16. FPP

Магазин маркетингового агентства, а значит и сайт магазина. Это могло быть скучно, но это не так. Прокрутка по проходу супермаркета, перетаскивающая вас дальше на сайт и буквально постановка вопросов внизу страницы. И вдруг в конце прохода вы попадаете внутрь ананаса, поверьте мне, это работает. Когда ананас вращается, у вас в голове крутятся новые вопросы. Звучит безумно, но работает — любопытно? Именно этого они и хотят.

17. St Regis, Венеция

Хорошее сочетание отличных изображений отелей, еды и Венеции. Полное ощущение того, что предлагается, и довольно стандартный, но высококачественный отель. Особняком стоит тонкое и бережное использование параллакса. Почти незаметно, но добавляет движения и качества.

18. Пиво Reservoir Dogs

Крафтовый пивовар с очевидным отношением к делу. Все на этом сайте создает и удерживает изображение.Отчасти подделка фильма, отчасти информативная и в значительной степени ориентированная на имидж. Темный, задумчивый, пугающе крутой. Функции параллакса помогают направить вас вниз, плавающие буквы «Собаки» в стилизованном наложении шрифта и добавляют интереса к изображениям.

19. Эмлион Джуниор Консель

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

20. Бое Джин

Отличные цветные блоки для каждого связанного коктейля. Яркий и веселый сайт задает тон вечеринке. История Джина использует параллакс для перехода от слайда к слайду по горизонтальной временной шкале, но позволяет вам продолжить просмотр сайта в любой момент. Супер навигационное устройство.

Вы хотите познакомиться с ретро-дизайном современности: ультра вдохновляющая коллекция

21.ИнДнегев фестиваль

Сайт этого израильского музыкального фестиваля ориентирован на имидж. Очень крутой пейзаж для начала с легким движением. Ключевая тема этих цветовых схем и стиля продолжается по всему сайту в виде фона с парящими облаками и звездными пейзажами. Отличный способ использовать параллакс для удержания темы.

22. Попугай Анафи

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

23. Аарон Макгуайр

Аарон Макгуайр (Aaron McGuire) — интерактивный дизайнер-фрилансер из Калифорнии, который демонстрирует свои работы на собственном сайте.Необычный вид эффекта страницы флипбука на 4 страницы; возиться, исследовать, развивать и анимировать. у каждого своя цветовая схема и переходы, а также классные изображения.

24. Напитки для выступления противников

Back and Yellow, энергия и движение, на первый взгляд. Четкие линии, динамическое движение, крутые изображения и фоновое видео. Многие техники вращаются (иногда буквально) вокруг центральной идеи здоровья, энергии и фитнеса. Современное и эффектное использование параллакса для создания ощущения.

25. Обушо

У клининговой компании в Нью-Йорке Oboosho есть отличный свежий, дружелюбный чистый сайт, в котором играет их собственный мультяшный комикс. Отличный брендинг, отличное использование параллакса при открытии страницы. Первоначально статические изображения поднимаются вперед из экрана при прокрутке вниз. В этом нет ничего особенного, но это действительно добавляет сайту и делает его немного особенным.

26. История чешского хоккея

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

27. Lasczuk

Сайт из Польской юридической практики Lasczuk, который ясно демонстрирует, что вы не ограничены сайтами портфолио веб-дизайнеров, если вы технологически новаторски. Это не новаторский подход, но он добавляет глубины и измерения, демонстрируя внимательность и внимание к деталям.

28. Омниум Блокчейн

Градиентная синяя окраска и парящие заштрихованные геометрические блоки создают спокойствие и безмятежность на территории отеля Omnium. Основная точка притяжения — это открытие концентрических блоков, втягиваемых в глобус при прокрутке, представляющих экосистему блокчейна, работающую вместе для создания единого целого. В этом сайте есть мягкость, которая странно манит и гипнотизирует. Качественный дизайн.

29. La Phase5

Студия дизайна French Interactive делает ставку на современный, геометрически минималистичный дизайн.Оставляя много отрицательного пространства, им удается наполнить ощущение ясности дизайна и видения небольшими хитростями, поворотами и функциями движения. Простой, но эффективный.

30. La Mordue

La Mordue — французский производитель сидра. Когда вы потратили столько усилий на разработку продукта, совершенно правильно, что он должен занимать центральное место, он делает именно это. Две бутылки ароматного сидра всегда находятся недалеко от центра экрана. Они удерживают ваше внимание, сосредотачивают внимание на сайте и позволяют информации облетать их, как если бы они знали, что они номер один.

31. Лукбук Wedze

Горный пейзаж для зимних видов спорта. Но это не обычная сцена. Здесь у нас есть горный хребет в виде геометрических плоскостей с отличными оттенками серого, создающими безошибочную глубину. Этого было бы достаточно, но вы получите больше, нажмите на спортивные опции, чтобы совершить цветную поездку по угловым склонам к каждой отдельной секции. Действительно, очень красиво сделано.

Реклама

Мы уверены, что вы согласитесь, 33 лучших примера идеального параллакса, добавляющего и дополняющего отличные сайты.

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

32. Adriaansen

33. Раджапак

34. Уамама

35. GTG

36. ПИК Образование

37. Бенгел

Заключение

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

Не забудьте ознакомиться со статьями по теме:

Эффект прокрутки Parallax с использованием CSS.

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

Примеры:
Эти веб-сайты блестяще демонстрируют эффект параллакса —

Этот эффект — отличный визуальный, но простой способ реализовать с помощью CSS.
Для начала давайте разберемся, что происходит в приведенных примерах.
Эффект создается, потому что изображение на заднем плане остается неподвижным без движения, но другие изображения движутся. Благодаря этой простой технике этот эффект выглядит великолепно.
Теперь давайте посмотрим на реализацию этого эффекта с помощью CSS-
Объяснение
1. background-attachment
Это свойство используется, чтобы определить, является ли фоновое изображение фиксированным или прокруткой со страницей.

  Синтаксис:  прикрепление фона: прокрутка / фиксированная / локальная; 

2.background-position
Это свойство определяет начальную позицию фонового изображения.

  Синтаксис:  background-position: value; 

3. background-repeat
Это свойство определяет, будет ли фоновое изображение повторяться или нет, и как оно будет повторяться в случае повторения.

  Синтаксис:  background-repeat: repeat / repeat-x / repeat-y / no-repeat; 

повтор — фоновое изображение будет повторяться как по вертикали, так и по горизонтали.
repeat-x — Фоновое изображение будет повторяться только по горизонтали.
repeat-y — фоновое изображение будет повторяться только по вертикали.
no-repeat — фоновое изображение не будет повторяться.
4. background-size
Это свойство определяет размер фонового изображения.

  Синтаксис:  background-size: auto / length / cover / contain /; 

авто — значение по умолчанию.
length — Устанавливает ширину и высоту фонового изображения.
в процентах — устанавливает ширину и высоту фонового изображения в процентах от элемента контейнера.
cover — Масштабируйте фоновое изображение до максимального размера, чтобы фоновая область была полностью покрыта фоновым изображением.
contain — Масштабировать изображение до максимального размера, чтобы и его ширина, и его высота могли уместиться внутри области содержимого.

Вывод:

Обратите внимание, что Этот эффект параллакса не всегда работает с мобильными телефонами и планшетами, поэтому вам нужно отключить эффект с помощью медиа-запросов.

Автор статьи: Ayush Saxena . Если вам нравится GeeksforGeeks, и вы хотели бы внести свой вклад, вы также можете написать статью с помощью provide.geeksforgeeks.org или отправить ее по электронной почте на [email protected]. Посмотрите, как ваша статья появляется на главной странице GeeksforGeeks, и помогите другим гикам.

Пожалуйста, напишите комментарии, если вы обнаружите что-то неправильное, или если вы хотите поделиться дополнительной информацией по теме, обсуждаемой выше.

Создание эффекта параллакса CSS

с Джереми Осборном

В сегодняшнем дубле 5 вы создадите эффект прокрутки фонового изображения, как показано здесь.Этот эффект похож на эффект параллакса, который можно найти во многих местах в Интернете, например в этом.

Ваша версия будет использовать CSS background-size: cover и background-attachment: fixed features, а также небольшую высоту окна просмотра, или vh единиц. Вот проект на CodePen, над которым вы будете работать, и вот URL-адрес, который вы также можете найти по ссылке в разделе Resources для этого видео.

В вашем HTML вы увидите три div s, каждый из которых имеет класс bg и индивидуальное имя идентификатора - bg-1 , bg-2 и bg-3 .И есть также четвертый div с содержанием класса .

В CSS стиль div имеет тонкую черную рамку, чтобы помочь вам визуализировать div s, а высота установлена ​​на 200 пикселей. В классе bg для этого значения background-repeat установлено значение no-repeat , что означает, что изображения отображаются только один раз. И наконец, обратите внимание, что каждый идентификатор указывает на фоновое изображение.

Теперь я специально установил высоту div на 200 пикселей.Я хотел показать вам, что не очевидно, что высота всех фоновых изображений на самом деле составляет 550 пикселей.

Увеличьте высоту div s до 300 пикселей, чтобы отобразить больше изображения.

Увеличьте его до 600 пикселей, и вы увидите все изображение, а также дополнительные 50 пикселей.

Вы вернетесь к этой высоте через секунду, но сначала отцентрируйте изображения в стиле bg, набрав: background-position: center center; .

Затем добавьте свойство background-size и присвойте ему значение cover .Свойство background-size со значением cover масштабирует изображение как можно больше без увеличения ширины или высоты.

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

С другой стороны, если вы используете изображение с высоким разрешением, оно будет отлично смотреться в полном размере, но ваш пользователь платит за производительность, будучи вынужденным загружать излишне большие изображения.Поэтому, пожалуйста, найдите время, чтобы найти правильный баланс между качеством изображения и размером изображения для ваших проектов.

Вернувшись в свой проект, вы можете увидеть, как изображения теперь покрывают весь диапазон div в максимально возможной степени. Продолжайте и добавьте это дополнительное свойство высоты и значение после исходного - height: 90vh; .

Значение 600 пикселей оставлено по причинам возврата. Современный браузер будет использовать устройство vh , потому что он последний по порядку.Более старый браузер, не поддерживающий единицы vh , проигнорирует единицы vh и будет использовать значение 600 пикселей. Возможно, вы не привыкли к устройствам vh , поэтому сохраните свой проект и перейдите в полноэкранный режим, пока я буду объяснять.

Один блок vh равен 1% от начального содержащего блока окна просмотра. Это означает, что 90vh устанавливает высоту вашего div s на 90% от области просмотра или окна браузера.

Вы можете увидеть это в режиме просмотра всей страницы.Если вы прокрутите до самого верха, вы увидите, что нижняя часть первого div заканчивается здесь на высоте 90%. Оставшиеся 10% - это верхняя часть вашего второго div . Прокрутив вниз, вы увидите, что все ваши div и будут иметь одинаковую высоту.

Итак, вернемся к редактору. И вы добавите настоящую звезду шоу. Идите вперед и введите: background-attachment: fixed; . Фиксированное значение заставляет фоновые изображения оставаться на месте.Если вы сохраните документ и перейдете в полноэкранный режим, вы увидите, как это происходит.

Так что это немного дезориентирует, но в то же время круто. Фактически происходит то, что блоки div и движутся, а фоновые изображения - нет. Имейте в виду, что это просто декоративные фоновые изображения. В вашем div s нет содержимого.

У нас нет времени исследовать, что еще вы могли бы с этим сделать, но в качестве быстрого примера скопируйте самый последний div и вставьте его между div s 2 и 3.Затем продолжайте и сохраняйте и просматривайте в полном виде.

Теперь одна важная проблема, о которой следует помнить, - это большая проблема с большинством мобильных браузеров и с этим эффектом. На caniuse.com вы можете увидеть, что комбинация background-attachment: fixed и background-size: cover просто не работает на iOS.

Есть несколько обходных путей для решения этой проблемы, но у нас нет времени описывать их в этом видео. Однако, если вам нужно погрузиться в эти исправления, обратитесь за помощью в наш раздел Ресурсы . На этом пока все. Спасибо за просмотр. Если вам нравится это видео и вы хотите узнать больше о CSS, не забудьте посмотреть другие наши видеоролики Take 5, а также остальные материалы из каталога курсов в Gymnasium.

LinkedInLearning / css-scrolling-parallax-2835103: В этом репозитории есть файлы упражнений для моего курса CSS: Scrolling and Parallax, который вы можете посмотреть на LinkedIn Learning.

Это хранилище учебного курса LinkedIn «CSS: прокрутка и параллакс».Полный курс доступен в LinkedIn Learning.

Раньше прокрутка была очень простой - вверх и вниз, а иногда и из стороны в сторону. Теперь прокрутка заняла большее место в навигации, а CSS позволяет связывать анимацию с прокруткой, что дает новые возможности взаимодействия. Этот курс показывает, как веб-разработчики и разработчики приложений могут использовать прокрутку и параллакс для программирования новых стилей интерфейса. Рэй Вильялобос демонстрирует, как настроить CSS для поведения прокрутки, создать анимацию CSS, создать анимацию на основе прокрутки, использовать ScrollMagic, tween и использовать платформу анимации GreenSock (GSAP).Он охватывает псевдоклассы, элементы, использование свойств преобразования, последовательность, параллакс с помощью JavaScript и многое другое.

Инструкции

В этом репозитории есть ветки для каждого видео в курсе. Вы можете использовать всплывающее меню ветки в github, чтобы переключиться на определенную ветку и взглянуть на курс на этом этапе, или вы можете добавить / tree / BRANCH_NAME к URL-адресу, чтобы перейти к ветке, к которой вы хотите получить доступ.

Филиалы

Ветви структурированы так, чтобы соответствовать видео в курсе.Соглашение об именах: ГЛАВА # _ФИЛЬМ # . Например, ветка с именем 02_03 соответствует второй главе и третьему видео в этой главе. Некоторые ветки будут иметь начальное и конечное состояние. Они отмечены буквами b для «начала» и e для «конца». Ветвь b содержит код, как в начале фильма. Ветвь e содержит код в том виде, в котором он находится в конце фильма. Ветвь master содержит окончательное состояние кода во время прохождения курса.

Установка

1. Клонируйте этот репозиторий на свой локальный компьютер с помощью терминала (Mac), CMD (Windows) или инструмента с графическим интерфейсом, например SourceTree.

Этот репозиторий поставляется с сервером активной перезагрузки, который использует gulp.js для удобства пользователя. Для его активации выполните следующие действия:

1. npm установить
2. npm начало