Показать Меню
falbar Слайд-шоу в фоне

Слайд-шоу на заднем фоне сайта

Слайд-шоу в фоне

В сегодняшней статье мы поговорим о фоновом изображении для сайта, которое является немаловажным элементом дизайна. Если для блога фон должен быть приятным и не отвлекать от основного контента, то для лэндинг пэйдж – фон фактически самый значимый элемент, благодаря которому создается общее впечатление, и он должен «цеплять» посетителя.

На данный вариант слайд-шоу на заднем фоне я наткнулся на одном из популярных зарубежных сайтов - tympanus.net, заглянув в демо, Вы увидите злободневный вариант его использования. Хотя, на мой взгляд, найти применение данному скрипту при изрядной доли фантазии можно весьма и весьма незаурядное.

Мы же рассмотрим реализацию на первом примере, в его авторской ипостаси, и начнем со скриптов и стилей, которые нам понадобятся для работы, подключаем их в шапке документа:

<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>:

<script src="js/classie.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/adapt1.js" type="text/javascript"></script>

Для каждого примера используется соответствующий скрипт adapt1.js, вот и всё слад-шоу на заднем фоне сайта готово. Вам же останется заменить картинки из примера на свои.

Источник
tympanus.net

Подписаться на обновления

Комментариев еще не оставлено