03:33 Параллакс-скроллинг и его применение в веб-дизайне | |
| Параллакс-эффект, также называемый параллакс-скроллингом, представляет собой особую технику, используемою в первую очередь в компьютерной графике, когда фоновые изображения в перспективе двигаются медленнее, чем двигаются элементы, расположенные на переднем плане. Сегодня подобная техника очень актуальна и распространена в области веб-дизайна. Раньше она была широко применима в игровой индустрии (10-15 лет назад). В последние годы параллакс-скроллинг все чаще применяется в веб-дизайне. Популярность данного подхода стала расти с тех пор, когда компания Nike обновила дизайн своего сайта, и использовала данную идею. Ниже в подборке вы сможете увидеть данный пример. Технология эта прижилась в сфере дизайна только потому, что она выглядит действительно креативно и круто. Несмотря на растущую популярность, этот эффект всегда можно реализовать как-то по особому и очень успешно. Иногда, при прокрутке, фоновое изображение также изменяется, но это не обязательное требование. Лучшая сторона данного эффекта заключается в том, что он состоит из нескольких слоев изображений, которые как бы «наложены» друг на друга, и все они двигаются с разной скоростью, что создает эффект трехмерного пространства. Хотя зачастую данный эффект применяют именно подобным образом, это вовсе не означает, что вы ограничены лишь созданием искусственного трехмерного эффекта. Его также можно применять к различных иконкам, изображениям и другим элементам на странице, что в значительной степени увеличивает взаимодействие посетителей с сайтом. Когда они видят этот эффект в первый раз, им кажется, что этот эффект очень интересный. Но после того, как они проведут больше времени на сайте, где используется параллакс-эффект, они понимают, что это нечто большее, чем просто «интересный». Проблемы с производительностью Хотя эффект и выглядит превосходно, у него есть некоторые отрицательные стороны, как например проблемы с производительностью. В те времена, когда Nike создали собственный веб-сайт с использованием данного эффекта, это было реализуемо только посредством применения javascript/jQuery, что в значительной степени утяжеляло страницу, и понижало скорость ее загрузки. Но тогда недостатки в производительности списывали за счет превосходного внешнего вида сайта. Это означало, что удобство пользования сайтом напрочь пропадало, так как он загружался неимоверно медленно. Это и стало самой большой проблемой. javascript сложно воспроизводить, так как технология должна управлять расположением всех элементов на странице. Хотя это и не кажется такой уж и сложной задачей, на самом деле это очень сложно. javascript нужно проводить вычисления для каждого пикселя на странице сайта, который прокручивают скроллингом. В зависимости от скорости прокрутки страницы, количество вычислений может достигать 100 в секунду. И учтите, что каждый элемент на странице управляется javascript в то же время, когда и проводятся вычисления. Не удивительно, что эффект параллакс было не только сложно разрабатывать, но и так же сложно подгрузить, если соединение с интернетом было медленным. Многие разработчики не рекомендуют прикреплять данный эффект к более чем 2-м элементам на странице. Несколько лет назад, нужно было обязательно тестировать страницы на компьютерах средней мощности до того, как запускать их на сайте. Технологии новой эры Хотя данный эффект не так-то просто разработать, существуют различные решения. С выходом CSS3, создание эффекта параллакс в значительной степени облегчилось. Суть проста. Весь ваш контент размещен на одной странице, и перемещение по «под-страницам» осуществляется посредством CSS3-перехода. В целом, это принцип работы старой доброй техники с переходом по якорным ссылкам, но на этот раз к этому добавляется переход. Ниже вы можете видеть отличный пример!  Как вы могли заметить, весь контент размещен на одной и той же странице, и перемещение от одной «страницы» к другой происходит посредством CSS3-перехода. Это почти такой же эффект, что и параллакс, но в бесконечное количество раз легче с точки зрения загруженности страниц в браузере. Но здесь все-таки есть некоторое отличие. Насколько нам известно, практически невозможно (или по крайней мере очень сложно) заставить элементы одной и той же страницы двигаться с разной скоростью, если использовать CSS3-переход. Это значит, что настоящий параллакс эффект невозможно полноценно скопировать за счет свойств только лишь CSS3. Здесь также есть еще один недостаток – CSS3 не поддерживается некоторыми современными браузерами. По крайней мере, пока что. Это означает, что для создания полноценного эффекта параллакс все равно пока еще необходимо использовать javascript. javascript в деле : jQuery-эффект параллакс-скроллинга  Данный плагин позволяет привязывать параллакс-эффект к скроллингу и колесику мыши с помощью jQuery. Это позволит вам сделать так, чтобы фоновое изображение или любой другой элемент на странице двигался со скоростью отличной от скорости прокрутки страницы, что создает иллюзию глубины. : Scrolldeck  Данный плагин позволит вам без труда создавать параллакс-эффект при прокрутке веб-страниц. : jParallax  jParallax описывают как jQuery-плагин, который превращает элементы на странице в абсолютно позиционированные слои, которые двигаются в соответствии с передвижением мыши. Слои перемещаются на разной скорости, и это зависит от их размеров. : jQuery Scroll Path  Этот плагин наиболее походит для ваших нужд. Он поможет вам создать схожий параллакс-эффект за счет заранее предустановленных путей. Даже если его сложно назвать очень удобным в дизайне, он в любом случае сделает вашу страницу очень привлекательной и интерактивной. Обучающие статьи посвященные параллакс-скроллингу Если вы хотите научиться создавать параллакс-эффект самостоятельно, то мы собрали для вас несколько обучающих статей. : Parallax Scrolling: An Introduction (Знакомство с Parallax Scrolling)  : Parallax Slider with jQuery (Параллакс-скроллинг на jQuery)  : Building a Parallax Scrolling Story Framework (Разрабатываем платформу с прокруткой в стиле параллакс)  : Parallax Animated Header Tutorial (Обучающая статья по разработке шапки сайта, анимированной в стиле параллакс)  : Build a Parallax Scrolling Website Interface With jQuery and CSS (Создание интерфейса веб-сайта в стиле параллакс-скроллинга на jQuery и CSS)  : Fluid CSS3 Slideshow with Parallax Effect (Резиновый CSS3-слайд-шоу с эффектом параллакса)  Заключение Хотя этот эффект считается довольно популярным, его до сих пор не так часто можно встретить на просторах интернета, и к этому есть как минимум 2 причины: его сложно разработать с нуля, и браузерам довольно тяжело его генерировать. Если же вы решите воспользоваться упрощенной CSS3-версией, то выглядеть этот эффект будет не совсем так, как следовало бы. Хотя сейчас многие люди восхваляют пытливые умы тех, кто сумел разработать эффект на javascript, пройдет еще много времени до того момента, когда люди будут использовать этот эффект повсеместно, так как сейчас не самое лучшее время для того, чтобы применять его. Даже Nike, компания с неограниченными финансовыми ресурсами, спустя некоторое время решила отказаться от использования данного эффекта, что подтверждает факт того, что, несмотря на привлекательный внешний вид эффекта, его применение вряд ли можно отнести к разряду необходимых задач. Не поймите неправильно. Мы сами любим этот эффект. Мы даже пробовали использовать его в различных проектах. Но однажды мы осознали, что сейчас не то время. Но если вы думаете, что готовы удивить всех собственной версией параллакс-скроллинга, мы хотели бы на это посмотреть! Что вы думаете по поводу этого великолепного эффекта? Использовали ли когда-нибудь в собственных проектах? Не кажется ли вам, что процесс разработки параллакс-эффекта требует слишком много усилий? Подборка примеров параллакс-скроллинга в веб-дизайне  Parallax-эффект на сайте Saucony Kinvara 3  Parallax-эффект на сайте Biamar  Parallax-эффект на сайте Whiteboard  Parallax-эффект на сайте Bomb Girls  Parallax-эффект на сайте Discover Bagigia  Parallax-эффект на сайте KRYSTALRAE  Parallax-эффект на сайте Anna Safroncik  Parallax-эффект на сайте Netlash  Parallax-эффект на сайте Activate  Parallax-эффект на сайте VW  Parallax-эффект на сайте Smart  Parallax-эффект на сайте Laurentius  Parallax-эффект на сайте Artofflight  Parallax-эффект на сайте Nike | |
|
| |
| Всего комментариев: 0 | |
