Exore LTD » CSS3 » Слайд-шоу на фоновом изображении
Лого SiteHere.ru

Октябрь 29, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Слайд-шоу на фоновом изображении

Слайд-шоу на фоновом изображении

Фишка с размещением фонового изображения дошла и до рунета. Сейчас практически не осталось одностраничных сайтов, где бы в первом экране мы не увидели бы фоновое изображение (иногда полу размытое), а «над ним» написан заголовок и подзаголовок. Да, это смотрится очень стильно и красиво, но и это можно улучшить. Но как улучшить фоновое изображение, при этом сохранить этот стиль? Это мы и рассмотрим в этой статье.

Что еще есть на сайте из этой темы:

Также обратите внимание на статью о том, как сделать фоновое изображение адаптивным в разным видам устройств:

Для начала просто посмотрите примеры и и убедитесь в том, что этот эффект вносит изюминку для страницы:

Посмотреть примерСкачать

Вот как выглядят некоторые фоновые изображения из демо:

Пример фонового слайд-шоу 1
Пример фонового слайд-шоу 3
Пример фонового слайд-шоу 4

Как использовать данный эффект?

HTML часть

Мы будем рассматривать на примере Демо 1.

Подключаем между тегами <head> </head> следующие стили (normalize.css, mockup1.css) и скрипт Modernizr.js:

HTML КОД
1
2
3

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

Для каждого демо есть свой файл стилей с соответствующей цифрой. Для первого демо — это mockup1.css, для 2-го — mockup2.css и так далее. Все они находятся в папке css.

Затем идет структура HTML страницы:

HTML КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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="header">
        <h1><span>Шаблон</span> Слайд-шоу <i>Анимированное слайд-шоу в перспективе</i></h1>
    </header>
</div>

Коротко пройдемся по HTML:

  • Строка: 2 — задается фоновое изображение страницы
  • Строки: с 5 по 8 — изображения для слайд-шоу
  • Строка: 12 — заголовок и подзаголовок

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

jQuery часть

Остался маленький нюанс с адаптивностью. Чтобы она всё таки присутствовала перед закрывающим тегом </body> необходимо разместить вот эти скрипты (classie.js и main.js):

HTML&JS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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

Также для других демо необходимы файлы font-awesome.css и animate.css. Их Вы можете найти в архиве с исходниками.



Вывод

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


Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

1 комментарий к записи
  • ЯНЕЛЕНА

    Спасибо. Поставила на презентацию и очень даже смотрится. Ссылочку для показа можно вклеить?

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *