X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Смена изображения по времени

Приклад
  • 2024-03-19
  • 8460 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

Когда-то я делал сайт для фирмы, связанной с сельским хозяйством. Была нарисована шапка в виде поля и была применена идея, суть которой - смена шапки сайта по времени. Такой фокус я увидел на одном из сайтов и он мне понравился. Я начал искать скрипт, который бы делал замену картинки по времени.

Время суток

Решение было найдено в PHP скрипте, который совершал замену. Суть скрипта в том, что через условие по заданному времени для определенного блока задается нужный класс. То есть, если у Вас утро, то у блока - класс 1, если день - класс 2, вечер класс 3 и ночь - класс 4. Так что для того, чтобы у Вас все получилось, у Вас сайт должен поддерживать PHP.

Кстати, если включить фантазию то можно не только менять картинку, а например, менять целый блок. Что нужно сделать для того, чтобы картинка менялась?

1. Определить блок

У Вашей шапки должен быть блок, например head, ну или любой другой. К нему нужно добавить класс с функцией echo. Все выглядеть будет так:

 
<div id="head" class="<?php echo $time; ?>"></div>

2. PHP функция

Над блоком шапки нужно добавить небольшой PHP-код, который будет определять время и создавать класс.

 
<?php
$now_hours = date('G');
if($now_hours<7)
{
$time = 'time-night';
}
elseif($now_hours<7 && $now_hours>=11 )
{
$time = 'time-morning';
}
elseif($now_hours>=11 && $now_hours<18)
{
$time = 'time-day';
}
elseif($now_hours>=18 && $now_hours<=21)
{
$time = 'time-evening';
}
?>

Сначала мы указываем параметр времени - G, что означает часы в 24-часовом формате без ведущих нулей от 0 до 23.

$time = 'time-night'; - имя класса, который будет присвоен блоку.

  • time-night - ночь
  • time-morning - утро
  • time-day - день
  • time-evening - вечер

$now_hours<7 && $now_hours>=11 - задаем промежуток времени. Это строка из класса утро. Означает она что картинка утро будет висеть в шапке с 7 до 11 часов. Кстати меняйте под себя, потому что время зависит от часового поиска и 7 утра в скрипте, не означает, что совпадет с 7 утра Вашей страны.

3. CSS стили

Присваиваем стили нашим классам. Данные стили просто как пример. Также блоку задан айди, которому вы еще зададите ширину высоту, конечно Вы могли это сделать раньше, ну и тд.

/* Ночь */
 .time-night{background:url(images/night.jpg);}
 /* Утро */
 .time-morning{background:url(images/morning.jpg);}
 /* День */
 .time-day{background:url(images/day.jpg);}
 /* Вечер */
 .time-evening{background:url(images/evening.jpg);}	

Далее Вам остается создать 4 картинки и назвать их соответственно как в стилях. и добавить в папку images, ну или в другую, только предварительно изменив путь в стилях.

Утро день вечер ночь

Все сделано для того чтобы получить результат. Можете проверить и оценить.

Вам нравится когда на сайтах применяется вот такая анимация с временем суток?

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 11, в среднем: 4.9 из 5
Читайте також