Външен вид на елементи на сайта с CSS3 ефекти
Всичко за създаването на собствен уебсайт
Как да привлечете вниманието на потребителя към важна информация на вашия сайт? Как да сте сигурни, че когато превъртате през страницата на сайта, потребителят няма да изгуби от поглед основното? Отговорът е прост: направете кутията да изглежда изпъкнала - добавете CSS3 ефект. В тази публикация ще проучим използването на библиотеката с ефекти CSS3. Ще добавим ефекти на външния вид към текстовите блокове, до които потребителят е превъртял с мишката.
1. Изтеглете библиотеката
На този сайт можете да видите всички налични CSS3 ефекти в действие и да изтеглите css файла с техните свойства към вашия проект.
добавете към вашия проект:
2. Разбор на HTML структурата на демонстрацията
В нашия пример сайтът ще има главно меню, чиито елементи ще препращат към текстовите блокове на текущата страница. За да отидем на конкретен блок, параграф, когато щракнем върху връзка, трябва да напишем в атрибута href името на идентификатора на блока, към който искаме да направим връзка, например: имаме блок
И както разбирате, сега остава да поговорим за логиката на скрипта, как да добавите необходимите класове ефект.
3. Разбиране на подхода на jQuery за добавяне на ефекти
Да започнем с първия блок, в който има 9 статии. Ще добавим към него класа ефект zoomIn веднага след зареждането.
Така добавихме класа на анимация към всяка статия от първия блок - анимиран и класа на ефекта, който искаме да наложим на блока, когато страницата се зареди, в нашия случай zoomIn.
За втория и третия блок, където имаме по две статии, ще дадем на лявата статия ляв ефект на излизане, а на дясната статия - десен ефект на излизане. Всички ефекти ще бъдат добавени, когато потребителят превърти доартикулен блок.
Ето частта от кода, която отговаря за проследяването дали сме достигнали горния край на блока или не:
Използваме .eq(i), за да изберем елемент в селекцията, където i е номерът на елемента в селекцията на jQuery и номерирането започва от нула.
За да могат всички елементи да се върнат в първоначалната си позиция след ефектен външен вид, добавих условие, ако потребителят се върна в горната част на страницата, след това скрийте всички блокове с текстове (които вече не се виждат) и премахнете класове с ефекти от тях, това е кодът, който се оказа:
Ето целия скрипт, който обработва демонстрацията:
Позволете ми да ви напомня, че подходите за изпълнение на скрипта могат да бъдат различни, всичко зависи от ситуацията и моето решение е само пример.
58 мнения относно „Външният вид на елементи на сайта с CSS3 ефекти“
Подканете и да регистрирате скрипт в? защото не разбирам къде да го добавя към jq ...
Запазете кода на скрипта в отделен файл, например script.js. След това го добавете към главата, веднага след включването на библиотеката jquery по този начин:
попитайте, ако имате въпроси 🙂
Благодаря, ще го тествам и утре ще пиша резултатите.
Добре, ще изчакам 🙂 Ако имате интересни идеи или въпроси - пишете, ще отговоря с нови публикации 😉
Не мисля, че това е добра идея. Adsense не харесва, когато техният код е направен по специален начин. Все още го приемайте като призив към потребителите ))
Видях нещо подобно на Кореспондент. Вярно, не Edsense, а MediaTarget. Изглеждаше впечатляващо. Още тогава си мислех да организирам нещо подобно =)
Е, ако това се практикува, тогава ОК. Ако имате нужда от помощ - пишете! Помощ 😉
След дълги танци с тамбура около главната страница, реших, че съм безнадежден ... тогава си помислих: „Ами ако пробвамдруги в името на експеримента…” и Ура! се случи! Сега не мога да разбера какво може да пречи на тази анимация?
Тук трябва да погледнете самата страница, може би има грешка в друг скрипт и не стига до анимацията))
Пробвай в конзолата дали са добавени необходимите класове, дали има грешка в скрипта. Опитайте ръчно да добавите анимационни класове през конзолата и вижте дали работи.
Или пратете линк към студиото, ще разгледам 😉
Бяхте прав) Намерих грешка в един от скриптовете и я поправих, работи)
Радвам се, че работите 🙂 Ако имате въпроси относно тази или друга тема, пишете и се опитайте да отговорите 😉
Страхотно, проработи! Харесва ми как приложихте CSS анимационни ефекти на вашия сайт 🙂
Благодаря на автора! Но се оказва, че можете да улесните нещата с wow.min.js
Благодаря ви за интересния сценарий 🙂 Сега няма време да го разбирам, кажи ми как да направя анимация в него не при превъртане , а призадържане на мишката илищракване метод?
Ще съм благодарен ако ми дадете отговор!
#широчина на пробата:200px; височина:200px; фон: #aaa; >
setInterval(function() var $sample = $("#sample"); if($sample.is(":hover")) $("#sample").addClass('animated bounce'); > else $sample.css("background", ""); > >, 200);
Ate код) ====HTML===== div > =====CSS===== #ширина на пробата:200px; височина:200px; фон: #aaa; ======JS====== setInterval(function() var $sample = $("#sample"); if($sample.is(":hover")) $("#sample").addClass('animated bounce'); > >, 200); ===============
Моля, кажете ми как мога да направя товатака че блоковете да не се появяват веднага, а веднага щом моят блок се появи наполовина?
Просто добавете височината на половината от блока към условието:
По-добре е да преместите селекцията на блока „#ex1“ в променлива, ще се получи нещо подобно:
Благодаря, получи се, но проблемът се появи така: когато превъртите до тази точка, блокът вече се вижда, а когато слезете малко по-надолу, се появява анимация.
Тези. Вижда ли се блокът цял или наполовина?
Кажете ми, възможно ли е да вмъкнете тези ефекти в Joomla и как да го направите?
Добро утро Сергей! Тези ефекти могат да бъдат свързани с всеки двигател. Лесно, добавете изтегления файл към главата на вашия joomla шаблон и напишете анимационни скриптове във файла със скриптове на вашия шаблон. Ако не знаете как да направите това, тогава напишете каква версия на Joomla имате и какъв шаблон, ако имам време ще се опитам да пиша за това следващата седмица.
Лека нощ. Всичко работи за мен, но в firebug дава грешка Uncaught TypeError: Cannot read property 'top' of undefined script.js:18 (anonymous function)jquery.min.js:3 b.event.dispatchjquery.min.js:3 b.event.add.v.handle
и когато скролвам нагоре и надолу - грешката се повтаря (((
какво да правя? помогне
Лека нощ, поставете кода на jsfiddle, моля. Обсъждане 🙂