qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Слайдер на css3 и jquery

Круговой слайдер css3
Просмотров: 6941  Скачан: 287 раз  Комментариев в теме: 1

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

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

К счастью, и здесь слайдер не оплошал, в круговом слайдере реализован потрясающий эффект кругового перехода слайда, с этим нам поможет JavaScript и небольшая автономная библиотека Impress.js, которая позволяет легко проектировать передовые презентации с эффектами на CSS3.

В целом слайдер очень не плох, отлично подойдёт для презентации любого продукта на вашем сайте, а красивый эффект явно не оставит равнодушным интерес посетителя.

Impress.js - поддерживаемые атрибуты:

data-x, data-y, data-z - Воспроизводит слайд на экране в 3D пространстве;

data-rotate, data-rotate-x, data-rotate-y - Поворачивает элемент вокруг указанной оси;

data-scale - Увеличивает или уменьшает размер слайда;

Шаг 1 - создание разметки

 

HTML

<div id="impress" class="impress-not-supported">			
    <div id="intro" class="step" data-x="0" data-y="0">
        <h2>Introducing Galaxy Nexus</h2>
        <p>Android 4.0<br /> Super Amoled 720p Screen<br /> 1.2 GHz Dual Core CPU<br /> 32 GB of storage<br /> Fast Camera</p>
        <img src="img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
    </div>		    
    <div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
        <h2>Simplicity in Android 4.0</h2>
        <p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel to Android. Simple layouts with subtle animations and delightful flourishes make everything feel alive. </p>
        <img src="img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
    </div>		    
    <div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
        <h2>Connect & Share</h2>
        <p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing with mobile devices just as easy at it is in person. </p>
        <img src="img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
    </div>		    
    <div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
        <h2>Instant Upload</h2>
        <p>Your photos upload themselves with Instant Upload, which makes it much easier to share them with family and friends.</p>
        <img src="img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
    </div>		    
    <div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
        <h2>Jam on with Google Music</h2>
        <p>Google Music makes discovery, purchase, and listening effortless and fun. Store your entire collection for free, and stream your music to your Galaxy Nexus, computer, or other Android devices.</p>
        <img src="img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
    </div>		    
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>

Шаг 2 - подключение стилей

 

CSS

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

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/impress.js"></script>
ЭТО ПРАВКА ДЛЯ IE 9
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
    $(function(){	
        var imp = impress();	
        $('#arrowLeft').click(function(e){
            imp.prev();
            e.preventDefault();
        });	
        $('#arrowRight').click(function(e){
            imp.next();
            e.preventDefault();
        });
    });
</script>
Материалы по теме:

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jqu...

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Круговой слайдерКруговой слайдер css3

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

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carou...

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....
Интересные публикации:

MCUBE SolutionsMCUBE Solutions

HTML шаблон MCUBE Solutions хорошо подойдёт для сайта в сфере бизнеса, в шаблоне используется flash слайдер, который......

Контактная форма (дизайн)Контактная форма (дизайн)

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

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню на cs...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню на css...

Горизонтальное меню на css3 с замечательным эффектом....

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....
  • Текущий 1.90/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.9/5( Голосов 21 )

Комментариев в теме: (1)
↑ 0 ↓
Руслан
Слайдер супер, слов нет. Только один вопрос?? Как реализовать чтоб он был автоматический? Спасибо большое!
Ответить Ответ с цитатой

Страницы: 1

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить