Главная
Web-дизайн
Смена изображения по времени

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

Время суток

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

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

Решение было найдено в 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
(2 голоса, в среднем: 5 из 5)

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий