ІнтэрнэтВэб-дызайн

Паралакс - гэта ... паралакс-эфект: прыклады

У руху паралакс азначае змену месцазнаходжання аб'екта на якім-небудзь фоне адносна назіральніка, які знаходзіцца на месцы. Гэты тэрмін здабыў папулярнасць і ў інтэрнэце. У прыватнасці, цікава глядзіцца сайт, у афармленні якога прысутнічаюць дынамічныя элементы. Паралакс - гэта спосаб афармлення старонкі ў інтэрнэце, які выкарыстоўваецца вэб-майстрамі для прыцягнення вялікай колькасці наведвальнікаў.

Якім бывае паралакс

Паралакс-скролінг можа выкарыстоўвацца вертыкальна, а таксама па прамой лініі. У якасці прыкладу больш за ўсё падыходзіць Nintendo. Шмат хто з нас з настальгіяй успамінаюць кампутарныя гульні, прадстаўленыя рухам галоўных герояў з левай частцы экрана направа. Таксама магчыма перасоўванне ўніз, якое ажыццяўляецца па размешчанай вертыкальна прамой. Эфект паралакс ў сетцы часта выкарыстоўваецца. Для стварэння слаба слайдера можна скарыстацца JavaScript або CSS 3.

Для іх як раз уласцівы апісваны трохмерны прасторавы эфект. Стваральнікамі гульняў было выкарыстана некалькі фонавых слаёў. Яны адрозніваюцца па тэкстуры, пры гэтым рух ажыццяўляецца з рознай хуткасцю.

Не варта думаць, што паралакс - гэта выключна магчымасць стварэння эфекту 3D. На старонцы можна перамяшчаць існуючыя абразкі. Тым больш, гэта выглядае досыць прывабна. Асабліва ўдалым варыянтам з'яўляецца ўжыванне індывідуальнай траекторыі для кожнай з іх. У гэтым выпадку выкарыстоўваюцца розныя абразкі, перамяшчаныя па розных траекторыях. Падобнае афармленне прыцягвае ўвагу.

ажываюць карцінка

Складана знайсці сайт без малюнкаў. Якасна выкананыя і паказальныя малюнкі прыцягваюць наведвальнікаў. Але найбольшую ўвагу выклікаюць рознага роду дынамічныя малюнка. Сапраўды, калі пры наведванні сайта адзначаецца рух, то гэта прыцягвае ўвагу. Істотна павялічваецца верагоднасць вяртання наведвальніка рэсурсу да дынамічнага файлу. А здалося перасоўванне ці не? Таму для прыцягнення наведвальнікаў на сайт варта вывучыць такое паняцце, як паралакс-эфект.

Прыклады сайтаў з рухомымі малюнкамі:

  • hvorostovsky.com;
  • www.kagisointeractive.com.

Як паказана ў прыкладах, ўспрыманне паляпшае раскрываецца на падпункты меню. Падобны элемент эканоміць час наведвальнікаў, таму прывабны для іх.

бібліятэка jQuery

Тэрмінам jQueryParallax вызначаюць аднайменную бібліятэку. Дзякуючы ёй нескладана дамагчыся эфекту руху ў фармаце 3D. У бібліятэцы jQuery трохмернае ўспрыманне ствараецца рознымі спосабамі. Адзін з іх складаецца ў гарызантальным адначасовым перамяшчэнні фонавых аб'ектаў з рознай хуткасцю. Для гэтай бібліятэкі ўласціва наяўнасць вялікай колькасці рознага роду уласцівасцяў. І апісанае тут зрушэнне ўяўляе сабой толькі невялікую частку яе магчымасцяў.

Досыць прывабна глядзіцца сайт, для стварэння якога былі выкарыстаны розныя сучасныя элементы. Адзін з іх - паралакс. Прыклады сайтаў могуць выглядаць такім чынам:

  • www.grabandgo.pt;
  • www.fishy.com.br;
  • www.noleath.com;
  • buysellwebsite.com.

jParallax прадстаўлены пластамі, якія перамяшчаюцца пры руху мышы. Для дынамічных элементаў ўласціва абсалютная пазіцыянаванне (position: absolute;). Кожны з іх характарызуецца уласным памерам і рухам з індывідуальнай хуткасцю. Гэта можа быць тэкст ці малюнак (па жаданні стваральнікаў рэсурсу).

Ўспрыманне сайта членам

Пасля гэтага чалавек звычайна звяртае ўвагу на тое, што старонка аформлена якасна, зручна і з веданнем справы. Гэты факт звычайна выклікае павагу. Бывае, узнікае цікаўнасць выпрабаваць іншыя элементы. У інтэрнэце маецца велізарная колькасць тоесных сайтаў. Як жа зрабіць свой рэсурс асаблівым?

Калі афармленне спадабаецца, то наведвальнік застанецца на большы перыяд. Такім чынам, узрастае верагоднасць таго, што яго прыцягне размешчаная інфармацыя, ён праявіць зацікаўленасць. У выніку чалавек скарыстаецца прапанаванай паслугай, таварам або рэкламным прапановай.

Любімыя старыя гульні

Паняцце «паралакс» павінна быць знаёма ўсім прыхільнікам прыставак 80-90-х гадоў. Гэта тычыцца гульняў:

  1. Mario Bros.
  2. Mortal Kombat.
  3. Streets of Rage.
  4. Moon Patrol.
  5. Turtles in Time.

Гэта значыць паралакс - гэта методыка, якая выкарыстоўваецца дастаткова працяглы перыяд. Названыя гульні сапраўды ўспамінаюцца з нейкай настальгіяй. Бо яны нібы прасякнутыя характарам таго перыяду.

