Подвижен фон (многостепенно превъртане за мързеливи хора) - SJ
Накрая ще направим "невидим щрих" (здравей Фил Колинс) върху това, което е един вид приятно обобщение на концепцията за тънкостите на майсторството.
За някои ефектът ще остане незабелязан, докато за останалите със сигурност ще предизвика усмивка... „Многостепенното превъртане“ на фона е лесен начин да превърнете мобилността в мрежата в свой инструмент. Въпреки че, разбира се, добавянето на движение към това, което изглежда статично, изисква допълнителна инвестиция на време.Guerrilla Tactics За първи път видях ефекта от „многостепенното превъртане“ на уебсайта Clearleft за Silverback (Фигура 1), хубава програма, която ви позволява да тествате използваемостта „на място“.
Въпреки че това наистина е отлична програма, обърнах специално внимание на това как е направен дизайнът на сайта. По-специално бях поразен от растенията, висящи над горилата: при преоразмеряване прозорците на браузъра изглеждаха триизмерни. Ако увеличите или намалите ширината на прозореца, трите слоя с изображения на растения се движат по хоризонталната ос и с различна скорост. А най-горният слой е замъглен, което засилва ефекта на дълбочината. чудесно! И сигурно прекарах цял час в протягане и стискане на прозореца, кикотейки се тихо.
Съвет. Терминът „многостепенно превъртане“ („паралакс превъртане“) дойде при нас от аркадите на 80-те години, където фоновите изображения се движеха по-бавно от изображенията на преден план. Благодарение на това е създаден триизмерен ефект в плоска (2D) игра. Можете да прочетете повече за това на http://en.wikipedia.org/wiki/Parallax_scrolling
Вероятно невидими детайли Пространственият ефект от преоразмеряването на прозореца на браузъра е един от най-добрите примери за финиумение. Изпълнението му изисква много усилия и внимание, но потребителят може да не забележи резултата. Прекарахме значителна част от тази книга, говорейки за малките неща, които могат да варират в зависимост от браузъра, и колко важно е да се преодолее желанието за еднообразие в дизайна.
„Наслоеният“ ефект се възползва от факта, че ширината на прозореца е вид движеща се цел. Това винаги е променлива, на която не може да се разчита. Но вместо да обвързвате графичните елементи с определени части на страницата, защо не ги направите независими, позволявайки им да взаимодействат помежду си?
Фиг. 1. Програма за тестване на използваемостта на Silverback от Clearleft (http://silverbackapp.com). Опитайте да преоразмерите прозореца и гледайте как висящите растения се движат с различна скорост
„Гумените“ мрежи, за които Итън говори в предишната глава, са още по-екстремно изпълнение на тази идея.
Как се прави Пол Анет говори за това как е създал ефекта на „пластовете“ на уебсайта на Silverback в Как да пресъздам паралакс ефекта на Silverback http://carsonified.com/blog/features/howto-recreate-silverbacks-parallax-effect/ . Той използва три слоя PNG изображения, чиято хоризонтална позиция е зададена с различни проценти.
Ще кажа само общи думи за кода: ако използвате 20%, 40% и 150% като начални стойности на позицията на трите фонови слоя, тогава хоризонтално повтарящите се слоеве ще се движат с различна скорост, когато ширината на прозореца на браузъра се промени.
Това е много хитър трик; използвайки го, вие сте практически неограничениизбор на слоеве, техния брой и скорости, с които се движат.
Експериментиране с отрицателни проценти В края на статията си Пол казва, че използването на отрицателни проценти води до интересен резултат. И тук той припомня The Rissington Podcast (http://therissingtonpodcast.co.uk/), споменат по-рано в статията, който също може да се похвали с ефект на „пластово превъртане“. По-рано подобен метод беше използван на страницата Започва с регистрация на домейн.
Ако използвате отрицателни стойности, изображенията ще се преместят наляво, което често не е в посоката, в която е преоразмерен прозорецът (ако хванете долния десен ъгъл на прозореца и го плъзнете надясно, изображенията ще се преместят в обратната посока). И както Пол обяснява, колкото по-висока е процентната стойност (отрицателна), толкова по-бързо ще се движи изображението.
Ефектът на "наслояването" за мързеливите
Опростявайки малко метода на Пол Анет, започнах да използвам отрицателни проценти, за да позиционирам хоризонтално повтарящи се фонови изображения. Дори в най-простата ситуация, когато само едно изображение запълва фона, преместването на изображението в посока, обратна на преоразмеряването на прозореца, създава ефект, подобен на „наслоено превъртане“ – само че е много по-лесно за изпълнение.
Как се използва в шаблона Tugboat Например, заглавката на шаблона Tugboat има фоново изображение, където можете да видите небето, облаците и могилите кафе (Фигура 2). Това е изображение с размери 1024×56 пиксела, което се повтаря хоризонтално, така че, независимо от размера на прозореца, заглавката заема цялата ширина на прозореца и изглежда като едно цяло.
Това изображениенасложена върху капачка, която съвпада с цвета на дъното на хълма, така че може да има фиксирана височина, докато капачката ще се разтегне в зависимост от размера на прозореца.
Добавихме и повтарящо се градиентно изображение под заглавката (Фигура 3). Цветът му се променя от по-тъмен нюанс на кафяво (отдолу) до по-светъл нюанс на кафяво (отгоре).
За съдържанието на заглавката ни трябват два контейнерни елемента, за да позиционираме правилно всички наши фонови изображения: облаци и хълмове отгоре и градиент отдолу (Фигура 4).
Фиг. 4. 3D изображение: Изображение с облаци/хълмове над кафява шапка и повтарящо се градиентно изображение отдолу
Маркиране на заглавката на шаблона за влекач За да създадем структурата на заглавката на шаблона за влекач, ще използваме следната маркировка (в нея ще зададем логото, лозунга, графичните елементи и списъка с навигационна лента).
Обърнете внимание на двата външни контейнера, които са означени с #header и #header-inner. Това са същите елементи, с които ще добавим фонови изображения, както и ще зададем кафяв цвят на фона.
Добавяне на фонови изображения Първо, нека добавим градиентно изображение, което трябва да бъде поставено по долния край на заглавката и над кафявия фон. За да отделите внимателно заглавката от светлокафявия фон на страницата, нека създадем бяла граница с ширина 1 пиксел.
След това добавете хоризонтално повтарящо се изображение на облаци и хълмове, които трябва да бъдат разположени по протежение на горния ръб на шапката. За да направите това, задайте го като фон за елемента #header-inner.
Фигура 5 показва резултата от запълването на фона с тези изображения. Този подход ни гарантира, че независимо от размера на прозореца на браузъраоблаците/хълмовете и градиентът ще заемат цялата ширина на прозореца и ще изглеждат като едно цяло.
фиг.5. Резултат от запълване на фона с изображения
Отрицателни проценти за изображения, които се повтарят хоризонтално Сега нека се върнем към метода за създаване на ефекта на „пластовете“ за мързеливи хора. Всичко, от което се нуждаем, е да зададем хоризонталната позиция на изображението на облаци/хълмове, като използваме отрицателни процентни стойности (както казах, колкото по-голяма е тази стойност, толкова по-бързо ще се движи изображението).
И така, задаваме първоначалната позиция на фоновото изображение: 80% хоризонтално и 0 (същото като горната) вертикално. Това е всичко.
Сега, когато потребителите променят ширината на прозореца, облаците и хълмовете ще се движат в обратна посока. Създадохме ефекта на "псевдо-много нива" и то за една трета от цената!
Знак за високи постижения Отново, не всеки потребител ще забележи този малък детайл, но е невероятно лесен за изпълнение. Опитайте се винаги да използвате отрицателни проценти за изображения, които се повтарят хоризонтално. Например, ще бъда приятно изненадан да видя този ефект в някой сайт.
Заключение Е, приятели, книгата свърши. Докато пиша това, дните стават по-дълги, птичките чуруликат, цветята цъфтят. Има нещо ново в пролетния въздух (нямам предвид прашеца, който кара всички да кихат).
Имам чувството, че в света на уеб дизайна се случват много невероятни неща. И се надявам, че тази книга ще ви вдъхнови желанието да експериментирате с нещо ново и много интересно - и като правите това, имайте предвид принципите, които не подлежат на куршуми, които правят добрия уеб дизайн страхотен.
Надявам се да имашудоволствие е да слушам Итън и аз да говорим за това кой принцип е най-важен за нас при разработването на всеки проект и завършва с тези редакции под формата на CSS и HTML. Значителна част от дизайнерската работа е да убедите себе си, че правите всичко правилно. И се надявам, че успях да ви помогна да направите още една крачка в тази посока.
А що се отнася до компанията за кафе Tugboat, както казах, когато ми омръзнат триъгълниците и фигурните скоби, може наистина да отворя кафене. Първата чаша е за сметка на къщата.