Съдържание
В момента имаме голямо разнообразие от уеб страници, които могат да внедряват различни дизайнерски модели, които могат да варират от класически плосък дизайн или иновативен нов материален дизайн.
Но има доста различен и особен начин за създаване на уебсайтове, уебсайтове, които са само информативни и нямат много сложна функционалност като такава. За тези случаи можем да използваме уебсайт с една страница, който реализира ефекта Паралакс.
Този ефект ни дава усещането, че имаме множество равнини и дори множество страници в едно. Нека видим тогава как можем да го приложим.
HTML код
Нашите HTML Той ще се състои от доста проста структура, съставена от div, които ще идентифицираме като контейнери според определени класове, в допълнение към това ще включим нашите стилови таблици по обичайния начин, както и нашите JavaScript. За този пример ще разчитаме и на двете jQuery като Underscore.js която е библиотека, която ни предоставя няколко функционалности, които ще ни помогнат с това упражнение:
Домашен ПаралаксSkyfall
Филм 1
Професионалистът
Филм 2
Резервоарни кучета
Филм 3
CSS код
За нашия стилов лист ще работим още малко, ще използваме свойствата на CSS3 по отношение на трансформира за да дадем ефект на преместване нагоре или надолу по нашия фон, в допълнение към това ще използваме потомците на нашия документ, за да присвоим различни фонови изображения, които ще служат като множество страници, нека видим този фрагмент от нашия CSS:
. background {background-size: cover; фон-повторение: без повторение; фон-позиция: център център; преливане: скрито; воля-промяна: трансформиране; -webkit-backface-visibility: скрит; видимост отзад: скрит; височина: 130vh; позиция: фиксирана; ширина: 100%; -webkit-преобразуване: translateY (30vh); -ms-transform: translateY (30vh); преобразуване: translateY (30vh); -webkit-преход: всички 1.2s кубик-безие (0.22, 0.44, 0, 1); преход: всички 1.2s кубик-безие (0.22, 0.44, 0, 1); }. background: before {content: ""; позиция: абсолютна; ширина: 100%; височина: 100%; отгоре: 0; ляво: 0; вдясно: 0; дъно: 0; цвят на фона: rgba (0, 0, 0, 0.3); }. фон: първо дете {background-image: url (skyfall.jpg.webp); -webkit-преобразуване: translateY (-15vh); -ms-преобразуване: translateY (-15vh); преобразуване: translateY (-15vh); }. фон: първо дете .content-wrapper {-webkit-transform: translateY (15vh); -ms-преобразуване: translateY (15vh); преобразуване: translateY (15vh); }. фон: nth-child (2) {background-image: url (theprofessional.jpg.webp); }. фон: nth-child (3) {background-image: url (reservoirdogs.png.webp); }. фон: nth-child (1) {z-index: 3; }. фон: nth-child (2) {z-index: 2; }. фон: 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; семейство шрифтове: Montserrat; преобразуване на текст: главни букви; -webkit-преобразуване: translateY (40vh); -ms-transform: translateY (40vh); преобразуване: translateY (40vh); воля-промяна: трансформиране; -webkit-backface-visibility: скрит; видимост отзад: скрит; -webkit-преход: всички 1.7s кубик-безие (0.22, 0.44, 0, 1); преход: всички 1.7s кубик-безие (0.22, 0.44, 0, 1); } .content-title {font-size: 12vh; височина на линията: 1,4; } .background.up-scroll {-webkit-transform: translate3d (0, -15vh, 0); преобразуване: translate3d (0, -15vh, 0); }. background.up-scroll .content-wrapper {-webkit-transform: translateY (15vh); -ms-преобразуване: translateY (15vh); преобразуване: translateY (15vh); }. background.up-scroll + .background {-webkit-transform: translate3d (0, 30vh, 0); преобразуване: translate3d (0, 30vh, 0); }. background.up-scroll + .background .content-wrapper {-webkit-transform: translateY (30vh); -ms-преобразуване: translateY (30vh); преобразуване: translateY (30vh); } .background.down-scroll {-webkit-transform: translate3d (0, -130vh, 0); преобразуване: 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); преобразуване: translate3d (0, -15vh, 0); }. background.down-scroll +. background: not (.down-scroll) .content-wrapper {-webkit-transform: translateY (15vh); -ms-преобразуване: translateY (15vh); преобразуване: translateY (15vh); }
JavaScript код
Най -накрая в нашия JavaScript ще се справим какви са слушател на нашите събития, тоест да знаем кога потребителят използва превъртането на мишката, за да превърта уеб страницата. В допълнение към това ще открием използвания браузър и ще установим някои постоянни стойности, като например продължителността, която плъзгачът трябва да има, преди да може да бъде променен отново, чувствителността на превъртането и броя на страниците, които ще имаме.
var time = false; var isFirefox = (/Firefox/i.test(navigator.userAgent)); var isInternetE = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent)); вар чувствителност Скрол = 30; var durationSliders = 600; var sliderActual = 0; var sliderTotales = $ (". background"). length; функция parallaxeffect (evt) {if (esFirefox) {delta = evt.detail * (-120); } иначе if (esInternetE) {delta = -evt.deltaY; } else {delta = evt.wheelDelta; } if (time! = true) {if (delta = ScrollSensitivity) {time = true; if (currentSlider! == 0) {currentSlider--; } previousItem (); durationSliderTime (durationSliders); }}}И накрая, ще установим времето, през което изображението трябва да бъде фиксирано, за да премине към следващото, както и слушателите на нашите събития. Освен това ще използваме функцията за добавяне или премахване на клас, за да знаем кога едно от изображенията е най -долу или отгоре:
функция timeSliderDuration (slideDuration) {setTimeout (function () {time = false;}, slideDuration); } var eventScrollMouse = Firefox ли е? "DOMMouseScroll": "колело"; window.addEventListener (събитие ScrollMouse, _.throttle (ефект на паралакс, 60), невярно); функция eleNext () {var $ slidePrevious = $ (". background"). eq (currentSlider - 1); $ slideAnterior.removeClass ("нагоре превъртане"). addClass ("надолу превъртане"); } функция previousItem () {var $ slideSig = $ (". background"). eq (currentSlider); $ slideSig.removeClass ("надолу превъртане"). addClass ("нагоре превъртане"); }Когато кодът ни е завършен, остава само да тестваме работата на нашето приложение, за това трябва само да използваме превъртането на мишката, за да видим поведението, нека видим:
Този ефект дава съвсем свежо усещане на нашите сайтове, но е препоръчително да го използвате в определени приложения, като портфолио или информационни страници, тъй като всеки друг уебсайт, който обработва други видове процеси или информация, ще измори потребителя и ще загуби интерес към него …
