Хаки и Скрипты 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.Более подробно можно посмотреть в исходниках и в источнике,ну у меня все ,если что пишите в комментах ,постараюсь обьяснить подробнее

Можешь почитать и вот эту статейку "Это простенький график посещаемости на странице статистики сайта"

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

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