Мода на різні елементи дизайну приходить і йде. Ті елементи дизайну, які вирішують певні проблеми, триматися довше інших. Елементи дизайну, які популярні зараз саме з цієї причини, - це липкі елементи; це ті елементи, які ведуть себе нормально до тих пір, поки ми не починаємо перегортати сторінку, і тоді вони, тим або іншим способом, підтримують свою видимість на сторінці.
Любов до них почалася з бічних панелей, але справжню свою популярність отримали липкі заголовки. Чому? Тому що заголовки, як правило, містять навігацію, а навігація по сайту популярна серед користувачів.
Ось як це буде виглядати, як, коли ми закінчимо.
Якщо ви хочете, щоб слідувати разом з кодом, ви можете завантажити його тут.
HTML в нашому прикладі простої, все, що нам потрібно, це тег h1 всередині заголовка. Внизу ще вставлено зображення, але воно потрібне тільки для примусової прокрутки сторінки, щоб ми помітили ефект.
висновок
Створення цього анімованого заголовка з властивостями CSS3 і перемиканням класу з JQuery надзвичайно просто, і додає тонну гарного досвіду взаємодії в дизайн вашого сайту.
Поділіться цією статтею з друзями, якщо хочете виходу нових статей:
Потрібні розробники і тестери для проекту codebyOS. Вимоги для участі в проекті: Знання принципів роботи ОС на базі Linux; Знання Bash; Вкрай бажане знання CPP, Python, Lua; Навички системного адміністрування. Детальніше.
Схожі теми
Фонд jQuery усиновляє плагін Mousewheel. Фонд jQuery радий повідомити, що Брендон Аерон (Brandon Aaron) передав його плагін jquery-mousewheel в Фондj Query. Брендон - випускник команди jQ.
3 трюку для додавання текстури в ваш текст з CSS. Ймовірно, ви знайомі з використанням такої техніки Photoshop, коли в якості маски зображення виступає текст; це найкращий відомий спосіб добав.