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

Відео: Внутрішній космос | Слайдшоу-медитація | 3 години музики | 1500 зображень

Фішка з розміщенням фонового зображення дійшла і до рунету. Зараз практично не залишилося односторінкових сайтів, де б в першому екрані ми не побачили б фонове зображення (іноді підлозі розмите), а «над ним» написаний заголовок і підзаголовок. Так, це виглядає дуже стильно і красиво, але і це можна поліпшити. Але як поліпшити фонове зображення, при цьому зберегти цей стиль? Це ми і розглянемо в цій статті.

Що ще є на сайті з цієї теми:

• Слайд-шоу у вигляді мозаїки
• Програма для створення слайд-шоу на HTML5
• Креативний слайдер для сайту jQuery

Також звернете увагу на статтю про те, як зробити фонове зображення адаптивним в різних видів пристроїв:

• Робимо фонове зображення адаптивним

Для початку просто подивіться приклади і і переконайтеся в тому, що цей ефект вносить родзинку для сторінки:

Відео: Як змінити слайдшоу на постійне зображення на робочому столі в Windows 10

Подивитися прімерСкачать

Ось як виглядають деякі фонові зображення з демо:

Як використовувати даний ефект?

HTML частина

Ми будемо розглядати на прикладі Демо 1.

Підключаємо між тегами наступні стилі (normalize.css, mockup1.css) І скрипт Modernizr.js:

123

lt;link rel="Stylesheet" type="Text / css" href="Css / normalize.css" /gt;lt;link rel="Stylesheet" type="Text / css" href="Css / mockup1.css" /gt;lt;script src="Js / modernizr.custom.js"gt; lt;/scriptgt;

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

Відео: створення слайд-шоу з фотографій, створення відеороликів

Потім йде структура HTML сторінки:

Відео: ФОН під титри і слайд шоу

1234567891011121314

lt;div class="Mockup"gt;lt;img class="Mockup__img" src="Img / mockup.jpg" /gt;lt;div id="Mobile" class="Mobile"gt;lt;ul id="Slideshow" class="Slideshow"gt;lt;li class="Slideshow__item"gt; lt;img src="Img / small / 1.jpg" /gt; lt;/ligt;lt;li class="Slideshow__item"gt; lt;img src="Img / small / 2.jpg" /gt; lt;/ligt;lt;li class="Slideshow__item"gt; lt;img src="Img / small / 3.jpg" /gt; lt;/ligt;lt;li class="Slideshow__item"gt; lt;img src="Img / small / 4.jpg" /gt; lt;/ligt;lt;/ulgt;lt;/divgt;
class="Header"gt;lt;h1gt; lt;spangt; Шаблонlt;/spangt; Слайд шоу lt;igt; Анимированное слайд-шоу в перспективіlt;/igt; lt;/h1gt;lt;/headergt;lt;/divgt;

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

• Рядок: 2 - задається фонове зображення сторінки
• Рядки: з 5 по 8 - зображення для слайд-шоу
• Рядок: 12 - заголовок і підзаголовок

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

jQuery частина

Залишився маленький нюанс з адаптивністю. Щоб вона все таки була присутня перед закриває тегом необхідно розмістити ось ці скрипти (classie.js і main.js):

123456789101112131415161718192021222324252627282930313233343536373839

lt;script src="Js / classie.js"gt; lt;/scriptgt;lt;script src="Js / main.js"gt; lt;/scriptgt;lt;scriptgt; (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 () -}}) () -lt;/scriptgt;

Також для інших демо необхідні файли font-awesome.css і animate.css. Їх Ви можете знайти в архіві із кодами.

висновок

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

Успіхів!

джерело: оригінал

З повагою, Юрій Німець