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

11 ноября 2015 Антон Кулешов 2249 0

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

Реклама

На данный вариант слайд-шоу на заднем фоне я наткнулся на одном из популярных зарубежных сайтов - 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, вот и всё слад-шоу на заднем фоне сайта готово. Вам же останется заменить картинки из примера на свои.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Плавающее горизонтальное меню на jQuery

6 августа 2014 Антон Кулешов

Сейчас на многих сайтах можно увидеть плавающие меню, но, как бы оно сложно не выглядело, скрипт, в основном, один и тот же. В этой статье я разберу, как создать такое меню, без лишнего кода и CSS строк.

Табы для сайта на jQuery

21 октября 2014 Антон Кулешов

После прочтения этой статьи вы узнаете, как сделать у себя на сайте красивые табы потратив на это пару минут.

О том, как скачать видео с Ютуба и Вк

27 января 2016 Антон Кулешов

Оставим ненадолго серьёзные темы аутентификаций через социальные сети и сегодня я расскажу об очень приятном сервисе, который позволяет скачивать аудио и видео контент там, где это невозможно стандартными методами. Кнопка скачать попросту отсутствует на Ютубе, ВКонтакте, Фейсбук и куче других популярных сервисов. Конечно, продвинутый пользователь может скачать видео или аудио стандартными средствами браузера, но это сложно.