Поява елементів сайту з ефектами CSS3
Все про самостійне створення сайту
Як привернути увагу користувача на важливу інформацію на вашому сайті? Як бути впевненим у тому, що при прокручуванні сторінки сайту користувач не пропустить головного виду? Відповідь проста: зробіть появу блоку помітним – додайте CSS3 ефект. У цьому пості ми розберемо застосування бібліотеки CSS3 ефектів. Додаватимемо до текстових блоків, до яких користувач доскролив мишкою, ефекти появи.
1. Завантажуємо бібліотеку
На цьому сайті ви можете переглянути всі наявні CSS3 ефекти в дії та завантажити css файл з їхніми властивостями до себе в проект.
додаємо до себе в проект:
2. Розбираємо HTML структуру демо-прикладу
У нашому прикладі на сайті буде основне меню, елементи якого будуть посилатися на текстові блоки поточної сторінки. Щоб при натисканні посилання ми переходили до певного блоку, абзацу, необхідно в атрибут href прописати ім'я ідентифікатора того блоку на який ми хочемо послатися, наприклад: у нас є блоку
І як ви розумієте, тепер залишилося поговорити про логіку скрипта, яким чином додавати потрібні класи ефектів.
3. Розбираємо jQuery підхід до додавання ефектів
Почнемо з першого блоку, в якому 9 статей. Йому ми додамо клас zoomIn ефекту відразу після завантаження.
Таким чином ми до кожної статті першого блоку додали клас анімації – animated і клас того ефекту, який хочемо накласти на блок при завантаженні сторінки, у нашому випадку zoomIn.
Для другого та третього блоків у яких у нас по дві статті, ми даватимемо лівій статті ефект виїзду зліва, а правий ефект виїзду праворуч. Всі ефекти будуть додаватися в момент, коли користувач докрутить скролом доблоку зі статтями.
Ось та частина коду, яка відповідає за відстеження, досягли чи ні ми верхнього краю блоку:
За допомогою .eq(i) ми вибираємо елемент вибірки, де i – номер елемента у вибірці jQuery та нумерація починається з нуля.
Для того, щоб усі елементи поверталися у вихідну позицію після ефектної появи, я додав умову, якщо користувач повернувся на початок сторінки, то всі блоки з текстами (які вже не видно) сховати та видалити у них класи з ефектами, ось такий код вийшов:
Ось весь скрипт, який обробляє демо-приклад:
Нагадаю, що підходи до реалізації скрипту можуть бути різними, все залежить від ситуації і моє рішення – це лише приклад.
58 thoughts on “ Поява елементів сайту з ефектами CSS3 ”
Підкажіть, а скрипт прописувати в ? тому як в jq внести не зрозумію куди…
Збережіть код скрипта в окремий файл, наприклад script.js. Потім додайте його в head, відразу після підключення бібліотеки jquery ось так:
питайте, якщо залишилися питання 🙂
Дякую тестуватиму, відпишуся завтра про результати.
Добре, чекати 🙂 Якщо виникнуть цікаві ідеї або питання – пишіть, відповідатиму новими постами 😉
Не думаю що це гарна ідея. Adsense не любить коли їх код якось по-особливому оформляють. Ще сприймуть це як заклик користувачів))
Бачив таке на Кореспонденті. правда, не Едсенс, а МедіаТаргет. Виглядало ефектно. Ще тоді думав щось подібне організувати =)
Ну якщо таке практикують, тоді ОК. Потрібна буде допомога – пиши! Допоможу 😉
Після довгих танців з бубном довкола головної сторінки вирішив, що я безнадійний…потім подумав “А що якщо спробувати наінших заради експерименту…” та Ура! вийшло! Тепер ніяк не можу збагнути, що може заважати виконанню цієї анімації?
Тут потрібно дивитися саму сторінку, можливо на ній є помилка в іншому скрипті і до анімації справа не доходить))
Спробуйте в консолі подивитися, чи додаються потрібні класи, чи немає помилки в скрипті. Спробуйте вручну через консоль по додавати класи анімації і подивитися чи працює вона.
Або кидайте посилання на студію я подивлюся 😉
Ви мали рацію) знайшов помилку в одному зі скриптів і виправив все запрацювало)
Радий, що у вас все заробило 🙂 Якщо залишилися питання на цю тему або іншу, пишіть постараюся відповісти 😉
Добре вийшло! мені сподобалося, як ви застосували ефекти CSS анімації на своєму сайті 🙂
Автору дякую! Але виявляється все можна зробити простіше, за допомогою wow.min.js
Дякуємо вам за цікавий скрипт 🙂 Зараз немає часу в ній розбиратися, підкажіть як у ній зробити анімацію не на прокручування а наhover абоclick метод?
Буду вдячний якщо дасте відповідь!
#sample width:200px; height:200px; background: #aaa; >
setInterval(function() var $sample = $(“#sample”); if($sample.is(“:hover”)) $(“#sample”).addClass('animated bounce'); 7>> else $sample.css(“background”, “”); > >, 200);
З'їло код) ====HTML===== div > =====CSS===== #sample width:200px; height:200px; background: #aaa; ======JS====== setInterval(function() var $sample = $(“#sample”); if($sample.is(“:hover”) )) $(“#sample”).addClass('animated bounce'); > >, 200); ==============
Скажіть, будь ласка, як мені зробити так,щоб блоки з'являлися не відразу, а як тільки мій блок здасться наполовину?
Просто додайте в умову висоту половини блоку:
Краще винести вибірку блоку "#ex1" у змінну, вийде щось таке:
Спасибі, спрацювало, але біда з'явилася така: коли прокручуєш до цього моменту блок уже видно, а коли опускаєшся трохи нижче відбувається анімація.
Тобто. блок видно повністю чи половину?
Підкажіть, чи можна ці ефекти вставити в джумлу, і як це зробити?
Доброго ранку, Сергію! Ці ефекти можна підключити до будь-якого двигуна. Просто, додайте завантажений файл в область head вашого шаблону джумли і пропишіть скрипти для анімації у файлі скриптів вашого шаблону. Якщо ви не знаєте як це зробити, то напишіть яка версія джумли стоїть у вас і який шаблон, якщо у мене буде час постараюсь написати про це наступного тижня.
Доброї ночі. А ось у мене все працює, але у фаєрбазі видає помилку 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, будь ласка. Обговоримо 🙂