P arallax эффект стал популярным после того, как Nike запустил свой сайт «Nike Better World «. Сайт получил множество положительных отзывов от разных ресурсов за свой замечательный эффект параллакс-прокрутки и веб-дизайн.
Параллакс-эффект существовал с 1980-х годов и использовался в видеоиграх, а потом на сайтах.
Примеры сайтов с параллакс-эффектом: что такое параллакс-прокрутка?Вы уже видели примеры его использования. Перед тем как углубиться в примеры сайтов, использующих параллакс-эффект, уделим немного времени объяснению того, что же он собой представляет.
Параллакс – это видимое смещение или разница в видимом положении объекта, если он просматривается с двух разных точек, не лежащих на одной прямой с объектом. В веб-дизайне под параллаксом понимается техника прокручивания, используемая для создания иллюзии глубины сайта.
Это не новая техника. Но прошло немало времени между её появлением и недавним рывком в трендовые стили. Чтобы показать, как выглядит параллакс-эффект при прокрутке, я собрал сайты, которые используют этот приём.
Посмотрите на примеры:
Учимся создавать дизайн сайта с параллакс-эффектомСуществует четыре метода, которые могут быть использованы для создания сайта с parallax эффектом j Q uery .
- Послойный метод – использование нескольких фоновых изображений, которые могут независимо перемещаться горизонтально или вертикально, и расположены одно над другим.
- Метод спрайтов – использование одного большого изображения, составленного из нескольких, и отображение только части большого изображения в различных позициях. Часто используется в меню навигации.
- Метод повторяющегося шаблона – контент для прокрутки строится из отдельных плиток, которые могут перемещаться над повторяющимся слоем фона.
- Растровый метод – линии пикселей изображения скомбинированы и обновляются сверху вниз с небольшой задержкой между прорисовкой линий.
Посмотрите пример
Что вам понадобится для реализации этого примера параллакс-прокрутки:
- Wellfleet (шрифт Google);
- Arvo (шрифт Google );
- Oswald (шрифт Google );
- Goudy Bookletter 1911 (шрифт Google) ;
- Изображения, использованные в этом примере ;
- Рождественские изображения в высоком разрешении. Вы можете загрузить бесплатные изображения отсюда или использовать изображения из архива, ссылка на который приведена выше.
Для файловой структуры parallax эффект примера мы создадим три папки и один HTML-файл :
- html – будет главным файлом. Весь дизайн будет расположен в этом файле;
- Папка js – для скриптов JavaScript/jQuery ;
- Папка img – для изображений;
- папка css – для CSS-стилей .
В файл index.html сначала добавим объявление типа документа HTML5 , а также группу ссылок в заголовок . Туда будет включена ссылка на файл CSS , шрифты Google , а также файл библиотеки jQuery .
Creating a Simple Parallax Scrolling Website
Пропустим код parallax эффекта jQuery и обсудим его позже. А пока продолжим работу с HTML-элементами . Мы добавим тэг header с логотипом и навигацией внутри. Навигация будет вести на определённые слайды. Позже мы добавим эффект плавной прокрутки, чтобы это смотрелось красиво.
PARALLAX
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
Теперь добавим слайды для parallax эффекта в блоке . Мы пометим каждый из них атрибутом ID , который будет соответствовать его порядковому номеру. Внутрь слайда мы поместим блок с классом content, чтобы выровнять элементы по центру.
MERRY
CHRISTMAS
HAPPY NEW YEAR
“Then the Grinch thought of something he hadn"t before! What if Christmas, he thought, doesn"t come from a store. What if Christmas...perhaps...means a little bit more!”
Dr. Seuss
“I truly believe that if we keep telling the Christmas story, singing the Christmas songs, and living the Christmas spirit, we can bring joy and happiness and peace to this world.”
Norman Vincent Peale
“Christmas doesn"t come from a store, maybe Christmas perhaps means a little bit more....”
Dr. Seuss
“My idea of Christmas, whether old-fashioned or modern, is very simple: loving others. Come to think of it, why do we have to wait for Christmas to do that?”
Bob Hope
Copyright 1stwebdesigner.com
Теперь, когда мы поместили все HTML-элементы на страницу, сайт выглядит вот так.
CSS—стилиНачнём с добавления стилей parallax эффекта для тега body , а также заголовков H1 , H2 и H3 . Мы установим шрифт “Arvo ” для заголовков H1-H2 .
body{ margin: 0; padding: 0; width: 100%; } h1 { font-family: "Arvo"; font-weight: normal; font-size: 55px; text-align: center; color: #fff; margin: 0; padding: 0; } h2 { font-family: "Arvo"; font-weight: normal; font-size: 40px; text-align: center; color: #fff; margin: 0; padding: 0; } h3 { font-family: Oswald; font-weight: normal; font-size: 16px; text-align: center; margin: 5px 0; padding: 0; z-index: 1; position: relative; }
Затем добавим основные стили для позиционирования элементов на экране и контента в слайдах.
Center { margin: 0 auto; } .content{ margin: 0 auto; width: 960px; } .clear { clear: both; }
Теперь стилизуем секцию заголовка parallax эффект примера . Добавим изображение с чёрным фоном и прозрачностью в 60% в заголовок, который будет содержать логотип и навигацию. Логотип разместим слева, а навигацию – справа.
#header { width: 100%; background: url("../img/header-bg.png"); height: 80px; position: fixed; margin-top: 30px; } #nav { width: 410px; float: right; margin-top: 20px; } #logo a { color: #fff; text-decoration: none; float: left; font-size: 30px; margin-top: 20px; color: #fff; font-family: "Wellfleet"; font-weight: bold; } #nav ul{ list-style: none; display: block; margin: 0 auto; list-style: none; } #nav li{ margin-top: 9px; float: left; padding-left: 21px; } #nav li a { color: #fff; opacity:0.6; font-size: 16px; text-decoration: none; font-family: "Wellfleet"; } #nav li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; } #nav li a:hover { color: #fff; opacity:1; }
Quotes { font-family: "Goudy Bookletter 1911", serif; font-weight: normal; font-size: 30px; text-align: left; margin: 50px auto; } .author_name_white { font-family: "Wellfleet"; margin: 70px 0 0 75px; color: #fff; font-size: 20px; } .author_name_gray { font-family: "Wellfleet"; margin: 70px 0 0 75px; color: #94a4a4; font-size: 20px; } .quotes_container { width: 800px; margin: 0 auto; } #christmas_tree { background: url("../img/christmas-tree.png") no-repeat; width: 48px; height: 77px; margin: 0 auto; position: relative; bottom: -35px; } #divider { background: url("../img/divider.png") no-repeat; width: 300px; height: 35px; margin: 0px auto 27px auto; } #ribbon { background: url("../img/ribbon.png") no-repeat; width: 251px; height: 48px; margin: 0 auto; display: block; position: relative; top: -38px; } #snowflakes1 { background: url("../img/snowflakes.png") no-repeat; width: 24px; height: 21px; margin: 0 auto; display: block; position: relative; bottom: -54px; left: -102px; } #snowflakes2 { background: url("../img/snowflakes.png") no-repeat; width: 24px; height: 21px; margin: 0 auto; display: block; position: relative; bottom: -33px; right: -100px; }
Каждый слайд в parallax эффекте jQuery будет иметь фоновое изображение или белый фоновый цвет с фиксированной позицией. Также нужно добавить небольшие отступы к каждому слайду, чтобы выровнять элементы по центру.
#slide1, #slide2 { width: 100%; } #slide1 { background:url("../img/slide1.jpg") 50% 0 no-repeat fixed; color: #fff; height: 600px; margin: 0; padding: 200px 0 260px 0; background-size: cover; } #slide2 { background-color: #fff; color: #333333; height: 300px; margin: 0 auto; overflow: hidden; padding: 200px 0; } #slide3 { background: url(../img/slide3.jpg) 50% 0 no-repeat fixed; color: #fff; height: 600px; padding: 170px 0 0 0; background-size: cover; } #slide4 { background-color: #fff; color: #333333; height: 300px; padding: 200px 0; } #slide5 { background: url(../img/slide5.jpg) 50% 0 no-repeat fixed; height: 200px; margin: 0 auto; padding: 250px 0; color: #fff; background-size: cover; }
#copyright { color: #fff; font-family: "Wellfleet"; font-size: 14px; margin-top: 100px; text-align: center; } #copyright a { text-decoration: none; color: #fff; }
Код jQueryВдохнём жизнь в наш сайт с parallax эффектом . В раздел head добавим следующий код jQuery .
Публикуем реализацию очень простого Parallax эффекта при прокрутке страницы. Данный parallax эффект не только очень прост в установке и настройке, но и сам по себе скрипт параллакса небольшой и не нуждается в дополнительных настройках. Работает данный скрипт при подключенной библиотеки jQuery.
ИСХОДНИКИ
подключается рarallax эффект проще простого и работает при подключенной библиотеке jQuery.
В архиве версия jQuery — jquery-1.11.3.min.js Но данный эффект параллакса работает как с более новыми версиями библиотеки jQuery, так и с более старыми. Проверял!
Поэтому подключаем к HTML документу сначала jQuery , а после сам скрипт parallax.min.js
Выглядит подключение вот так:
Ну а теперь HTML CSS подключение параллаксаБерите блок, это может быть header , section , div , footer .
Блок div , в частности, называйте любым классом, и присваивайте:
width: 100%
min-height: 400px;
Хотя это не принципиально.
section class="parallax"
CSS .parallax { min-height: 400px; background: transparent; } Обязательные атрибуты параллакса
data-parallax="scroll" — нужен для срабатывания скрипта;
data-image-src="img/bg_4.jpg — картинка, точнее путь к картинке;
На странице разработчика указан полный список атрибутов.
class="parallax" — любой класс, об этом написано выше.
section class="parallax" — надпись внутри блока с parallax эффектом, в данном случае заголовок.
Материал взят из зарубежного . И представлен исключительно в ознакомительных целях.
Суть эффекта параллакс заключается в разных скоростях движения отдельных элементов фоновой картинки, при этом сам фон при прокручивании страницы, движется медленнее остальных, что создает ощущение глубины и трехмерности.
Благодаря популярности параллакс эффекта , уже существуют готовые плагины с реализацией простой parallax анимации на сайте. Наша задача состоит в том, чтобы эффективно воспользоваться готовыми решениями и уметь применять их на своих сайтах.
Как работает параллакс эффект , можно увидеть на официальной странице данного плагина, где можно скроллить страничку и сразу видеть такой эффект, когда нижний блок с одной фоновой картинкой наплывает на верхний.
Что необходимо для реализации параллакс-скроллинг эффекта?
min-height: 500px;
background: transparent;
}
Перед заливкой на сервер у вас должна быть папка с фотографиями, папка со скачанными скриптами (jquery.min.js и parallax.js) , а так же HTML файл и CSS стили.
Полный HTML-код:
Parallax Scrolling
| 29.09.2014
Добрый день, дорогие читатели! Наш сегодняшний рейтинг, состоящий из 10-ти мест, посвящен не обычным сайтам. Сайты в этом списке ТОП-10 имеют одну общую особенность – эффект параллакса.
Специально для тех, кто еще не в курсе, что это такое, мы вкратце расскажем об этом эффекте, который уже начал интенсивно набирать обороты и становится все более популярным в сфере веб-дизайна.
Итак, параллакс-эффектом, либо параллакс-скроллингом называется специальная техника, при которой объекты на заднем плане в перспективе движутся медленнее, чем объекты на переднем плане. За счет этого создается эффект 3D, появляется ощущение трехмерного пространства. Параллакс-скроллинг – отличный способ добавить изюминку в одностраничный сайт, оживить инфографику, поведать историю или продемонстрировать портфолио. А некоторые работы современных дизайнеров можно с полной уверенностью назвать произведениями искусства… Впрочем, лучше один раз увидеть, чем сто раз услышать – ознакомьтесь с нашим ТОП-10 сайтов и взгляните сами!
Обратите внимание: некоторые сайты с parallax scrolling бывают ресурсозатратны из-за множества эффектов, поэтому не исключается «подтормаживание» на определенных компьютерах и портативных устройствах.
Grab & GoДесятое место в нашем рейтинге занимает сайт Grab & Go, где параллакс-эффект используется в качестве украшения и оживления картинки. При движении курсора можно наблюдать, как одновременно перемещаются дома и деревья на заднем фоне. Согласитесь, за счет этой изюминки есть шанс, что сайт лучше запомнится посетителю.
DigitalHandsНа сайте DigitalHands, занимающем 9-е место, эффект параллакса также используется для того, чтобы красиво выделиться и запомниться посетителям. Двигайте курсором мыши и наслаждайтесь спецэффектом.
Нью-Йоркское креативное агентство Madwell демонстрирует свое портфолио на главной странице сайта, умело используя параллакс-эффект. Ощущение 3D не покидает пользователя на протяжении всего времени прокрутки.
Любой товар нуждается в правильном представлении. На сайте магазина Oakley параллакс-скроллинг используется для демонстрации преимуществ защитных очков Airbrake MX. Получилось довольно впечатляюще и познавательно, поскольку продукцию можно рассмотреть и изучить со всех сторон, просто пользуясь скроллом.
Мало кого из людей не волнует тема личных финансов. Сайт Make Your Money Matter, занявший 6-е место нашего рейтинга, в доступной форме раскрывает зрителям преимущества кредитного союза и рассказывает о минусах банков. Здесь можно воспользоваться калькулятором, который покажет, какую прибыль получают банки благодаря вложениям клиентов, а также найти отделения кредитных кооперативов по почтовому индексу.
Хотели бы вы изучить Сиэтл с высоты 184 метра? Сайт Space Needle отправит вас в виртуальную прогулку по самой узнаваемой достопримечательности города – башне Спейс-Нидл (Space Needle), что в переводе с английского означает «космическая игла». Эта башня высотой 184 м, шириной 42 м и весом 9 550 тонн выдерживает ураганы со скоростью ветра до 320 км/ч и землетрясения до 9,1 балла. К тому же, у башни есть 25 громоотводов. Отличительной особенностью Спейс-Нидл является обзорная площадка на высоте 159 метров, ресторан SkyCity и магазин подарков. С ее вершины можно увидеть центр Сиэтла, вулкан Рейнир, Каскадные горы, залив Элиот и окружающие острова.
Крупнейший французский автопроизводитель Peugeot довольно неординарным образом презентовал систему гибридного привода Hybrid4. Перед нашими глазами открывается захватывающий комикс (который, между прочим, можно поставить на автовоспроизведение), где задача главной героини – раздобыть секретные данные и уйти, не попав в неприятности. Для успешного выполнения операции она вынуждена переключаться между четырьмя различными режимами движения, которые имитируют технологию Peugeot Hybrid4 – максимальная производительность и динамичность (Sport), режим полного привода и максимальной тяги (4WD), баланс между производительностью и экономией (Auto), тихая работа (ZEV).
Итак, мы подошли к третьему месту в нашем списке ТОП-сайтов, которое досталось проекту The Walking Dead. При создании сайта, который в первую очередь заинтересовал многочисленных фанатов сериала «Ходячие мертвецы», использовались HTML5, CSS3, JavaScript и, конечно, параллакс-эффект. Разработчики проделали огромный труд, заставив работать все эти технологии вместе и на всех платформах. Попадая на сайт и начиная скроллить, пользователь видит рассказ-комикс о том, как из актеров делают зомби.
Уникальный и неповторимый проект, часть агитационной кампании Sony «Be Moved» впечатляет своей объемностью, динамикой и продуманностью до мельчайших деталей. Лучшей презентации продукции, чем у Sony, наверное, не сыскать. Слова излишни – просто скроллите вниз и наслаждайтесь!
И, наконец, мы дошли до первого места нашего рейтинга, которое занял сайт Flat vs. Realism – детище интерактивного агентства inTacto. Этот новогодний проект со зрелищной графикой (и музыкальным сопровождением!) представляет собой мини-игру жанра fighting с интересной предысторией, где происходит противостояние представителей двух видов дизайна – реалистичного и плоского. Сделав упор на главный холивар конца 2013 – начала 2014 года, создатели не прогадали: после выхода эта впечатляющая работа мгновенно вызвала фурор и стала популярным предметом обсуждения в блогах и новостях.
Разработчикам сайта удалось объединить параллакс-скроллинг и игру на HTML5. «Мы хотели сделать так, чтобы во время прокрутки сайта от начала до конца все действия происходили плавно и без задержек. Для этого мы применили AJAX, что позволило обновлять данные в фоновом режиме», – пояснил креативный директор агентства Alejandro Lazos. Проект был представлен зрителям в конце 2013, перед Новым годом. Приготовьтесь крутить скролл, вас ждет много увлекательного!
