Предпосылки и введение
Если вы просматриваете любой современный веб-сайт на компьютерах или мобильных телефонах, вы могли столкнуться с тем, что при прокрутке веб-сайта вниз / вверх кажется, что весь экран движется в направлении прокрутки. Если это эффект на заднем плане, информация на переднем плане также изменяется при прокрутке. Кратко этот эффект можно описать как Parallax Scrolling.
Прокрутка
Давайте разберемся, что это значит под прокруткой. Когда вы просматриваете веб-страницу, действие для просмотра веб-страницы в любом направлении (вверх, вниз, влево и вправо) называется прокруткой.
Обычно, если вы пользуетесь настольным компьютером, это действие выполняется с помощью колеса прокрутки мыши.
История
Посмотрим на слово - Scroll. В старину для отправки сообщения другим людям, находящимся на большом расстоянии, использовались рукописные свитки. Эти свитки выглядели так, как показано ниже -
Представьте себе действие человека, держащего свиток. Чтобы прочитать содержимое полностью, человеку придется «прокрутить» и прокрутить его дальше. Эти свитки использовались также для записи текста или решений. Со временем использование свитков возросло, поскольку они были изготовлены из различных письменных принадлежностей, таких как папирус, пергамент и бумага.
По мере развития компьютеров стали возможны обработка и хранение очень больших документов, таблиц и изображений. Иногда данных было так много, что размер экрана был просто недостаточен для представления данных пользователю. Когда отображаемые данные превышают размер окна или области отображения, данные остаются скрытыми. Это потребовало подхода к расширению области экрана.
Некоторые варианты расширения экрана перечислены ниже -
- Чтобы увеличить размер экрана
- Чтобы уменьшить размер данных
- Чтобы использовать прокрутку
Этот механизм прокрутки более важен для людей, работающих с графическим дизайном и редактированием фотографий.
Начало параллакса при прокрутке
Давайте посмотрим на историю параллакс-скроллинга. Для начала разберемся, что означает слово параллакс. Слово параллакс происходит от греческого словаπαράλλαξις (параллаксис), что означает чередование.
Если мы смотрим на объект под углом, объект будет отображаться определенным образом. Но если вы перемещаете один и тот же объект с разных позиций, будет очевидное движение объектов. Это явление называется Параллаксом.
Теперь, когда мы поняли происхождение и предысторию Parallax, давайте разберемся с историей и концепцией Parallax-прокрутки в веб-дизайне.
Определение
Согласно Википедии - Parallax scrolling - это техника компьютерной графики, при которой фоновые изображения движутся мимо камеры медленнее, чем изображения переднего плана, создавая иллюзию глубины в 2D-сцене и добавляя ощущение погружения в виртуальный мир.
Параллаксная прокрутка использовалась на заре анимации. Многие анимационные студии (например, Disney) использовали многоплоскостные камеры для достижения эффекта параллакса.
Поскольку технологии компьютерной графики развивались вместе с передовыми фреймворками, такими как JavaScript, веб-дизайнеры и разработчики теперь могут создавать сайты с богатым опытом. Хотя параллаксная прокрутка началась с нескольких слоев, она была перенесена на следующий уровень с помощью полос прокрутки в компьютерах. Техника осталась прежней, но благодаря ее применению для прокрутки был создан уникальный опыт.
Примеры
Параллаксная прокрутка широко используется на современных веб-сайтах. Поскольку параллаксная прокрутка может быть реализована как для мобильных, так и для настольных сайтов за один раз, популярность таких сайтов в последние годы резко возросла.
Некоторые примеры веб-сайтов, которые используют параллакс-прокрутку, приведены ниже -
Беар Гриллс
По мере продолжения анимации вы сможете увидеть, как контент веб-сайта становится интерактивным. По мере прокрутки вперед будет открываться все больше и больше информации.
Сделайте ваши деньги значимыми
Чтобы познакомить читателя с преимуществами кредитного союза, этот сайт проведет вас через сюжетную линию. При прокрутке вперед информация раскрывается уникальным образом.
Инфографика InfoQuest
Путь сотрудника к поиску важной информации на своем рабочем месте изображается с помощью прокрутки.
GitHub 404
Это немного отличается от обычного параллакса: объект в верхней части экрана перемещается, когда вы наводите на него указатель мыши.
Применение параллакс-прокрутки
К настоящему времени должно быть ясно из определения и фона, что параллаксная прокрутка полезна в самых разных цифровых медиа. Некоторые из приложений с параллаксной прокруткой приведены ниже -
Игровой дизайн
Параллаксная прокрутка широко используется в игровом дизайне. Персонажу необходимо перемещаться относительно фона, и при управлении игроком с помощью мыши и клавиатуры весь опыт должен измениться. Дизайн игры - это очень примитивный, но модный способ использования параллакс-прокрутки.
Сайты
Чтобы пользователь был заинтересован в веб-сайте, важно иметь динамичный и разнообразный опыт. Как вы могли заметить из примеров веб-сайтов, описанных выше, параллаксная прокрутка добавляет к содержимому из-за его интерактивного представления.
В этой главе рассказывается о концепциях веб-дизайна и преимуществах использования параллакс-прокрутки в веб-дизайне.
Фон веб-дизайна
С началом 20 - го века, бумажные СМИ попали в конкуренцию ожесточенной из - за цифровые средства массовой информации. Цифровые СМИ включают в себя то, что мы видим в Интернете, и, следовательно, сопутствующие журналы.
Информационные бюллетени, которые вы получаете в рамках еженедельной / ежемесячной подписки, также включаются в цифровые носители. В первую очередь цифровые медиа сильно зависят от мобильных и настольных устройств. Имеет значение, когда вы можете просматривать контент как на мобильном (портативном), так и на настольных устройствах. То, как контент отображается на любом из устройств, зависит от определенного стиля разработки контента.
Этот стиль проектирования называется Web Designing. С точки зрения проектирования или кодирования, когда дизайнер веб-страницы намеревается создать веб-страницу, он / она также принимает во внимание мобильные устройства.
Согласно Википедии, Web design включает в себя множество различных навыков и дисциплин в создании и обслуживании веб-сайтов. Один из таких навыков - создание впечатляющего опыта для пользователей. Веб-дизайн учитывает этот опыт и предоставляет организованный способ упорядочивания содержимого страницы и предоставляет им различный стиль.
Веб-дизайн включает - дизайн интерфейса, графический дизайн и использование определенных стандартов для написания кода. Эту работу может выполнять один человек или группа людей.
На рынке доступно множество инструментов, облегчающих эту работу, однако создание внешнего вида веб-страницы зависит от творческих способностей человека.
Современный веб-дизайн
С развитием технологий происходит взрыв знаний. Интернет стал вещью, и это резко повысило качество нашей жизни. В любой момент средний пользователь Интернета обрабатывает все больше и больше информации. Эта информация может быть в виде веб-сайта на настольном компьютере или с портативного устройства; планшет или мобильный телефон.
Хотя так много информации пытается привлечь внимание пользователя, очевидно, что как человек, разрабатывающий веб-интерфейс, there are only 3 seconds allocated to pass the message across.
Как с этим бороться? Передать сообщение более чем важно, потому что оно является источником любого веб-дизайна. Вы хотите создать веб-сайт, который взаимодействует, но в то же время он должен привлекать и заставлять пользователя придерживаться контента. Это действительно сложная задача.
Учитывая огромный объем работы над любым конкретным веб-контентом, все больше и больше людей попадают в мир веб-дизайна. Креативный веб-дизайнер - о нем говорят в городе благодаря его удивительному таланту создавать хороший пользовательский опыт. В настоящее время веб-дизайнер может устроиться на работу в маркетинговую / рекламную компанию или начать самостоятельно заниматься веб-дизайном.
Aesthetic appeal is the key for a given content on web. Это означает, что веб-дизайнер должен знать принципы и основы дизайна, цвета, интервалов и т. Д. Все больше и больше пользователей получают возможность видеть веб-контент высокого качества каждый день. Очевидно, что можно сравнить текущую веб-страницу или веб-сайт с тем, который был посещен несколько часов или несколько минут назад. Упорядоченный контент в сочетании с хорошей графикой и цветами сделали многие отдельные баннеры / страницы популярными в Интернете.
пример
Возьмем случай с простой графикой. В Интернете много графики, называемой мемами. Они простыеGraphics Interchange Format (GIF)изображения с текстом, встроенным в графику. Эти мемы ходят по Интернету на основе недавнего события в какой-то части мира. Если мы посмотрим на этот пример, единственная их привлекательность - это графика и некоторый релевантный или нерелевантный текст.
Тем не менее, он приобрел такую популярность, что заставляет задуматься об удивительных возможностях в Интернете.
Таким образом, для того, чтобы веб-дизайн был эффективным, важную роль играют как креативность, так и метод передачи сообщения.
It is important point to note that a successful web page is combination of Web Design and Web Development. В соответствии с текущей рыночной тенденцией, наряду с веб-дизайнером, веб-разработчик является обязательным элементом в команде. Веб-дизайнер всегда будет искать вдохновение и использовать свое творчество для создания графики и соответствующих цветовых схем. В то время как веб-разработчик будет использовать свои навыки программирования, чтобы представить графику и цветовые схемы на веб-сайте.
Веб-дизайнер также должен уметь писать код, чтобы использовать намеченную графику или цветовую схему для веб-разработчика. Простой код в простом приложении, таком как Блокнот, может помочь веб-дизайнеру занять ведущее место в веб-разработке.
Использование параллакс-прокрутки
Параллакс-прокрутка входит в рамки работы как веб-дизайнера, так и веб-разработчика. Веб-дизайнер может создать эффект Parallax Scrolling, используя такие инструменты, как InVision, UXPin, чтобы передать веб-разработчику предполагаемое поведение при прокрутке. Кроме того, веб-разработчик будет использовать свои навыки, чтобы создать эффект параллаксной прокрутки. Это можно сделать с помощью различных методов JavaScript, CSS и jQuery. Подробное описание каждого из этих методов приводится в следующих главах.
Согласно определению, приведенному в предыдущем разделе, parallax scrolling is a technique when the background content is moved at a different speed than the foreground content when scrolling.
На этом веб-сайте показан простой метод CSS для создания эффекта параллакс-прокрутки - The Urban Walks .
Как вы можете видеть на скриншоте выше, мобильный телефон в центре экрана изменит содержимое после того, как вы дважды прокрутите его. Также обратите внимание на первый свиток, как изменится фон мобильного телефона.
Этот переход дает вам ощущение, что телефон постоянно находится на своем месте, а фон меняется при прокрутке вниз. Этот эффект называется эффектом параллакса прокрутки. Вы знаете, что прокручиваете его вниз, так как в самом правом углу экрана есть индикатор экранов в виде нескольких точек.
Впервые параллаксная прокрутка использовалась в старых компьютерных играх. Где фиксированное фоновое изображение будет двигаться медленнее, так как персонаж перемещается быстрее фона. Некоторые примеры таких игр - Disney's Aladdin и Disney's Lion King. Эти игры были выпущены еще в 1993 и 1994 годах соответственно.
Хотя это правда, что все началось с игр, но в настоящее время многие веб-дизайнеры делают упор на эффект, позволяющий своей аудитории полюбить их сайт. Преимущества параллакс-прокрутки распространяются с веб-сайта на мобильные сайты.
Эти веб-сайты, когда-то разработанные с использованием параллакс-прокрутки для настольных версий, дополнены кодом, который также поддерживает мобильные экраны.
Преимущества параллакс-прокрутки в Интернете и на мобильных устройствах
В этом разделе мы обсудим преимущества использования параллаксной прокрутки с различных точек зрения, как описано ниже.
С точки зрения аудитории
Есть забавный элемент, связанный с параллаксной прокруткой. Как вы видели в приведенном выше примере, передача информации из тысячи слов стала проще, поскольку пользователь прокручивает с разных экранов.
Если мы рассмотрим первого пользователя, с каждым свитком связано любопытство. Следовательно, это не только обогащает впечатление от веб-сайта, но и увеличивает вероятность того, что пользователь потратит больше времени при первом посещении самого веб-сайта.
Доля взаимодействия с пользователем резко возрастает, поскольку пользователь заинтригован прокруткой.
Пользователь не должен задумываться о процессе выяснения информации, поскольку она доступна в более очевидном виде.
В некоторых случаях вы можете рассказать историю о продукте / услуге, которые вы предлагаете, путем анимации других элементов на экране, таких как логотип или значок меню.
С технической точки зрения
После того, как вы реализуете параллакс-прокрутку для настольной версии, ту же платформу очень легко можно будет использовать для мобильного веб-сайта или экранов.
Поскольку фрагмент кода прост и его можно использовать повторно, если вы являетесь маркетинговым агентством или компанией, предоставляющей услуги веб-сайта, это не составит труда собрать новых клиентов.
Знание параллаксной прокрутки приходит с большим опытом работы с интерфейсными фреймворками, такими как CSS, JavaScript и т. Д.
Для веб-разработчика, когда дело доходит до создания эффекта параллаксной прокрутки, доступны различные методы. Один из таких приемов - использованиеCascaded Styling Sheets(CSS).
CSS объясняет, как элементы HTML отображаются на экране. Можно создать файл CSS, и его можно будет использовать для всего веб-сайта. Добавить файл CSS проще, чем добавлять стили к каждому элементу HTML и управлять ими в разных частях веб-страницы.
Note- Некоторые из методов, обсуждаемых ниже в этой главе, относятся к настольным компьютерам, а не к мобильным устройствам. Это будет упомянуто в шагах, когда конкретный метод не подходит для мобильных устройств.
Принимая во внимание разгрузку CSS во всех дополнительных рисунках в объектной модели документа (DOM), наблюдается большее использование аппаратного ускорения и плавный эффект без нагрузки на ЦП.
Метод абсолютного положения
Этот метод часто используется для создания эффекта параллакса, поскольку он относительно легкий по сравнению с другими доступными вариантами. Положение фонового изображения остается фиксированным по отношению к другому содержимому на экране. В примере, обсуждаемом ниже, вы увидите, как это сделать, используя магию CSS.
В этом разделе мы рассмотрим два метода для метода абсолютного положения:
- Один фон
- Множественный фон
Единый фоновый метод
В этом методе мы создадим два файла в одной папке. Для той же цели соблюдайте шаги, указанные ниже -
Step 1
Мы должны создать два файла в одной папке: первый файл с разметкой HTML, а второй - с кодом CSS.
Step 2
Теперь давайте определим нашу разметку HTML. Соблюдайте код, приведенный ниже -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "BgContainer">
<div class = "Parallax">
<h1> Welcome! </h1>
</div>
<div class = "FgContainer">
<div class = "MainContent">
<p>
Here we will go ahead with some content which will really vary
according to the content on your site. I am just typing out this
content as it is sometimes good to engage user than the usual lorem
ipsum text!
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br/>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</body>
</html>Step 3
Откройте блокнот. Скопируйте и вставьте приведенный выше фрагмент кода.
Когда вы сохраняете файл, в Save as type, Выбрать All Files. Введите имя вашего файла по мере необходимости, но оно должно сопровождаться расширением -.html как показано на скриншоте ниже.
Step 4
После сохранения файла создайте еще один файл в блокноте и вставьте код, приведенный ниже -
html, body {
font-size: 18px;
line-height: 28px;
}
h1 {
letter-spacing: -15px;
color: white;
text-align: center;
font-size: 200px;
font-weight: 800;
line-height: 200px;
}
BgContainer {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
FgContainer {
position: relative;
display: block;
background-color: white;
z-index: 1;
}
MainContent {
max-width: 750px;
margin: 0 auto;
padding: 75px 0;
}
p {
margin: 75px 0;
}
.Parallax {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2);
background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);
background-color: rgb(250,228, 216);
}Как вы видели на последнем шаге, когда вы сохраняете файл, в Save as тип, выберите All Files. Введите имя вашего файла по мере необходимости и добавьте расширение.css к нему.
Анализ кода
Давайте разберемся, какая часть кода отвечает за эффект параллакса. Наиболее важная работа с параллаксом выполняется с использованием правил перспективы и преобразования. Ссылаться наline 15в приведенном выше фрагменте кода. Перспектива создана для нашихBgContainerпервый. Это инициирует платформу для правила преобразования.
в Parallax контейнер, начинающийся на линии 40, transform Правило в строке 48 переводит div BgContainer в фон с помощью translate (-1px).
Вы можете изменить значения параметров translate и scale, чтобы изменить глубину параллакса.
Когда вы откроете файл html, будет виден эффект параллакса, как показано ниже -
Note - В оставшейся части учебника предполагается, что читатель может создавать файлы HTML и CSS в соответствии со структурой папок, представленной в приведенном выше методе.
Метод множественного фона
В этом методе у нас будут разные изображения, когда пользователь прокручивает страницу вниз. Есть изображение с карандашами, которое использовано в разных цветовых сочетаниях для иллюстрации этого эффекта.
Обратите внимание на следующий код для HTML-страницы, как показано ниже -
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1>Multiple Background Example</h1>
<div class = "parallax">
<div class = "bg__First">First</div>
<div class = "bg__Second">Second</div>
<div class = "bg__Third">Third</div>
<div class = "bg__Fourth">Fourth</div>
</div>
</body>
</html>Как и в предыдущем примере, мы будем использовать styles.cssхранится в том же месте, что и этот HTML-файл. У нас есть три разных блока с именами Первый, Второй, Третий и Четвертый.
Код CSS для прокрутки параллакса приведен ниже -
body, html {
height : 100%;
font-family : sans-serif;
}
.parallax [class*="bg__"] {
position : relative;
height : 50vh;
text-indent : -9999px;
background-attachment : fixed;
background-position : top center;
background-size : cover;
}
.parallax [class*="bg__"]:nth-child( 2n) {
box-shadow : inset 0 0 1em #111;
}
.parallax .bg__First, .bg__Fourth {
height : 100vh;
}
.parallax .bg__First {
background-image : url("parallax0.png");
}
.parallax .bg__Second {
background-image : url("parallax1.png");
}
.parallax .bg__Third {
background-image : url("parallax2.png");
}
.parallax .bg__Fourth {
background-image : url("parallax1.png");
}Здесь мы создаем эффект параллакса из строки 7, здесь важное свойство background-attachment:fixed.
Используя это свойство, первое изображение с цветными карандашами всегда будет вверху. По мере прокрутки вниз будут появляться разные изображения, как описано в строке 28.
В результате вы сможете увидеть эффект параллакса, как показано на гифке ниже. Следующее изображение - это скриншот примера, который мы рассмотрели для нескольких фонов.
Чистый CSS Parallax
Давайте объединим знания из предыдущих двух методов и создадим продвинутый эффект Pure CSS Parallax.
Разница будет в том, как мы устроим image элемент и z-transformсвойство. Объяснение свойства будет предоставлено после кода CSS.
Создайте HTML-файл со следующим кодом, используя обычный метод из Блокнота.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "wrapParallax">
<div class = "parallax_one">
<img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">
</div>
<div class = "parallax_two">
<h1>Pure CSS Parllax Advanced Level</h1>
</div>
<div class = "parallax_three">
<img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">
</div>
</div>
</body>
</html>Для файла CSS код приведен ниже -
body, html {
padding: 0;
margin: 0;
}
h1 {
color: blue;
text-align: center;
padding: 20px;
text-shadow: 0px 0px 10px #fffff;
}
img {
width:100vw;
height:100vh;
}
.wrapParallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.parallax_one {
transform: translateZ(-100px) scale(2)
}
.parallax_two {
z-index: 10;
transform: translateZ(-200px) scale(3)
}
.parallax_three {
margin-top: 100vh;
}Анализ кода
Мы зафиксировали положение первого слоя в line 26 используя position:absoluteсвойство. Позиции также жестко запрограммированы на 0.
В parallax_two, который является слоем с заголовком, мы применили z-index: 10для создания эффекта плавания заголовка. Слойparallax_three перемещается вниз с помощью свойства margin-top.
Таким образом, мы можем повысить уровень сложности нашего эффекта Parallax.
Наблюдайте за эффектом, как показано на рисунке ниже.
Наиболее популярным методом создания эффекта параллакса является использование JavaScript. Начиная с этой главы, мы обсудим концепции JavaScript и некоторых библиотек, используемых для параллакс-прокрутки.
Использование чистого JavaScript имеет смысл для поддержания оптимальной производительности веб-сайта. Есть много других преимуществ использования библиотек с точки зрения производительности. Однако, чтобы лучше понять организацию кода, мы начнем с чистой реализации параллакса JavaScript. Интересный факт, иногда чистый JavaScript также называютvanilla JavaScript.
Параллаксная прокрутка с использованием чистого JavaScript
Сначала создайте основной HTML-файл с кодом, показанным ниже. HTML-страница будет состоять из четырех заголовков.
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>Обратите внимание, что в строке 4 для этого примера мы используем myscripts.js файл, который будет храниться в той же папке, что и файл HTML и файл CSS.
Теперь давайте подготовим наш файл CSS, как показано ниже.
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}Теперь идет часть JavaScript, создайте файл в блокноте и сохраните его как myscripts.js .
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});Анализ кода
Разберем код JavaScript.
Код из line number 1 to 4 представляет вспомогательную функцию.
В строке 6 мы выбираем наш элемент параллакса и добавляем scrollсобытие в окно. Чтобы определить, сколько области прокручивается, мы используемscrolledHeightсвойство. Когда экран прокручивается вниз,backgroundPositionY обновляется для элемента параллакса.
Чтобы замедлить эффект параллакса, мы разделили его на 1,5, это число можно изменить на любое число, которое вы хотите.
Теперь вы сможете увидеть, как страница прокручивается вниз, как показано на скриншоте ниже.
Использование библиотеки ScrollMagic JavaScript
Как обсуждалось в предыдущем разделе, хотя мы можем использовать чистый JavaScript для создания эффекта параллакса, есть несколько мощных библиотек JavaScript, которые улучшат взаимодействие с пользователем. ScrollMagic - одна из таких библиотек для создания взаимодействий параллакс-прокрутки.
Давайте обсудим это подробнее с помощью примера, приведенного ниже -
Note- В этом примере для простоты мы будем хранить CSS в файле HTML. Кроме того, код JavaScript будет присутствовать в том же документе. Вкратце, мы создадим только один HTML-файл, и на него будут ссылаться библиотеки ScrollMagic вместе с требуемым CSS.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>Как показано в приведенном выше коде, нам потребовались ссылки на библиотеки JavaScript из line 3 to 6. Код CSS указан в строках с 9 по 19.
Сеть доставки контента
Ссылки сценария со строк 3 по 6 указывают на URL-адреса сети доставки контента (CDN) ScrollMagic. Использование CDN имеет смысл при разработке современных веб-сайтов, поскольку вы можете загружать необходимые библиотеки, не замедляя работу своего веб-сайта.
Если в библиотеках требуются настройки, нужно будет разместить библиотеки на соответствующем сервере, чтобы использовать эти эффекты. Если вы используете базовые функции из библиотеки, эффективно использовать URL-адрес CDN.
Приведенный выше HTML-код показывает изображение, разделенное двумя разделами. Первый раздел появляется с заголовком -These are bricks и второе деление появляется с - Some More Bricks.
Обратите внимание, что в коде CSS со строк с 9 по 19 мы указываем только позицию и стиль для соответствующего div с параллаксом.
Работа по созданию этого мягкого параллакса sceneвыполняется библиотекой ScrollMagic. Если вы обратитесь к коду сценария со строк 43 по 62, ScrollMagiccontroller вызывается и scene создано.
Сцены направляют модель DOM для создания эффекта параллакса, когда занято 80% экрана. JavaScript используется для понимания триггера прокрутки. В результате вы получаете плавающий опыт на этой странице.
Note - Рассматривая изображение выше как изображение в формате GIF, вы не заметите плавного эффекта разделения текста.
Триггерные анимации
Возможности создания разнообразного пользовательского опыта безграничны с помощью ScrollMagic Library. Обратите внимание на приведенные ниже фрагменты кода, чтобы запускать анимацию при прокрутке.
Учтите, что для этого вам понадобятся два файла * минус; один файл HTML и один файл CSS.
Создайте HTML-файл с кодом, показанным ниже -
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>Теперь создайте файл CSS со следующим кодом.
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}Анализ кода
Что касается HTML-кода, код ScrollMagic начинается с line 17 и продолжается до line 25. В этом разделе мы создаем две сцены ScrollMagic. Первая сцена предназначена для изображения кирпича, а вторая - для анимации баннера.
Как указано в setTween функционировать на line 20, когда действие прокрутки происходит на 40% от размера экрана, начинается следующая сцена, в которой отображается баннер. Вот и все!
Непрозрачность div с идентификатором - square контролируется в файле CSS на line 10 и line 15.
В результате вы увидите на странице приведенную ниже анимацию.
Горизонтальная прокрутка
Мы также можем применить параллаксную прокрутку и добиться горизонтальной прокрутки. Библиотеку ScrollMagic можно использовать для создания горизонтального эффекта прокрутки. См. Код ниже.
Хотя код прост для создания эффекта горизонтальной прокрутки, нам понадобится ссылка jquery для достижения горизонтального перемещения экранов. Подробная информация о jQuery представлена в следующей главе, а пока просто следуйте приведенному ниже коду.
Мы создадим три отдельных файла - HTML-файл для основного кода, CSS-файл для стилей и JS-файл для вызовов функций ScrollMagic.
Вот код для HTML-документа.
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>Обратите внимание, что у нас есть три раздела, которые появятся после прокрутки. Три раздела обозначаются идентификаторами title1, title2 и title3 в строках 15, 19 и 23 соответственно.
Код для документа CSS приведен ниже -
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}Анализ кода
Цвета фона для трех экранов (или разделов) представлены на lines 10, 22 и 25.
Мы вычисляем относительную ширину каждого экрана в коде, начиная с line 13.
Код JavaScript для ScrollMagic приведен ниже -
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});Обратите внимание на triggerHookсвойство в строке 8. Это свойство отвечает за обеспечение эффекта прокрутки, когда пользователь достигает завершения события прокрутки. ФункцияTimelineMax отвечает за обеспечение эффекта горизонтальной прокрутки на наших экранах.
После создания соответствующих файлов вы сможете увидеть анимацию горизонтальной прокрутки, как показано ниже.
В предыдущих главах мы поняли, как хорошие эффекты с использованием библиотек JavaScript добавляют на сайт. JavaScript в сочетании с Photoshop обеспечивает феноменальную гибкость и легкость добавления параллаксной прокрутки на ваш сайт.
В этой главе мы рассмотрим три плагина Photoshop для добавления эффекта параллаксной прокрутки. Подобно тому, как мы упоминали в предыдущей главе для JavaScript, мы собираемся использовать ссылки Photoshop в нашем HTML-коде для создания мощной параллаксной прокрутки Photoshop.
Важно отметить, что плагины Photoshop часто не обновляются, поэтому вам следует провести небольшое исследование, прежде чем начинать использовать какие-либо плагины для параллакс-прокрутки.
Parallax Scrolling с использованием простого Parallax.js
Parallax.js с помощью плагина Photoshop, мы можем создать эффект параллаксной прокрутки без особых проблем. Учитывая, что плагин jQuery требует включения высокопроизводительных библиотек, таких как bootstrap. Обратите внимание, что в этой главе в коде будут теги HTML5.
Давайте посмотрим на HTML-файл, показанный ниже -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>Код анализа
В приведенных выше фрагментах кода показан код страницы с двумя изображениями и образцом текста между ними.
Как видите, код начинается с <!DOCTYPE html>Это типичный способ сообщить браузерам, что код основан на HTML5.
то <meta> теги из line 4 to 6показывает код, который является машиной для интерпретации. Вы не сможете увидеть влияние этого кода. Здесь важно отметить:meta тег, веб-разработчики получают расширенный контроль над отображаемыми данными.
Также на line 8 and 9, Мы включили таблицы стилей CSS вместе с Bootstrap. Bootstrap - это широко используемая библиотека для определенного шрифта и типографики.
Lines 10 and 11позаботьтесь о библиотеках Photoshop и Parallax.js. Важно включить контроль над Parallax.js, чтобы получить эффект параллаксных изображений. Вы сможете найтиdata-parallax собственность с div на line 21, Этого достаточно, чтобы вызвать библиотеку parallax.js для получения требуемого эффекта параллакса.
Эффект параллакса можно увидеть в коде на lines 21 и line 40. Важные свойства, которые делают этот эффект с помощью parallax.js:data-parallax, data-image-src, data-natural-width, data-natural-height.
В файле CSS мы должны предоставить только одно свойство. Это как показано ниже -
.parallax-container {
height: 500px;
width: 100%;
}В приведенном выше коде HTML мы создали особую структуру для файлов CSS. У нас будет папка с названиемcss, в котором будут файлы CSS - bootstrap.min.css и style.css.
Как только все будет готово с документами, вы сможете увидеть эффект параллакса, как показано ниже -
Параллаксатор с использованием плагина Photoshop
Плагин Parallaxator best of Photoshop обеспечивает эффекты прокрутки параллакса и прост в использовании. Вы можете скачать плагин Parallaxator, его файлы CSS и JS по этой ссылке - Parallaxator GitHub .
После загрузки файлов CSS и JS вы можете использовать показанный ниже код для создания HTML-кода.
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>Код анализа
Эффект параллакса обеспечивается классом parallax_child, который предоставляется с каждым тегом img. Parallax_child связан с файлами CSS и JS, которые представлены ниже.
Для работы плагина parallaxator мы включили fm.parallaxator.jquery.css и fm.parallaxator.jquery.js. Эти файлы должны быть доступны в том же каталоге, что и файл HTML.
Код для CSS показан ниже -
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}В результате использования приведенного выше кода вы сможете увидеть эффект параллакса.
Плагин Stellar.js jQuery для параллакс-прокрутки
Stellar.js - еще одно дополнение к списку плагинов для Photoshop с параллаксом. Хотя он больше не поддерживается, разработчики, которые использовали его стабильную сборку, могут с легкостью использовать эффект прокрутки параллакса. Он совместим с последними версиями Photoshop и прост в реализации.
Вам нужно будет загрузить последнюю версию jquery.stellar.js с официального сайта плагина Stellar.js . После загрузки создайте этот файл плагина в той же папке, что и ваши файлы HTML и CSS.
Давайте посмотрим на HTML-код.
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>Код анализа
Чтобы Stellar.js работал, мы включили библиотеку сразу после ссылки на плагин Photoshop в jquery.stellar.js. line 6.
Функции для Stellar parallax вызываются в теге скрипта из line 8 to line 15. С собственностьюdata-stellar-background-ratio, Мы устанавливаем смещение для отображаемых изображений. Это сделано наlines 19,20,21 and 22.
Код CSS приведен ниже -
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}После создания обоих файлов и stellar.js файл плагина будет включен в одну папку, вы сможете увидеть эффект, как показано на скриншоте ниже -
Bootstrap - это популярный фреймворк с множеством готовых компонентов на выбор. Bootstrap может оптимизировать код для реализации параллаксной прокрутки.
В этой главе на примере Давайте обсудим, как мы собираемся использовать компонент Jumbotron для реализации параллаксной прокрутки.
Полная страница с Parallax Bootstrap4 Jumbotron
Представьте себе веб-сайт, на котором пользователь отображается с большим окном с призывом к действию с содержанием, касающимся скидки или распродажи. Обычно Jumbotron находит свое применение в таких местах. Это большая коробка, которая полезна для привлечения внимания пользователя.
Поскольку мы используем только один компонент Bootstrap, мы не будем создавать отдельный файл CSS для этого примера. Давайте погрузимся прямо в HTML-код.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Код анализа
то line 64 ссылки на библиотеку Bootstrap. Мы указываем поля и радиус границы для Jumbotron отline 8 to 11.
Как мы видим на line 33, Мы создаем div с классом Jumbotron, чтобы показать большой блок, в который мы будем загружать наше конкретное изображение. Обратите внимание, что на этот раз прямого URL-адреса для изображения нет, мы будем использовать загруженное изображение. Вы можете скачать любые изображения с высоким разрешением для своего примера и указать их вline 16.
Результат, который вы можете увидеть при выполнении приведенного выше кода, показан ниже -
В этом уроке мы изучили различные библиотеки для создания параллаксной прокрутки. Мы рассмотрели все аспекты от базового уровня до продвинутого, где мы использовали CSS Bootstrap, где мы использовали для разработки интерфейса. Мы предлагаем вам применить свои творческие навыки, чтобы создать веб-страницу, которую трудно игнорировать. Помните, что в Интернете есть множество примеров параллаксной прокрутки, которые могут вдохновить вас.
Использование параллакс-прокрутки
Как мы уже обсуждали во вводных главах, вы можете использовать параллакс-прокрутку, чтобы добиться необычного пользовательского опыта. Вот несколько идей для сайта, где вы можете включить параллакс-прокрутку.
Хронология веб-сайта
На сайтах такого типа обычно есть история, чтобы рассказать о продукте, компании или о чем-то еще. Вы можете создать эффект параллакса, чтобы рассказать посетителю историю и заинтересовать его различными анимациями.
Для сайта с временной шкалой целесообразно создать фон и отображать текстовое содержимое на переднем плане. Вы можете объединиться с графическим дизайнером для создания графики, которая идет рука об руку с фоном.
Сайт мобильного приложения
В настоящее время мобильное приложение является обязательным условием для предложения любых продуктов / услуг. Есть много стартапов, которые хотят создать веб-сайт мобильного приложения, который объясняет, что мобильное приложение может и не может.
Магазин приложений Apple, известный своими строгими правилами создания приложений, требует, чтобы у мобильного приложения был веб-сайт поддержки. Этот веб-сайт всегда должен быть привлекательным и удобным для пользователей.
Используя прокрутку Parallax, вы можете использовать мобильное изображение и показывать различные типы функций, когда пользователь прокручивает страницу вниз. Один из таких примеров уже обсуждался в главе 4 этого руководства.
Эффекты наведения мыши
Вы можете использовать мощь параллаксной прокрутки и наведения указателя мыши, чтобы создать следующий уровень анимации. Наведя курсор мыши, вы можете управлять направлением прокрутки и создавать эффект параллакса.
Таким образом, есть много возможностей для создания отличного опыта. Все, что вам нужно, - это идея и правильный набор инструментов и библиотек.
Будущее веб-интерфейса
Благодаря мощности технологий и творческим элементам, таким как параллаксная прокрутка, существует невиданная ранее конкуренция за создание потрясающих пользовательских интерфейсов. Это не только для веб-сайтов, но и для мобильных сайтов.
Хотя веб-интерфейс в настоящее время находится на пике, наличие веб-страницы, совместимой с мобильным устройством, требует времени. Как мы видели в примерах для Bootstrap и jQuery, веб-сайт не может прожить долгую жизнь, если они не поддерживаются на портативных устройствах.
Наряду с существующими библиотеками будущее пользователей с нетерпением ожидает искусственного интеллекта и виртуальной реальности. Некоторые веб-страницы можно просматривать с помощью устройства виртуальной реальности. В такой ситуации действительно имеет смысл поддерживать связь с последними плагинами, а также искать новые.
Вы применяете знания, полученные в этом руководстве, для создания лучшего пользовательского опыта, я желаю вам удачи и успехов в вашем пути веб-разработки!