Трохи ускладнити завдання і підключимо на сайт невеликий скрипт кнопки - "TO TOP". Переглядаючи наш сайт в нижньому правому куті буде з'являтися кнопочка з іконкою вгору - ця ікона буде накладатися поверх блоку з хлопцем-дизайнером, так що код доведеться модифікувати. І побудуємо невеликий каркас для нашого застосування.
У шапці сайту я підключаю jquery 1.7.2 можна підключити останню версію - конфліктів не виникне. Іконки font-awesome - я часто користуюся цією бібліотекою, на мій погляд найкраща колекція ікон для повсякденної роботи створення сайтів.
Файл стилів і файл з скриптами. В кінці документа ми виводимо три наших головних блоку - кнопку наверх, блок з Астерікс і блок з дизайнером.
Давайте пропишемо стилі для наших елементів.
Блоки будуть плавно виїжджати - для цього ми додали css властивість transition. Позиціонування фіксоване і задали негативну позицію всім блокам. Додаючи клас з нульовим розташуванням і властивістю transition ми домоглися красивою анімації плавного появи блоку.
Але без jQuery ні чого ж працювати не буде;) Давайте вже напишемо наш код:
Що то багато зайвого коду скажіть ви. Чому б не об'єднати скрипт кнопки наверх і наші плаваючі блоки? Не просто так я розділив ці два скрипта. По-перше на вашому сайті вже може існувати скрипт елемента TO TOP. По друге - може ви читаєте цю статтю тільки через це елемента;)
Якщо на сайті вже функціонує кнопка наверх - то наш другий блок з дизайнером будемо накладатися на цю кнопку, значить ми допишемо пару рядків коду і будемо приховувати заважає нам елемент під час відображення дизайнера і знову виводити при прокручуванні до футера сайту.