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

11 ноября 2015 Антон Кулешов 2243 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

30 января 2015 Антон Кулешов

В сегодняшней статье давайте рассмотрим, как сделать простой вариант вкладок для сайта на jQuery. Данная реализация подойдет там, где необходимо установить простенькие табы, на дополнительных эффектах визуализации останавливаться не будем.

Эффект зеркального отражения

7 октября 2015 Антон Кулешов

Недавно я писал об 3D слайдере (ссылка ниже) и для его работы использовался маленький jQuery плагин reflection – этот скрипт позволяет добавить зеркальное отражение у картинки. Это довольно интересное решение, которое стоит добавить в копилку falbar. Полезность скрипта трудно переоценить: да, если вы прикрутили себе слайдер с пятью изображениями, то картинки можно подготовить и заранее в фотошопе, но если мы подгружаем новые картинки динамически или рандомной выборкой из, скажем, трех-четырех тысяч товаров нашего интернет магазина? Да, работа контент-менеджера встанет в копеечку, и скорее всего вы откажетесь от использования эффекта отражения в своем проекте.

Аутентификация через «ВКонтакте»

2 декабря 2014 Антон Кулешов

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