X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2019-01-18
  • 4363 просмотр

    1 комментарий

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

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

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

Время суток

Решение было найдено в 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
Проголосовало: 6, в среднем: 4.8 из 5
Читайте также
Опубликован 1 комментарий

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

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.