mojwp.ru
Назад

Добавляем снеговика и сугробы снизу сайта

Опубликовано: 17.12.2015
16
1306

Небольшое Новогоднее украшение, которое подсмотрел на одном буржуйском сайте. Понравилось) Делюсь с вами "рецептом".

Screenshot_1
Снизу экрана появится сугроб и снеговик. При этом они будут "ползти" за экраном, т.е. всегда будут на виду. На момент написания этой статьи и до конца праздников на этом блоге будет стоять данная штука (почистите кеш браузера если не видите CTRL+F5).

Скачиваем эти 2 картинки и помещаем в папку images в папке с вашим шаблоном сайта (можно в любую другую папку на хостинге, просто потом подмените пути к ней):
Картинка 1 и Картинка 2

Открываем файл footer.php вашего шаблона, и прямо перед закрывающим </body> вставляем


Осталось добавить стили оформления в ваш файл style.css или css.css

.snowman {
    background: transparent url("images/snowman.png") no-repeat scroll right top / 80px auto;
    bottom: 0;
    display: block;
    height: 110px;
    position: fixed;
    right: 2%;
    width: 100px;
    z-index: 3;
}
.snow-layer {
    background: transparent url("images/snow-layer.png") repeat-x scroll center top / auto 20px;
    bottom: 0;
    display: block;
    height: 20px;
    position: fixed;
    width: 100%;
    z-index: 1;
}
@media screen and (max-width: 1024px){
	.snowman, .snow-layer {display: none;}
}

Здесь посмотрите где прописываются пути до картинок (в 2 местах).

По весне вам понадобятся стеклоочистители. Посмотрите обзор и сравнение https://tehnoobzor.com/tests-reviews/home_appliances/1904-sravnitelnyy-obzor-stekloochistiteley-karcher-i-thomas.html двух популярных моделей.

Если хотите отобразить снеговика слева экрана, то для .snowman параметр right меняем на left, а так же добавляем transform: scale(-1, 1);

При помощи параметра @media screen and я задал: если разрешение экрана меньше 1024px по ширине - не показывать эти украшения. Чтобы на мобилах не мешало смотреть. Можете задать свою цифру вместо 1024.

Все.

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • seoonly.ru
    Опубликовано: 17.12.2015 Ответить на сообщение

    Снеговик крут))

  • Andrew
    Опубликовано: 17.12.2015 Ответить на сообщение

    Ух ты! Отличный хак! Прям праздничное настроение уже))
    Статья отличная, но для расширения практических примеров я б добавил еще вариант для левостороннего его расположения (указал бы что нужно отразить картинки и какие стили поменять).
    Также дать совет не ставить его на сайты, у которых фоновый цвет - белый. Снеговик сливается с фоном))

    • Виталий
      Опубликовано: 17.12.2015 Ответить на сообщение

      Для лево добавил.
      А уже по поводу фона - это сами меняйте картинку на более темную или не ставьте вообще. Я не могу за вас все продумать и решить. Думайте логически.

  • Bahus
    Опубликовано: 20.12.2015 Ответить на сообщение

    Прикольненько. Просто и со вкусом. Добавил себе.

  • Николай
    Опубликовано: 20.12.2015 Ответить на сообщение

    Спасибо! Отлично смотрится.

  • Ксенья Юрьевна
    Опубликовано: 20.12.2015 Ответить на сообщение

    Странно все скопировала и вставила, но ничего не отобразилось, фон сайта голубой.

  • Aндрей
    Опубликовано: 23.12.2015 Ответить на сообщение

    Отличный ход украсить блог/сайт под НГ праздники.

  • Сергей Удалов
    Опубликовано: 27.12.2015 Ответить на сообщение

    А как сделать, чтобы весной он растаял?

  • Павел
    Опубликовано: 14.01.2016 Ответить на сообщение

    Спасибо! Полезная и интересная статья!

  • Дмитрий
    Опубликовано: 16.01.2016 Ответить на сообщение

    Блин. Жалко, что раньше на ваш сайт не набрел, когда снежные украшения были актуальны и я придавал своему сайту новогодний вид. Но буду знать. Спасибо)

  • Антон
    Опубликовано: 27.01.2016 Ответить на сообщение

    Эх... Жаль, что так поздно наткнулся на статейку. В следующем году обязательно возьму на заметку 🙂

  • Lucky
    Опубликовано: 28.11.2016 Ответить на сообщение

    Добрый день, поставил себе новогодний праздник =)
    Не подскажите, как расширить снег на весь экран? а то он у меня почему то режется на 2./3 экрана =(

    • Виталий
      Опубликовано: 28.11.2016 Ответить на сообщение

      Добрый.
      Вынесите span снега за пределы div id="page"
      Не туда просто вставили.

      • Lucky
        Опубликовано: 29.11.2016 Ответить на сообщение

        Спс. Помогло =)

  • Валерий
    Опубликовано: 03.12.2017 Ответить на сообщение

    Спасибо.)
    +10 к новогоднему настроению.)

  • Денис
    Опубликовано: 23.12.2021 Ответить на сообщение

    Уже не работает. (((

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.