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

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

11 ноября 2015 4590 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