Привіт, дорогі читачі блогу. Сьогодні ми з Вами дізнаємося як зробити плавну зміну кольору блоку за допомогою CSS і JQuery. За допомогою даного плагіна можна домогтися дивовижно гарних результатів оформлення. Наприклад, можна зробити клевое меню, яке буде плавно міняти колір при наведенні, і повірте, виглядає це дуже красиво.
І так, давайте почнемо. Для початку потрібно створити самі звичайні блоки за допомогою CSS. які матимуть дозвіл 500 на 50 пікселів:
Придумуємо клас майбутнього блоку, наприклад Box:
Вийти у нас повинно приблизно наступне:
Тепер найцікавіше. Нам потрібно, щоб при наведенні на цей блок курсором він плавно міняв на заданий колір. Робити ми це будемо з допомогою JQuery.
Для початку між тегами
і потрібно поставити наступне:Потім знову ж між тегами
і копіюємо ось цей скрипт:Де .Box - це клас блоку, який ми придумали вище в CSS.
«# FF4500» - колір при наведенні. 400 - швидкість анімації при наведенні.
«#ffffff» - вихідний колір після прибирання курсору. 400 - швидкість анімації при прибиранні курсору.
Після того коли Ви все зробите як написано вище, колір блоку плавно буде змінюватися. Щоб такий блок вставити на сторінку, потрібно просто додати наступне в потрібне місце:
І блок з'явиться.
Якщо Вам захочеться зробити щоб блоки на сторінці були різного кольору, як у мене в прикладі. Вам потрібно буде між тегами
і поставити кілька скриптів поспіль і відповідно не забути поміняти колір на бажаний. Найголовніше потрібно поміняти клас, наприклад в нашому прикладі вище - клас Box. а наступний скрипт повинен бути з іншим класом, наприклад Box1. потім Box2 і так далі.