Доброго времени суток 🙂
Нещодавно на очі мені попався цікавий скрипт. Багато з Вас його бачили. Суть скрипта полягає в тому, що якийсь об'єкт вказує на розташування курсора на сторінці. Такий ефект застосовується на сайтах Ucoz на 404 сторінці. Там зроблено так, що при русі курсором, намальований кіт, в бінокль стежить за Вашим рухом. По суті даний скрипт просто красива анімація для залучення уваги відвідувача. Мені він дуже сподобався і я вирішив його трохи доопрацювати, переробити і зробити ще один дуже схожий, але трохи з іншого анімацією.
У цій статті буде показана перша анімація, а в наступній розповім вже про другий. Там буде покажчик у вигляді компаса. Взяв я скрипт, трошки його підправив і змінив принцип виведення зображення. Так само замість кота дивиться в бінокль, я додав відомого котика - Саймона з мультфільму Simon's Cat. Як і в исходнике пропоную використовувати даний скрипт на сторінках типу 404. Звичайно ж все залежить від Вашої фантазії. Можете пристосувати його для будь яких інших цілей. Те що вийде після установки собі на сайт даного матеріалу, можете подивитися нижче в прикладі, а також завантажити вихідні.
Сподобалося? Якщо так, то приступимо до опису, як це працює і як додати на свій сайт.
В першу чергу, давайте додамо HTML розмітку нашої анімації.
По розмітці, все просто. Маємо батьківський блок з id - cat. Усередині нього два блоки відповідають за очі, всередині яких блоки відповідають за зіниці. Виходить ми визначаємо за все нашого кота, потім дві зони, а саме зони очей, всередині яких і будуть рухатися зіниці. Даний код додаєте в те місце сайту де хочете побачити картинку з анімацією.
Наступним етапом буде додавання стилів, для коректного відображення майбутньої анімації.
Якщо Ви хоч трохи розбираєтеся в CSS то тут все просто, а я сподіваюся, що це так бо якщо Ви вирішили самостійно додавати скрипти до свого сайту, то як мінімум вивчаєте і розбираєтеся в елементарних, початкових поняттях. В іншому випадки, рекомендую спочатку вивчити ази, а вже потім займатися подібними доробками свого сайту. Повернемося до матеріалу.
Важливо звернути увагу, що фон з котом задається псевдоелементу: before для блоку #cat. Слід, так само правильно вказати шлях до зображення. Щоб отримати всі зображення - скачайте вихідні за посиланням вище. Тепер по очах і зіницям.
- #cat - Основний блок, область, де буде картинка і анімація очей.
- #cat: before - Псевдоелемент для додавання загального фону. В даному випадки кіт Саймон. Можете додати іншу картинку, але тоді слід правильно розмістити область очей на ній.
- .cat-eye - Це загальний клас для двох очей (не картинки, а саме область для зіниць). Здається розмір по якому буде бігати зіницю. У даній ситуації -60x61px
- .cat-eyeball - Уже самі зіниці. Задаємо положення щодо очей, розмір і найголовніше вказуємо шлях до картинки - eyes.png. Якщо картинки не лежать в одній папці що і стилі, то вкажіть правильний шлях.
- # Cat-eye-left і # cat-eye-right - ID для лівого і правого ока. Розташування зон для руху зіниць. Якщо поміняєте основну картинку, то в цих параметрах потрібно буде міняти розташування щодо батьківського блоку - #cat
Тепер прийшла черга самого скрипта, але для його роботи спочатку потрібна бібліотека jQuery. Якщо вона у Вас підключена, то можна пропустити цей крок. У системах управління вона є за замовчуванням, якщо сайт самопісний то потрібно дивитися. Якщо її все ж немає, то потрібно додати її. робиться це або в шапці або в підвалі сайту, додаванням такого рядка:
Якщо бібліотеку Ви додали в шапці, то скрипт обов'язково повинен бути в підвалі. Якщо бібліотека теж в підвалі, то після неї додаєте від такої ось код:
Розписувати роботу скрипта не буду, зверну увагу лише на деякі моменти. Перше - це дві перших рядки. У них вказані айди лівого і правого лазу. якщо Ви їх можете перейменувати в стилях і HTML, то зробити це потрібно і в самому скрипті.
Друге - це область стеження за курсором. В даному скрипті в 7 рядку вказано - html. Тобто по суті вся сторінка. Іноді використовується body. Але якщо сторінка не повна і підвал не притиснутий до низу сторінки, буває що body лише на пів сторінки і виходячи за його межі, скрипт перестане працювати, так що краще - html. Так само можна поставити конкретне блок, усередині якого буде стеження за курсором, в той час, як на решті сторінці це не буде відбуватися. У такому випадки замість html потрібно вказати айди блок, наприклад #block_name. Помістити HTML код з цієї статті всередину блоку з айди - #block_name і все.
Ось і все що потрібно для установки даного скрипта на свій сайт. Як і писав на початку, даний скрипт не несе особливої користі і існує лише для додання Вашого сайту незвичайного виду.
На цьому все, спасибі за увагу. 🙂
Якщо Вам був корисним моя праця, можете підтримати сайт :)
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце