Можете да го наречете gimmicky, можете да го наречете бонбони за очи, но паралакс ефект в уеб дизайна е тук, за да остане. Това е един елемент, който ще даде на вашия сайт фактор "WOW". Докато ефектът е бил за известно време и има много сайтове, които го са внедрили в дизайна, все още е готино.

Ако сте готови да се присъедините към движението и да добавите ефекта към сайта си в WordPress, останете настроени.

Какво представлява паралаксът?

За тези, които не са запознати с този термин, речникът определя думата "паралакс" като " ефект, при който позицията или посоката на обекта се различават, когато се разглеждат от различни позиции. "

В уеб дизайна на света, паралаксът е техника, при която фоновите изображения се движат с различна скорост, обикновено по-бавна от изображенията в преден план. Целта е да се създаде илюзия за дълбочина (фаузен 3D ефект) в 2D среда.

Приложението на паралакс е около 80-те години в света на игрите, но уеб дизайнерите едва сега започнаха да включват ефекта си широко през 2011 г., използвайки HTML5 и CSS3.

Първи път: WordPress теми

Ако сте потребител на WordPress, най-лесният начин да имате ефект на паралакс в сайта си е да използвате темата на WordPress с вградения ефект. Превключете темата и сте готови.

Има тонове готови за паралакс WP теми там, безплатни и платени. Бързото търсене в Google и в хранилището за теми на WordPress ще ви даде повече опции, с които можете да се справите.

Ако искате да изпробвате някои от темите, ето няколко примера за тях, свежи от хранилището. Тъй като е невъзможно да тествате и сравнявате всички налични теми, готови за паралакс, и да ви покажа само най-доброто, те са избрани само въз основа на субективността на моя личен визуален вкус.

1. Паралакс рамка

2. Марви

3. SimpleShift

4. Елегантно

5. Интегрално

6. Zeal

7. Хвойна

8. И не забравяйте, че най-новата официална тема от WordPress, Twenty Seventeen, също поддържа заглавка на паралакс.

Тези теми обикновено имат един или няколко специфични заместители за паралакс ефекта и всичко, което трябва да направите, е да качите фоновото изображение на тези места. Но и тази простота е недостатък, защото нямате достатъчно място да импровизирате.

Всяка тема е различна, но обикновено можете да персонализирате изображението на фона на паралакс чрез менюто "Изглед -> Персонализиране" и да изберете конкретно меню според настройките на темата.

Втори път: WordPress приставки

Ако искате да приложите ефекта върху избраните от Вас области, трябва да използвате приставки. Въпреки че номерът не е толкова голям, колкото при темите, все още има много приставки за WordPress parallax, които можете да опитате. Ето няколко от тях от плъгина: Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax плъзгач, Easy WP Parallax Slider и Aesop Story Engine.

Повечето от тези приставки ще ви позволят да създавате паралакс елементи и да ги вмъквате в публикации, страници или други поддържани области, като използвате кратки кодове. Има и някои, които създават елементите директно на мястото, където искате паралаксът да се появи.

Тъй като сме обсъдили Aesop Story Engine, възможността за вмъкване на паралакс и всички свои функции са в "Интерактивно съдържание за разказ на стилове" на WordPress ebook, така че за целите на тази статия нека да разгледаме друг приставка като пример.

В Parallax Scroll, например, можете да създадете нов паралакс, подобен на създаването на нова публикация. Интерфейсът за редактиране също изглежда подобен. За да добавите фона на паралакс, използвайте опцията "Задаване на изображение". Заглавието и публикуването на съдържанието са по избор.

Има много опции, с които можете да се движите под полето за съдържание, но те също са по избор.

След като натиснете бутона "Публикуване", ще получите кратък код. Вмъкнете този shortcode във всяко поддържано място (публикации, страници, приспособления и т.н.) и ще имате паралакс ефект.

Имайте предвид, че дори ако можете да коригирате много неща в опциите, крайният резултат от паралакса ще зависи в голяма степен от темите, които използвате. Ако темата поддържа пълна ширина, тогава елементът на паралакса може да се появи в своята пълна слава. Ако не, можете да приемете какво ви е дал живот с отворени обятия, или бихте могли да опитате да проникнете в предпочитания от вас начин, използвайки CSS и JavaScript.

Малък трик, който да добавите към своя арсенал: никой не каза, че не можете да комбинирате темата и приставката. Използването на повече от един плъгин също е законно. Бихте могли, например, да използвате Twenty Seventeen за вашата тема и да инсталирате Aesop Story Engine плюс Parallax Scroll като допълнителен spicing в уеб рецептата.

Сега можете да отидете на паралакс пътешествие и wow вашите посетители по пътя.