Хитка презентація html - творимо презентацію на html

Чому ж одразу хитка, або ще можна сказати Віхляєв? Тому що наша презентація html матиме один дуже цікавий ефект при зміні слайдів. Словами цього не пояснити, тому краще самі своїми очима дивіться. А взагалі, презентації html стають звичайною справою. Адже коли ви хочете щоб людина самостійно переглянув презентацію і не поспішаючи вивчив її, ви не будете робити її в PowerPoint, а потім знімати на відео і викладати на Youtube.

Живий приклад презентації:

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

Якщо вам не хочеться розбиратися в коді, тоді рекомендую подивитися такі уроки, де я також розглянув як створити HTML презентацію і зі знаннями HTML, таки без технічних знань:

• Створення презентацій на HTML і настройка
• Створення презентацій на HTML. Частина 2 - для початківців

Презентація HTML - з чого вона складається

спершу HTML

Структура презентації - це ненумерований список. Нижче ви можете побачити її структуру:

12345678910

lt;div id="Slideshow" class="Slideshow"gt;lt;ulgt;lt;ligt;lt;div class="Slide"gt;lt;/divgt;lt;/ligt;lt;/ulgt;lt;/divgt;

Так як структура презентації - це ненумерований список, то кожен елемент списку - це окремий слайд. А точніше, в кожному елементі є блок з ідентифікатором slide, в якому і знаходиться весь вміст слайда.

Тобто якщо ви хочете додати слайди, вам потрібно створити ще кілька елементів, в кожному з яких є блок із ідентифікатором slide.

З HTML структурою розібралися, зараз потрібно подивитися що ще потрібно підключити для цих красивих ефектів.

Звичайно ж CSS

Підключимо CSS для презентації. Цей файл стилів ви можете знайти в исходниках в паку CSS:

Відео: Відео-презентація "Основи HTML. пояснення"

1

lt;link rel="Stylesheet" type="Text / css" href="Css / slideshow.css" /gt;

Всі необхідні стилі для оформлення презентації знаходяться там.

трохи JS

І останнє що нам потрібно зробити - це підключити JS бібліотеки щоб це все запрацювало в такому виді як на демо:

12345678910

lt;script src="Js / snap.svg-min.js"gt; lt;/scriptgt;lt;script src="Js / classie.js"gt; lt;/scriptgt;lt;script src="Js / sliderFx.js"gt; lt;/scriptgt;lt;scriptgt; (function () {new SliderFx (document.getElementById ( `slideshow`), {easing: `cubic-bezier (.8,0, .2,1)`}) -}) () -lt;/scriptgt;

замість slideshow необхідно вказати ідентифікатор блоку, в якому перебуває список.

Відео: Як робити презентації з кодом

висновок

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

Успіхів!

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

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