Выявы на экране створаны з выкарыстаннем такой тэхнікі, як паралакс-скролінг. Няма нічога дзіўнага ў тым, што названая методыка здабыла заслужаную папулярнасць. Гэты дызайнерскі канцэпт дастаткова цёпла ўспрымаецца тымі, хто гуляў у 80-90 гады або назіраў за вольным часам сяброў.

Паралакс-скролінг

Маркетолагі вядучых сусветных брэндаў даўно выкарыстоўваюць рознага роду тэхнічныя дасягненні. Такім чынам, становіцца магчымым зацікавіць нават выпадковага наведвальніка сайта.

Паралакс-скролінг даволі паспяхова быў выкарыстаны ў кампаніі Nike. Распрацоўкай арыгінальнага сайта кампаніі займаліся дызайнеры Weiden and Kennedy. Але гэты дызайн не захаваўся. Рэсурс паступова абнавілі, у адпаведнасці з тэндэнцыямі сучаснасці. Activatedrinks.com - прыклад сайта, дызайн якога нагадвае афармленне, якое выкарыстоўваецца маркетолагамі Nike дадзенага перыяду.

Дынамікі не павінна быць шмат

Не варта забываць, што афармленне сайта часта выступае ключавым крытэрыем, якім кіруецца наведвальнік. Няякасна выкананы рэсурс звычайна пакідае ў карыстальніка ўражанне несур'ёзна кампаніі-ўладальніка. А вось сайт з рознага роду прывабнымі дызайнерскімі элементамі сведчыць аб імкненні ўладальнікаў арганізацыі зацікавіць наведвальнікаў.

Тут варта ўспомніць пра паралакс. Гэта выдатны інструмент. Але нават ім не варта моцна захапляцца. Таму што старонка, на якой прысутнічае вялікая колькасць рознага роду рухомых элементаў, досыць складаная для ўспрымання. Лепш за ўсё зрабіць афармленне ў меру стыльным і зразумелым.

Дынамічнымі павінны быць асобныя элементы, якія патрабуюць выдзялення. Таксама можа прысутнічаць малюнак, які ствараецца з выкарыстаннем перамяшчаюцца адзін адносна іншага слаёў. Не варта забываць пра тое, што карыстацкі сайт афармляецца, перш за ўсё, для наведвальнікаў. Ён не павінен прадстаўляць сабой шэдэўр вэб-майстры, які ўклаў усе свае веды. Бо падобны падыход толькі ўскладніць ўспрыманне.

Як стварыць перасоўванне на сайце

Як зрабіць паралакс? Гэтае пытанне цікавіць вельмі многіх стваральнікаў сайтаў. Неабавязкова ведаць тонкасці напісання тэгаў. Вельмі зручна выкарыстоўваць спецыяльныя рэсурсы ў інтэрнэце. З вялікага ліку наяўных прапаноў можна вылучыць наступных памочнікаў:

  1. Plax - праграма, якая з'яўляецца досыць просты ў выкарыстанні. Ёй ўласціва надаваць старонцы рухомасць дзякуючы перамяшчэнню мышы.
  2. jQuery Parallax Image Slider - убудова jQuery выкарыстоўваецца, каб ствараць слайдары малюнкаў.
  3. Jquery Image Parallax - падыходзіць для афармлення празрыстых малюнкаў. Дзякуючы яго выкарыстанні PNG, GIF набываюць глыбіню, ажыўляючы рухам.
  4. Curtain.js ўжываецца для стварэння старонкі, абсталяванай фіксаванымі панэлямі. У гэтым выпадку назіраецца эфект адкрыцця штор.
  5. Scrolling Parallax: A jQuery Plugin складаецца ў стварэнні эфекту паралакс пры пракручванні колца мышкі.

Яшчэ некалькі карысных убудоў

Як вядома, найбольшую каштоўнасць мае інфармацыя. І чым большая колькасць спосабаў дасягнення жаданага вядома, тым бліжэй верагоднасць атрымання правільнага выніку. Карысныя убудовы, якія выкарыстоўваюцца для стварэння дынамікі:

  1. jQuery Scroll Path - ужываецца для размяшчэння аб'ектаў на паказаным шляху.
  2. Scrollorama - jQuery-убудова. Ён выкарыстоўваецца як інструмент для прывабнага афармлення матэрыялу. Дазваляе за кошт зручнага пракручванні «ажывіць» існуючы на старонцы тэкст.
  3. Scrolldeck - jQuery-убудова. Ўяўляе сабой выдатнае рашэнне, якое выкарыстоўваецца ў якасці прэзентацыі для сайтаў, аформленых у выглядзе адной старонкі.
  4. jParallax ўяўляе перасоўванне слаёў у залежнасці ад перамяшчэння паказальніка мышы.
  5. Stellar.js - убудова, з дапамогай якога любы элемент афармляецца з даданнем эфекту паралакс-скролінг.

Паралакс з прывязкай да курсору

Дастаткова эфектна выглядае такой паралакс. Нерухомыя на першы погляд аб'екты старонкі сайта перамяшчаюцца пры набліжэнні курсора мышы. Яно нібы ажывае і варта за перамяшчаным элементам.

Спачатку варта спыніцца на малюнку. Неабходнае выява змяшчаецца ў рамку, пры гэтым яго краю трэба схаваць. Метад вельмі просты, а атрыманы такім чынам малюнак глядзіцца досыць прывабна.

Паралакс-эфект для сайта - гэта выдатны спосаб афармлення. Яго выкарыстанне сведчыць аб тым, што стварэнню рэсурсу надавалася належная ўвага. Таму варта звярнуць увагу на прапанаваныя паслугі або інфармацыю для чытання. Такія сайты глядзяцца больш выйгрышна на фоне тоесных, але проста аформленых рэсурсаў.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 be.birmiss.com. Theme powered by WordPress.