Хаки и Скрипты Next Generation CMS : Слайдшоу и анимация : Слайдер с функцией увеличения изображения

irbees2008 Опубликовано - 19 - июля Слайдшоу и анимация

Автор: Mary Lou
Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: нужны навыки css html
Демо:

Сегодня представляю вам Blueprint - это простой слайдер контента с функцией зума глубины. Каждый слайд имеет области масштабирования, которые будут использоваться для расчета соответствующего значения масштаба для полноэкранной заливки.
После того, как значок увеличения нажат, область увеличения, а также страница масштабируются , создавая иллюзию, что зритель приближается деталь. После того, как вся страница раскрыта, мы показываем некоторые подробности.
В слайдере используется CSS переходы и dymanic.js для перемещения элементов слайдов и Dymanic.js является библиотекой JavaScript для создания анимации.
И так приступим к установке его на наш сайт
1.Скачиваем исходники Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем заливаем папки JS,CSS,Font в папку с вашим шаблоном.
2.В head подключаем стили и скрипт подключения шрифтов

Код:

<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/fonts/feather/style.css">
		<!-- Component styles -->
	<link rel="stylesheet" type="text/css" href="{{ tpl_url }}css/component.css" />
	<script src="{{ tpl_url }}js/modernizr.custom.js"></script>

3.Перед закрытием тега body подключаем скрипты

Код:

<script src="{{ tpl_url }}js/classie.js"></script>
	<script src="{{ tpl_url }}js/dynamics.min.js"></script>
	<script src="{{ tpl_url }}js/main.js"></script>

4.Ну и сам слайдер

Код:

	<!-- Blueprint header -->
	<header class="bp-header cf">
		<!-- Page title etc. -->
	</header>
	<!-- Grid -->
	<section class="slider">
		<div class="slide slide--current" data-content="content-1">
			<div class="slide__mover">
				<div class="zoomer flex-center">
					<img class="zoomer__image" src="Здесь адрес вашей картинки" alt="" />
					<div class="preview">
						<img src="Здесь адрес вашей картинки" alt="" />
						<div class="zoomer__area zoomer__area--size-2"></div>
					</div>
				</div>
			</div>
			<h2 class="slide__title"><span>The Classy</span> iPhone 6</h2>
		</div>
		<div class="slide" data-content="content-2">
				<div class="slide__mover">
					<div class="zoomer flex-center">
						<img class="Здесь адрес вашей картинки" alt="" />
						<div class="preview">
							<img src="Здесь адрес вашей картинки" alt="" />
							<div class="zoomer__area zoomer__area--size-4"></div>
						</div>
					</div>
				</div>
				<h2 class="slide__title"><span>The Fantastic</span> iPad Mini</h2>
			</div>
		<!-- ... -->
		<nav class="slider__nav">
			<button class="button button--nav-prev">
				<i class="icon icon--arrow-left"></i>
				<span class="text-hidden">Предыдущий слайд</span>
			</button>
			<button class="button button--zoom">
				<i class="icon icon--zoom"></i>
				<span class="text-hidden">Просмотр деталей</span>
			</button>
			<button class="button button--nav-next">
				<i class="icon icon--arrow-right"></i>
				<span class="text-hidden">Следующий слайд</span>
			</button>
		</nav>
	</section>
	<!-- /slider-->
	<!-- content -->
	<section class="content">
		<div class="content__item" id="content-1">
			<img class="content__item-img rounded-right" src="Здесь адрес вашей картинки" alt="" />
			<div class="content__item-inner">
				<h2>The iPhone 6</h2>
				<h3>Incredible performance for powerful apps</h3>
				<p>Здесь описание ...</p>
			</div>
		</div>
		<div class="content__item" id="content-2">
			<!-- ... -->
		</div>
		<!-- ... -->
		<button class="button button--close">
			<i class="icon icon--circle-cross"></i>
			<span class="text-hidden">Закрыть</span>
		</button>
	</section>

5.Более подробно можно посмотреть в исходниках и в источнике,ну у меня все ,если что пишите в комментах ,постараюсь обьяснить подробнее

Можешь почитать и вот эту статейку "Чашка чая на CSS3"

Это тоже интересно

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