В настоящее время у нас есть широкий спектр веб-страниц, которые могут реализовывать различные шаблоны дизайна, которые могут варьироваться от классического плоского дизайна или нового и инновационного дизайна материалов.
Но есть совершенно другой и особенный способ создания веб-сайтов, веб-сайтов, которые являются просто информативными и не имеют очень сложной функциональности как таковой. Для этих случаев мы можем использовать одностраничный веб-сайт, который реализует эффект параллакса .
Этот эффект дает нам ощущение, что у нас есть несколько плоскостей и даже несколько страниц в одной. Посмотрим, как мы можем это реализовать.
HTML код
Наш HTML будет состоять из довольно простой структуры, состоящей из div, который мы будем идентифицировать как контейнеры в соответствии с определенными классами, в дополнение к этому мы будем включать наши таблицы стилей обычным способом, а также наш JavaScript . В этом примере мы будем полагаться как на jQuery, так и на Underscore.js - библиотеку, которая предоставляет нам несколько функций, которые помогут нам в этом упражнении:
Домашний ПараллаксSkyfall
Фильм 1
Профессионал
Фильм 2
Бешеные псы
Фильм 3
Код CSS
Для нашей таблицы стилей мы будем работать немного больше, мы будем использовать свойства CSS3 в отношении преобразований, чтобы дать эффект перемещения вверх или вниз по фону, в дополнение к этому мы будем использовать дочерние элементы нашего документа для назначения различных изображений фон, который будет служить нашими несколькими страницами, давайте посмотрим на этот фрагмент нашего CSS :.background {background-size: cover; повторение фона: без повтора; background-position: центр центра; переполнение: скрытое; воля-изменение: трансформация; -webkit-backface-visibility: скрытый; видимость задней поверхности: скрытая; высота: 130vh; положение: фиксированное; ширина: 100%; -webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); преобразование: translateY (30vh); -вебкит-переход: все 1, 2 с куб. Безье (0, 22, 0, 44, 0, 1); переход: все 1, 2 с куб. Безье (0, 22, 0, 44, 0, 1); } .background: before {content: ""; положение: абсолютное; ширина: 100%; высота: 100%; верх: 0; слева: 0; справа: 0; низ: 0; цвет фона: rgba (0, 0, 0, 0.3); } .background: first-child {background-image: url (skyfall.webp); -webkit-transform: translateY (-15vh); -ms-transform: translateY (-15vh); transform: translateY (-15vh); } .background: first-child .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); } .background: nth-child (2) {background-image: url (theprofessional.webp); } .background: nth-child (3) {background-image: url (servoirdogs.webp); } .background: nth-child (1) {z-index: 3; } .background: nth-child (2) {z-index: 2; } .background: nth-child (3) {z-index: 1; }Чтобы закончить с нашей таблицей стилей, мы применим некоторые изменения к тексту, который будет включен в каждый контейнер, а также переход, который каждый из них должен сделать в соответствии с прокруткой, которую мы делаем на веб-сайт, указывая, движемся ли мы вверх или вниз.content-wrapper {высота: 100vh; дисплей: -webkit-box; дисплей: -webkit-flex; дисплей: -ms-flexbox; дисплей: гибкий; -webkit-box-pack: центр; -webkit-justify-content: центр; -ms-flex-pack: центр; justify-content: центр; выравнивание текста: по центру; -webkit-flex-flow: колонка nowrap; -ms-flex-flow: колонка nowrap; flex-flow: колонка nowrap; цвет: #fff; семейство шрифтов: Монтсеррат; преобразование текста: верхний регистр; -webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); преобразование: translateY (40vh); воля-изменение: трансформация; -webkit-backface-visibility: скрытый; видимость задней поверхности: скрытая; -Вебкит-переход: все 1, 7 куб. Безье (0, 22, 0, 44, 0, 1); переход: все 1, 7 с куб. Безье (0, 22, 0, 44, 0, 1); } .content-title {font-size: 12vh; высота строки: 1, 4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); transform: translate3d (0, -15vh, 0); } .background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); } .background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); transform: translate3d (0, 30vh, 0); } .background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-transform: translateY (30vh); преобразование: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); transform: translate3d (0, -130vh, 0); } .background.down-scroll .content-wrapper {-webkit-transform: translateY (40vh); -ms-transform: translateY (40vh); преобразование: translateY (40vh); } .background.down-scroll + .background: not (.down-scroll) {-webkit-transform: translate3d (0, -15vh, 0); transform: translate3d (0, -15vh, 0); } .background.down-scroll + .background: not (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-transform: translateY (15vh); transform: translateY (15vh); }Код JavaScript
Наконец, в нашем JavaScript мы будем обрабатывать, какие слушатели наших событий, то есть знать, когда пользователь использует прокрутку мыши для прокрутки сайта. В дополнение к этому мы обнаружим используемый браузер и установим некоторые постоянные значения, такие как продолжительность, которую должен иметь ползунок, прежде чем его можно будет снова изменить, чувствительность прокрутки и количество страниц, которые у нас будут.var time = false; var is Firefox = (/ Firefox / i.test (navigator.userAgent)); var esInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); переменная чувствительность Scoll = 30; var durationSliders = 600; ползунок var Actual = 0; var sliderTotals = $ (". background"). length; функция effect Parallax (evt) {if (esFirefox) {delta = evt.detail * (-120); } else if (esInternetE) {delta = -evt.deltaY; } else {delta = evt.wheelDelta; } if (time! = true) {if (delta =itivityScroll) {time = true; if (sliderActual! == 0) {sliderActual--; } previousItem (); duracionSliderTiempo (duracionSliders); }}}Наконец, мы установим время, когда изображение должно быть зафиксировано, чтобы перейти к следующему, а также слушателя наших событий, кроме того, мы будем использовать функцию добавления или удаления класса, чтобы узнать, когда одно из изображений находится внизу или вверху. :function duracionSliderTiempo (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = esFirefox? "DOMMouseScroll": "колесо"; window.addEventListener (событие crollMouse, _.throttle (эффект Параллакса, 60), false); function eleNext () {var $ slidePrevious = $ (". background"). eq (sliderActual - 1); $ slideAnterior.removeClass («прокрутка вверх»). addClass (прокрутка вниз); } function previousItem () {var $ slideSig = $ (". background"). eq (sliderActual); $ slideSig.removeClass ("прокрутка вниз"). addClass ("прокрутка вверх"); }Закончив наш код, мы можем только протестировать работу нашего приложения, для этого нам нужно только использовать прокрутку мыши, чтобы увидеть поведение, давайте посмотрим:
Этот эффект дает нашим сайтам довольно свежее ощущение, однако желательно использовать его в определенных приложениях, таких как портфолио или информационные страницы, так как некоторые другие веб-сайты, которые обрабатывают другие типы процессов или информацию, заставят пользователя устать и потерять к нему интерес.,
СТАТЬИ