Доброго вам дня. 🙂
Колись я робив сайт для фірми, пов'язаної з сільським господарством. Була намальована шапка у вигляді поля і була застосована ідея, суть якої - зміна шапки сайту за часом. Такий фокус я побачив на одному з сайтів і він мені сподобався. Я почав шукати скрипт, який би робив заміну картинки за часом.
Рішення було знайдено в PHP скрипт, який здійснював заміну. Суть скрипта в тому, що через умову по заданому часу для певного блоку задається потрібний клас. Тобто, якщо у Вас ранок, то у блоку - клас 1, якщо день - клас 2, вечір клас 3 і ніч - клас 4. Так що для того, щоб у Вас все вийшло, у Вас сайт повинен підтримувати PHP.
До речі, якщо включити фантазію то можна не тільки міняти картинку, а наприклад, міняти цілий блок. Що потрібно зробити для того, щоб картинка змінювалася?
1. Визначити блок
У Вашої шапки повинен бути блок, наприклад head. ну або будь-який інший. До нього потрібно додати клас з функцією echo. Все виглядати буде так:
2. PHP функція
Над блоком шапки потрібно додати невеликий PHP-код, який буде визначати час і створювати клас.
Спочатку ми вказуємо параметр часу - G. що означає годинник в 24-годинному форматі без провідних нулів від 0 до 23.
$ Time = 'time-night'; - ім'я класу, який буде присвоєно блоку.
$ Now_hours = 11 - задаємо проміжок часу. Це рядок з класу ранок. Чи означає вона що картинка ранок буде висіти в шапці з 7 до 11 години. До речі міняйте під себе, тому що час залежить від часового пошуку і 7 ранку в скрипті, не означає, що співпаде з 7 ранку Вашої країни.
3. CSS стилі
Надаємо стилі нашим класам. Дані стилі просто як приклад. Також блоку заданий айди, якому ви ще поставите ширину висоту, звичайно Ви могли це зробити раніше, ну і тд.
Далі Вам залишається створити 4 картинки і назвати їх відповідно як в стилях. і додати в папку images, ну або в іншу, тільки попередньо змінивши шлях в стилях.
Все зроблено для того щоб отримати результат. Можете перевірити і оцінити.
Вам подобається коли на сайтах застосовується ось така анімація з часом доби?
На цьому все, спасибі за увагу. 🙂
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце