В сегодняшней статье мы поговорим о фоновом изображении для сайта, которое является немаловажным элементом дизайна. Если для блога фон должен быть приятным и не отвлекать от основного контента, то для лэндинг пэйдж – фон фактически самый значимый элемент, благодаря которому создается общее впечатление, и он должен «цеплять» посетителя.
На данный вариант слайд-шоу на заднем фоне я наткнулся на одном из популярных зарубежных сайтов - tympanus, заглянув в демо, вы увидите злободневный вариант его использования. Хотя, на мой взгляд, найти применение данному скрипту при изрядной доли фантазии можно весьма и весьма незаурядное.
Мы же рассмотрим реализацию на первом примере, в его авторской ипостаси, и начнем со скриптов и стилей, которые нам понадобятся для работы, подключаем их в шапке документа:
<link href="css/main.css" type="text/css" rel="stylesheet" />
<link href="css/mockup1.css" type="text/css" rel="stylesheet" />
<script src="js/modernizr.custom.js" type="text/javascript"></script>
В файле main.css находятся общие стили и стили сброса, а для каждого примера используется mockup1.css с соответствующей нумерацией.
Далее следует HTML разметка:
<div class="mockup">
<!-- Фоновая картинка на каторой будет слайдер -->
<img class="mockup__img" src="img/mockup.jpg" />
<div id="mobile" class="mobile">
<ul id="slideshow" class="slideshow">
<!-- Сообсвено наши сайды -->
<li class="slideshow__item">
<img src="img/small/1.png" />
</li>
<li class="slideshow__item">
<img src="img/small/2.png" />
</li>
<li class="slideshow__item">
<img src="img/small/3.png" />
</li>
<li class="slideshow__item">
<img src="img/small/4.png" />
</li>
</ul>
</div>
<!-- Блок с заколовками и текстом -->
<header class="codrops-header">
<h1><span>Шаблон</span> Слайд-шоу <i>Анимированное слайд-шоу в перспективе</i></h1>
</header>
</div>
Осталось подключить скрипты в конце странице, желательно перед закрывающимся элементом body:
<link href="css/main.css" type="text/css" rel="stylesheet" />
<link href="css/mockup1.css" type="text/css" rel="stylesheet" />
<script src="js/modernizr.custom.js" type="text/javascript"></script>
Для каждого примера используется соответствующий скрипт adapt1.js, вот и всё слад-шоу на заднем фоне сайта готово. Вам же останется заменить картинки из примера на свои и у вас получиться красивый фон у сайта.