Красивый и простой слайдшоу на фон сайта

Большинство современных сайтов имеют статичный фон, которым уже никого не удивить. Пора вносить разнообразие и выделятся среди других, с помощью великолепного слайдера на фон сайта. Несмотря на его креативность, вас поразит его простота использования.

Наверняка многие из нас видели красивые сайты, на которых присутствует минималистичный фон, на котором часто встречаются заголовки, красивые кнопки и галереи. Немало можно встретить сайтов с анимированным фоном, что тоже вызывает приятные впечатления и заставляет остаться на сайте. Чего уж говорить, если фон реализован в виде галереи — приковывает внимание неимоверно!

Поверьте, то что вы видели не сравнится с этим слайдером на фоне сайта — он сочетает в себе минимализм и функциональность. Такое сочетание достаточно редкое и требует вашего внимания, чтобы добавить уникальности к будущим проектам. Учитывая, что в данный слайдер работает без использования громоздкого Flash — только привычный всем HTML, CSS и JS. Им крайне удобно пользоваться и установка не занимает особого труда, даже новичку.

Прежде всего хочу показать что он из себя представляет:

ПРИМЕР СКАЧАТЬ

Как использовать

Подключение, как я уже писал, не составит больших проблем — всё достаточно просто. Рассмотрим все действия поэтапно.

Начнём с нашего HTML: необходимо подключить в head 2 CSS-файла, в которых заданы правила для оформления нашей галереи, а также 1 JS-файл:

<head>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/mockup.css" />
<script src="js/modernizr.custom.js"></script>

</head>

<head>

</head>

Думаю, здесь нечего пояснять — всё и так понятно. Все необходимые файлы будут находится в папках css и js, соответственно (если вы всё ещё не скачали демо). После этого добавим структуру нашей галереи, непосредственно в body:

<body>

<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>
</div>

</body>

<body>

<img class="mockup__img" src="img/mockup.jpg" /> //фоновая картинка

<ul id="slideshow" class="slideshow"> //сам слайдер, в котором в виде списка представлены картинки

</ul>

</div>

</body>

Структура документа достаточно проста и при редактировании не возникнет никаких проблем, так как редактированию будут поддаваться лишь картинки в слайдере.

Следующим этапом будет добавление адаптивности к нашей галереи, с помощью 2 JS-файлов, которые необходимо разместить в конце:

<body>

...

<script src="js/classie.js"></script>
<script src="js/main.js"></script>
<script>
    (function() {
        new Slideshow( document.getElementById( 'slideshow' ) );
 
        /* Адаптивность */
        var body = docElem = window.document.documentElement,
            wrap = document.getElementById( 'wrap' ),
            mockup = wrap.querySelector( '.mockup' ),
            mockupWidth = mockup.offsetWidth;
 
            scaleMockup();
 
        function scaleMockup() {
            var wrapWidth = wrap.offsetWidth,
            val = wrapWidth / mockupWidth;
 
            mockup.style.transform = 'scale3d(' + val + ', ' + val + ', 1)';
        }
 
        window.addEventListener( 'resize', resizeHandler );
 
        function resizeHandler() {
            function delayed() {
                resize();
                resizeTimeout = null;
            }
            if ( typeof resizeTimeout != 'undefined' ) {
                clearTimeout( resizeTimeout );
            }
            resizeTimeout = setTimeout( delayed, 50 );
        }
 
        function resize() {
            scaleMockup();
        }
    })();
</script>

</body>

<body>

...

(function() {

new Slideshow( document.getElementById( 'slideshow' ) );

/* Адаптивность */

var body = docElem = window.document.documentElement,

wrap = document.getElementById( 'wrap' ),

mockup = wrap.querySelector( '.mockup' ),

mockupWidth = mockup.offsetWidth;

scaleMockup();

function scaleMockup() {

var wrapWidth = wrap.offsetWidth,

val = wrapWidth / mockupWidth;

mockup.style.transform = 'scale3d(' + val + ', ' + val + ', 1)';

}

window.addEventListener( 'resize', resizeHandler );

function resizeHandler() {

function delayed() {

resize();

resizeTimeout = null;

}

if ( typeof resizeTimeout != 'undefined' ) {

clearTimeout( resizeTimeout );

}

resizeTimeout = setTimeout( delayed, 50 );

}

function resize() {

scaleMockup();

}

})();

</script>

</body>

Итого

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

Не стоит забывать о том, что данный слайдшоу можно сделать ещё красивее и интереснее, используя стили animate, о которых следует знать каждому разработчику. Но помните о том, что не стоит злоупотреблять анимацией — с помощью неё необходимо дополнять сайт незначительными деталями, а не полностью анимировать.