Показать Меню
falbar Эффектом слайдера

Мир через грани с эффектом слайдера

Эффектом слайдера

Зачастую, в интернете можно найти довольно интересные вещи – одна проблема, возникает вопрос: для чего это нужно? О чем-то подобном я и расскажу сегодня.

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

Вот несколько примеров слайдов из демо данного скрипта.

1. Алмаз:

Слайдер алмаз

2. Треугольник Пенроуза:

Слайдер Треугольник Пенроуза

3. Куб:

Слайдер куб

Как видите слайды получаться достаточно интересными, и наличие его у себя в арсенале будет не лишним. Так же стоит отметить, что данное решение использует для своей работы элемент canvas из HTML5, поэтому старые браузеры вряд ли отобразят корректно, а поддержка в IE осуществляется с 9 версии.

Теперь приступим к его установке (разбираться будем на втором примере) и начнём с подключения стилей:

<link href="styles/normalize.css" type="text/css" rel="stylesheet" />
<link href="styles/main.css" type="text/css" rel="stylesheet" />
<link href="styles/component.css" type="text/css" rel="stylesheet" />

Далее добавим HTML разметку слайдера:

<div class="content">
	<div class="cache">
		<!-- Маски наложенные поверх картинки -->
		<img src="images/mask/triangle-1.svg">
		<img src="images/mask/triangle-2.svg">
		<img src="images/mask/triangle-3.svg">
		<!-- Картинки слайды -->
		<img src="images/graffiti-1.jpg">
		<img src="images/graffiti-2.jpg">
		<img src="images/graffiti-3.jpg">
	</div>
	<div class="wrapper">
		<div class="prism-slider">
			<ul class="navigation"></ul>
		</div>
		<div class="copy">
			<!--
				Описание с боку слайдера
			-->
		</div>
	</div>
</div>

И последние что нам осталось – это добавить скрипты в конце страницы перед закрывающимся элементом <body>:

<script src="js/utils/rAF.js"></script>
<script src="js/utils/easing.js"></script>
<script src="js/PrismSlider.js"></script>
<script src="js/slideshow2.js"></script>

Вот и всё, слайдер установлен. При отключении скриптов обращаем внимание, что для каждого вида есть свой скрипт slideshow(номер_демо).

Источник
tympanus.net

Подписаться на обновления

Комментариев еще не оставлено