Шатающаяся презентация HTML — создаем презентацию на HTML

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

Живой пример презентации:

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

• Создание презентаций на HTML и настройка
• Создание презентаций на HTML. Часть 2 — для начинающих

Презентация HTML — из чего она состоит

Сперва HTML

Структура презентации — это ненумерованный список <ul>. Ниже вы можете увидеть ее структуру:

1
2
3
4
5
6
7
8
9
10

<div id="slideshow" class="slideshow">
    <ul>
        <li>
            <div class="slide">
                <!-- Содержимое слайда -->
            </div>
        </li>
        <!-- Еще слайды -->
    </ul>
</div>

Так как структура презентации — это ненумерованный список <ul>, то каждый элемент списка — это отдельный слайд. А точнее, в каждом элементе <li> есть блок <div> с идентификатором slide, в котором и находится всё содержимое слайда.

То есть если вы хотите добавить слайды, вам нужно создать еще несколько элементов <li>, в каждом из которых есть блок <div> с идентификатором slide.

С HTML структурой разобрались, сейчас нужно посмотреть что еще нужно подключить для этих красивых эффектов.

Конечно же CSS

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

1

<link rel="stylesheet" type="text/css" href="css/slideshow.css" />

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

Немного JS

И последнее что нам нужно сделать — это подключить JS библиотеки чтобы это всё заработало в таком виде как на демо:

1
2
3
4
5
6
7
8
9
10

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

Вместо slideshow необходимо указать идентификатор блока, в котором находится список <ul> </ul>.

Вывод

Некоторые могут сказать что это больше похоже на галерею какую-нибудь, но я вижу это как презентацию, которую посетитель может самостоятельно и не спеша посмотреть. Для галереи есть более интересные способы ее отображения.

Успехов!

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

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