Простые примеры слайд шоу в html. Текстовые эффекты «Typography Effects». Полноэкранное jQuery cлайд-шоу

1. Обалденное слайд-шоу на jQuery «Elastic Slideshow»

Слайд-шоу с миниатюрами и описанием слайдов. Различные эффекты смены изображений. Предусмотрено два варианта: с автоматической сменой слайдов и без.

2. Pure CSS3 Slider

Симпатичный слайдер изображений с описанием и автоматической сменой слайдов. При наведении курсора на изображение ротация останавливается. Остановка сопровождается CSS3 эффектом.

3. jQuery плагин «Фоторама»

Хорошая галерея-слайдер.

4. Текстовые эффекты «Typography Effects»

Интересные эффекты для работы с типографикой с помощью CSS3 и jQuery. 7 различных классных эффектов.

5. Плагин «Darkbox»

Небольшой легкий плагин для отображения изображений во всплывающем блоке.

6. Hover-эффект на jQuery

Круговой эффект при наведении.

7. Анимированные jQuery CSS3 кнопки

Много различных анимированных CSS3 эффектов для создания потрясающих кнопок для вашего сайта. Просто очень клевые эффекты при наведении.

8. HTML5 jQuery смена фоновых изображений

При нажатии на миниатюры фоновые изображения сменяют друг друга с эффектом размытия. При изменении размера окна браузера изменяется размер фонового изображения.

8. Interactive Typography Effects

Интересные текстовые эффекты с использованием HTML5 и jQuery (4 различных эффекта). Наведите курсор на текст, чтобы увидеть эффект.

9. Всплывающие подписи изображений

Много различных анимированных эффектов при наведении для реализации всплывающих подписей изображений.

10. Плагин «Portamento»

Плавающий блок на jQuery. Всегда остается в зоне видимости при прокрутки страницы вниз.

11. Скроллеры содержимого

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

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

13. Плагин «Tiny Scrollbar»

jQuery плагин для реализации вертикальной и горизонтальной прокрутки контента.

14. Плагин «jScrollPane»

Кросс-браузерная прокрутка содержимого в блоке.

15. Плавающий блок «Scroll Follow»

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

16. Всплывающие панели «SideBar»

Выезжающие панели со всех сторон веб-страницы.

17. Эффектные CSS3 решения для оформления страницы-заглушки

Три варианта реализации анимированных эффектов для создания заглушки «Сайт в разработке».

17. Эффект при прокрутке страницы

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

19. Плагин «fancyBox 2»

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

20. Minimit Gallery

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

21. jQuery News Ticker

Ротатор новостей на сайте. Сообщения сменяют друг друга и появляются с использованием интересного эффекта печатной машинки. Смену новостей можно остановить, нажав на кнопку «Пауза». Стрелочками можно переходить от одного сообщения к другому.

22. Adaptive Images

Масштабируемые изображения для отображения на мобильных устройствах. Размеры изображений зависят от размера окна. Используемые технологии: javascript и PHP5.

23. vScroller

Вертикальный jQuery, CSS3 скроллер. Настраивается скорость прокрутки и время задержек.

24. Многоуровневое выпадающее меню «jQSimpleMenu»

Свежий jQuery плагин для создания многоуровневых горизонтальных выпадающих меню на сайте.

25. «jsCarousel 2.0»

jQuery плагин для реализации вертикальных и горизонтальных каруселей.

26. Ротатор «Dynamic News»

jQuery плагин для симпатичного отображения последних новостей из RSS ленты.

27. Анимированное меню

Анимированный эффект при наведении на пункт меню.

28. Анимированный текстовый эффект

Три эффектных примера работы с CSS свойством «background-clip: text». CSS3 эффект не работает в старых браузерах.

29. CSS3 jQuery эффект размытия

При наведении курсора на блок он увеличивается, а остальные блоки с текстом размываются на заднем плане.

31. jQuery всплывающие подсказки при наведении

33. Записки CSS3 и HTML5

Реализация блоков, похожих на записки с текстом.

34. Rlightbox

Отображение медиаконтента во всплывающих блоках: изображения, видео, Flash.

35. jQuery зуммер

Увеличение квадратной области.

36. CSS3 jQuery описание изображений

Плагин «Based Sliding Door Content Gallery» для реализации всплывающих описаний изображений. При наведении курсора на какое-нибудь из представленных изображений появляется краткое описание со ссылкой на полную статью. При наведении: эффект поднятия гаражных дверей.

37. Эффект «До и после» jQuery плагин «uCompare»

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

39. Интерактивные карты мира и Европы и США

1. Превосходное jQuery слайд-шоу

Большое эффектное слайд-шоу с использованием jQuery технологий.

2. jQuery плагин «Scale Carousel»

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

3. jQuery плагин «slideJS»

Слайдер изображений с текстовым описанием.

4. Плагин «JSliderNews»

5. CSS3 jQuery слайдер

При наведении курсора на стрелки навигации появляется круглая миниатюра следующего слайда.

6. Симпатичный jQuery слайдер «Presentation Cycle»

jQuery слайдер с индикатором загрузки изображений. Предусмотрена автоматическая смена слайдов.

7. jQuery плагин «Parallax Slider»

Слайдер с объемным фоновым эффектом. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: Opera, Google Chrome, IE.

8. Свежий, легкий jQuery слайдер «bxSlider 3.0»

На демонстрационной странице в разделе «examples» вы сможете найти ссылки на все возможные варианты использования этого плагина.

9. jQuery слайдер изображений, плагин «slideJS»

Стильный jQuery слайдер, безусловно сможет украсить ваш проект.

10. jQuery плагин слайд-шоу «Easy Slides» v1.1

Простой в использовании JQuery плагин для создания слайд-шоу.

11. Плагин «jQuery Slidy»

Легкий jQuery плагин в различном исполнении. Предусмотрена автоматическая смена слайдов.

12. jQuery CSS галерея с автоматической сменой слайдов

Если посетитель в течении определенного времени не нажмет на стрелки «Вперед» или «Назад», то галерея начнет прокручиваться автоматически.

13. jQuery слайдер «Nivo Slider»

Очень профессиональный качественный легкий плагин с валидным кодом. Предусмотрено много различных эффектов смены слайдов.

14. jQuery слайдер «MobilySlider»

Свежий слайдер. jQuery слайдер с различными эффектами смены изображений.

15. jQuery Плагин «Slider²»

Легкий слайдер с автоматической сменой слайдов.

16. Свежий javascript слайдер

Слайдер с автоматической сменой изображений.

Плагин для реализации слайд-шоу с автоматической сменой слайдов. Есть возможность управлять показом с помощью миниатюр изображений.

jQuery CSS слайдер изображений с использованием плагина NivoSlider .

19. jQuery слайдер«jShowOff»

Плагин для ротации содержимого. Три варианта использования: без навигации (с автоматической сменой в формате слайд-шоу), с навигацией в виде кнопок, с навигацией в виде миниатюр изображений.

20. Плагин «Shutter Effect Portfolio»

Свежий jQuery плагин для оформления портфолио фотографа. В галерее реализован интересный эффект смены изображений. Фотографии сменяют друг друга с эффектом похожим на работу затвора объектива.

21. Легкий javascript CSS слайдер «TinySlider 2»

Реализация слайдера изображений с использованием javascript и CSS.

22. Обалденный слайдер «Tinycircleslider»

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

23. Слайдер изображений на jQuery

Легкий слайдер «Slider Kit». Слайдер представлен в различном исполнении: вертикальный и горизонтальный. Также реализованы различные виды навигации между изображениями: с помощью кнопок «Вперед» и «Назад», с помощью колеса мыши, с помощью клика мыши по слайду.

24. Галерея с миниатюрами «Slider Kit»

Галерея «Slider Kit». Прокрутка миниатюр осуществляется как в вертикальном так и горизонтальном направлении. Переход между изображениями осуществляется с помощью: колеса мыши, щелчка мыши или наведения курсора на миниатюру.

25. jQuery слайдер содержимого «Slider Kit»

Вертикальный и горизонтальный слайдер контента на jQuery.

26. jQuery слайд-шоу «Slider Kit»

Слайд-шоу с автоматической сменой слайдов.

27. Легкий профессиональный javascript CSS3 слайдер

Аккуратный слайдер на jQuery и CSS3, созданный в 2011 году.

jQuery слайд-шоу с миниатюрами.

29. Простое jQuery слайд-шоу

Слайд-шоу с кнопками навигации.

30. Потрясное слайд-шоу jQuery «Skitter»

jQuery плагин «Skitter» для создания потрясающего слайд-шоу. Плагин поддерживает 22 (!) вида различных анимационных эффектов при смене изображений. Может работать с двумя вариантами навигации по слайдам: с помощью номеров слайдов и с помощью миниатюр. Обязательно посмотрите демонстрацию, очень качественная находка. Используемые технологии: CSS, HTML, jQuery, PHP.

31. Слайд-шоу «Awkward»

Функциональное слайд-шоу. В виде слайдов могут выступать: простые изображения, изображения с подписями, изображения с всплывающими подсказками, видео-ролики. Для навигации можно использовать стрелки, ссылки на номера слайдов и клавиши вправо/влево на клавиатуре. Слайд-шоу выполнено в нескольких вариантах: с миниатюрами и без них. Для просмотра всех вариантов пройдитесь по ссылкам Demo #1 - Demo #6 расположенным сверху на демонстрационной странице.

Очень оригинальное оформление слайдера изображений, напоминающее веер. Анимированная смена слайдов. Навигация между изображениями осуществляется с помощью стрелок. Предусмотрена также автоматическая смена, которую можно включать и выключать с помощью кнопки Play/Pause, расположенной сверху.

Анимированный jQuery слайдер. Фоновые изображения автоматически масштабируются при изменении размеров окна браузера. Для каждого изображения выплывает блок с описанием.

34. «Flux Slider» слайдер на jQuery и CSS3

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

35. jQuery плагин «jSwitch»

Анимированная jQuery галерея.

Легкое слайд-шоу на jQuery c автоматической сменой слайдов.

37. Новая версия плагина «SlideDeck 1.2.2»

Профессиональный слайдер контента. Возможны варианты с автоматической сменой слайдо, а также вариант с использованием колеса мыши для перехода между слайдами.

38. jQuery слайдер «Sudo Slider»

Легкий сладер изображений на jQuery. Очень много вариантов реализации: горизонтальная и вертикальная смена изображений, со ссылками на номер слайда и без них, с подписями изображений и без, различные эффекты смены изображений. Есть функция автоматической смены слайдов. Ссылки на все примеры реализации можно найти на демонстрационной странице .

39. jQuery CSS3 слайд-шоу

Слайд-шоу с миниатюрами поддерживает режим автоматической смены слайдов.

40. jQuery cлайдер «Flux Slider»

Слайдер с множеством эффектов смены изображений.

41. Простой jQuery слайдер

Стильный слайдер изображений на jQuery.

42. «Craftyslide» cлайд-шоу jQuery

43. Полноэкранное jQuery cлайд-шоу

jQuery HTML5 cлайд-шоу, растягивающееся на всю ширину экрана со звуковым сопровождением.

Простое слайд-шоу на jQuery.

• Перевод
• Tutorial

Благодаря CSS3 мы можем создавать эффекты анимации, не используя JavaScript, что упростит работу многих разработчиков.
Мы не должны злоупотреблять CSS3, потому что старые браузеры не поддерживают все его свойства. В любом случае, все мы видим потенциал CSS3, и в этой статье мы обсудим, как создать зацикленный слайдер изображений, используя только CSS3-анимацию.

Разделы статьи

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

1. Введение
   Описание базовых понятий, связанные с CSS3-переходами и анимацией по ключевым кадрам.
2. Разметка HTML
   Создание HTML-разметки для слайдера изображений.
3. Стили CSS
   Создание таблицы стилей для отображения слайдера.
4. CSS3-анимация по ключевым кадрам
   Добавление анимации к слайдеру. Мы рассмотрим различные процессы, происходящие здесь.
5. 
   Добавление индикатора выполнения для нашего слайдера.
6. 
   Добавление всплывающей подсказки, для отображения заголовков.
7. CSS3-переходы
   Выводим подсказку при наведении курсором, используя CSS3-переходы
8. Пауза и рестарт
9. Демонстрация
   Показываем слайдер в действии.
10. Заключение
    Заключительные размышления.

1. Введение

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

Базовые понятия CSS3-переходов

Обычно, когда вы изменяете значение CSS, изменения отображаются статично. Теперь, благодаря свойству перехода, мы можем с легкостью производить изменения от одного состояния к другому.

Мы можем использовать четыре свойства перехода:

Transition-property
Определяет имя (имена) свойств CSS, к которым должны быть применены переходы.

Transition-duration
Определяет время, за которое должен произойти переход.

Transition-timing-function
Определяет, как вычислены промежуточные значения перехода.

Transition-delay
Определяет, когда переход запускается.

В настоящее время переходы CSS3 поддерживаются в Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ и IE 10. Поскольку технология все еще относительно новая, то необходимы префиксы для браузеров . Синтаксис одинаков для всех браузеров за исключением добавлениея необходимых префиксов. Мы опустим их в этой статье, но не забудем включить префиксы в код.

Давайте посмотрим, как применить простой переход к ссылке:
a { color: #000; transition-property: color; transition-duration: 0.7s; transition-timing-function: ease-in; transition-delay: 0.3s; } a:hover { color: #fff; }

Присваивая анимацию элементу, вы можете также использовать сокращеную форму:
a { color: #000; transition: color 0.7s ease-in 0.3s; } a:hover { color: #fff; }

Базовые понятия CSS3-анимации

CSS-анимация позволяет нам создавать анимацию без JavaScript при помощи набора ключевых кадров.
В отличие от CSS-переходов, анимация по ключевым кадрам в настоящее время поддерживается только в WebKit-браузерах, Firefox, а также в скором времени и в IE 10. Неподдерживаемые браузеры просто проигнорируют код анимации.

У свойства анимации есть восемь подсвойств:

Animation-delay
Определяет, когда анимация запускается.

Animation-direction
Определяет, должна ли анимация играть в обратном направлении в чередующихся циклах.

Animation-duration
Определяет отрезок времени, который анимация занимает, чтобы завершить один цикл.

Animation-iteration-count
Определяет количество циклов анимации перед остановкой.

Animation-name
Определяет имя правила в @keyframes.

Animation-play-state
Определяет, проигрывается ли анимация или приостановлена.

Animation-fill-mode
Определяет, как CSS-анимация должна применить стили к своей цели до и после выполнения.

Давайте посмотрим, как применить простую анимацию к блоку:
/* Элемент, к которому мы применяем анимацию. */ div { animation-name: move; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.5s; animation-iteration-count: 2; animation-direction: alternate; -moz-animation-name: move; -moz-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -moz-animation-delay: 0.5s; -moz-animation-iteration-count: 2; -moz-animation-direction: alternate; -webkit-animation-name: move; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 0.5s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; } /* Код самой анимации. */ @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } } @-moz-keyframes move { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(100px); } } @-webkit-keyframes move { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(100px); } }

Мы можем использовать сокращенную запись, чтобы задать сразу все свойства анимации:
div { animation: move 1s ease-in-out 0.5s 2 alternate; -moz-animation: move 1s ease-in-out 0.5s 2 alternate; -webkit-animation: move 1s ease-in-out 0.5s 2 alternate; }

Ключевые кадры

Каждый ключевой кадр описывает, как анимированный элемент должен вести себя в данной временной точке анимации. Ключевые кадры принимают процентные значения, чтобы определить время: 0% - запуск анимации, в то время как 100% - конец. Вы можете дополнительно добавить промежуточные кадры для анимаций.

/* Анимация от 0% до 100% */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } /* Анимация с промежуточным кадром */ @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(100px); } }

У W3C есть много полезной и подробной информации про “CSS3-анимацию ”

Базовая структура нашего слайдера

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

Как вы видите, слайдер будет контейнером, в котором будут отображаться изображения.
Анимация очень проста: изображение следует по заданному направлению, изменяя свойства " top ", " z-index " и " opacity ".
Давайте перейдем прямо к HTML-разметке, чтобы создать слайдер.

2. HTML-разметка

Разметка HTML очень проста. Она четко организована и благоприятна для SEO. Давайте сначала посмотрим полный код, а затем подробно выясним, как все работает.

Div id="slider"
Это основной контейнер слайдера. У него нет определенной функции, но он нам нужен, чтобы приостановить анимацию.

Div id="mask"
Мы будем использовать этот блок, чтобы скрыть всё, что происходит за пределами слайдера. В дополнение к этому, маска позволяет нам отображать содержание слайдера.

Li id="first" class="firstanimation"
У каждого элемента списка есть ID и класс. ID выводит на экран подсказку, а класс привязан к анимации, которая должна произойти.

Div class="tooltip"
Этот блок выводит на экран заголовок изображения. Можете изменить его в зависимости от потребностей, например, делая его кликабельным или добавляя краткое описание.

Div class="progress-bar"
Этот блок содержит функцию, которая показывает прогресс выполнения анимации.

Теперь пришло время к формированию CSS-файла.

3. Стили CSS

Давайте создадим базовую структуру слайдера. У него будет тот же размер, что у изображения. Свойство границы будет полезно для создания рамки вокруг изображения.

/* Структура слайдера */ #slider { background: #000; border: 5px solid #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); height: 320px; width: 680px; margin: 40px auto 0; overflow: visible; position: relative; }

Класс " mask " скроет все элементы, которые расположены за пределами слайдера. Его высота должна быть равной высоте слайдера.

/* Прячем все за пределами слайдера */ #mask { overflow: hidden; height: 320px; }

Наконец, чтобы отсортировать список изображений, будем использовать " position: absolute " и " top: -325px " так, чтобы все изображения были расположены за пределами слайдера.

/* Список изображений */ #slider ul { margin: 0; padding: 0; position: relative; } #slider li { width: 680px; /* Ширина изображения */ height: 320px; /* Высота изображения */ position: absolute; top: -325px; /* Исходное положение (за пределами слайдера) */ list-style: none; }

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

4. CSS3-анимация по ключевым кадрам

Прежде, чем мы начнем с анимации, мы должны определить некоторые параметры, чтобы получить правильное представление анимации.
Как мы знаем, полная продолжительность анимации составит 25 секунд, но мы должны знать, сколько будет ключевых кадров в 1 секунде.
Давайте решим ряд операций, который даст нам точное число ключевых кадров и полную продолжительность анимации. Вот вычисления:
Определяем общее количество изображений, в слайдере: 5 ;
Определяем продолжительность анимации для каждого изображения: 5 секунд ;
Определяем полную продолжительность анимации, умножая общее количество изображений на продолжительность каждого: 5 изображений × 5 секунд = 25 секунд ;
Вычисляем, сколько ключевых кадров (процентов) будет в одной секунде.
Делим общее количество ключевых кадров на полную продолжительность анимации: 100%/25 = 4% ,
В одной секунде 4 ключевых кадров, или 1 секунда равна 4% от анимации.

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

#slider li.firstanimation { animation: cycle 25s linear infinite; } #slider li.secondanimation { animation: cycletwo 25s linear infinite; } #slider li.thirdanimation { animation: cyclethree 25s linear infinite; } #slider li.fourthanimation { animation: cyclefour 25s linear infinite; } #slider li.fifthanimation { animation: cyclefive 25s linear infinite; }

Как только свойства анимации были присвоены, мы должны использовать ключевые кадры, чтобы привести анимацию в движение.
Следуя этому принципу, мы можем соединить все анимации друг с другом, даже если они независимы друг от друга. Это и даст нам бесконечный цикл.
Я добавил свойства " opacity " и " z-index ", чтобы сделать переход от одного изображения к следующему более привлекательным.
Как видите в коде, у первой анимации больше ключевых кадров, чем у остальных. Причина этого состоит в том, что, когда слайдер запущен, первое изображение освобождает место для второго, но когда последнее изображение закончит свою анимацию, у первого изображения должны быть дополнительные ключевые кадры, чтобы не создавать прерываний между циклами анимации.

Вот весь код для анимаций:
/* Анимация */ @keyframes cycle { 0% { top: 0px; } /* При запуске слайдера, первое изображение уже видимо */ 4% { top: 0px; } /* Стартовая позиция */ 16% { top: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */ 20% { top: 325px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/ 21% { top: -325px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */ 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */ 100%{ top: 0px; opacity: 1; } } @keyframes cycletwo { 0% { top: -325px; opacity: 0; } /* Исходная позиция за пределами маски */ 16% { top: -325px; opacity: 0; }/* Начало движения с 16% */ 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } /* С 20% до 24% (в течении 1 секунды) - вход*/ 36% { top: 0px; opacity: 1; z-index: 0; } /* С 24% до 36 % (3 секунды) изображение видимо */ 40% { top: 325px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)- выход */ 41% { top: -325px; opacity: 0; z-index: -1; } /* Возврат на исходную позицию */ 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100%{ top: 325px; opacity: 0; z-index: 0; } }

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

Процесс анимации индикатора выполнения совпадает с тем, что был для слайдера. Создаем сам индикатор выполнения:

/* Индикатор выполнения */ .progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; animation: fullexpand 25s ease-out infinite; }

Не бойтесь синтаксиса. Тут есть такая же функция как «from to». Вы можете увидеть, что ключевые кадры устанавливают появление и исчезновение каждого изображения.

/* Строка состояния анимации */ @keyframes fullexpand { /* В этих ключевых кадрах анимация стационарна */ 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } /* В этих - оживает */ 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } /* В этих - плавно заполняется */ 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } /* В этих ключевых кадрах индикатор выполнения завершил свой путь */ 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } /* В этих ключевых кадрах индикатор выполнения исчезнет, а затем возобновит цикл */ 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } }

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

Стили для подсказок:
#slider .tooltip { background: rgba(0,0,0,0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; } #slider .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 10px; }

Здесь мы сделали видимыми только заголовки изображений, но вы можете сделать так же для любого текста, ссылок и всего, чего захотите.

7. CSS3-переходы

Мы увидели, как применить CSS3-переходы к элементам, теперь давайте сделаем их для подсказок.
Если помните, мы добавили ID к каждому списку («first», «second», и т.д.), чтобы при наведении каждая подсказка была связана с отдельным изображением, при этом не появлялись все подсказки сразу.

#slider .tooltip { … transition: all 0.3s ease-in-out; } #slider li#first: hover .tooltip, #slider li#second: hover .tooltip, #slider li#third: hover .tooltip, #slider li#fourth: hover .tooltip, #slider li#fifth: hover .tooltip { left: 0px; }

8. Пауза и рестарт

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

#slider: hover li, #slider: hover .progress-bar { animation-play-state: paused; }

9. Демонстрация

Наконец, мы дошли до конца урока. Слайдер теперь готов на 100%!
(). Она работает в Firefox 5+, Safari 4+ и Google Chrome, а также iPhone и iPad. Можете также загрузить архив ().
Спасибо Massimo Righi за его изображения.

10. Заключение

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

От переводчика:
Если вы нашли какие-то ошибки перевода, прошу отписаться в личных сообщениях. Спасибо.

Теги:

• CSS3
• слайд-шоу

Добавить метки

• Перевод
• Tutorial

Благодаря CSS3 мы можем создавать эффекты анимации, не используя JavaScript, что упростит работу многих разработчиков.
Мы не должны злоупотреблять CSS3, потому что старые браузеры не поддерживают все его свойства. В любом случае, все мы видим потенциал CSS3, и в этой статье мы обсудим, как создать зацикленный слайдер изображений, используя только CSS3-анимацию.

Разделы статьи

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

1. Введение
   Описание базовых понятий, связанные с CSS3-переходами и анимацией по ключевым кадрам.
2. Разметка HTML
   Создание HTML-разметки для слайдера изображений.
3. Стили CSS
   Создание таблицы стилей для отображения слайдера.
4. CSS3-анимация по ключевым кадрам
   Добавление анимации к слайдеру. Мы рассмотрим различные процессы, происходящие здесь.
5. 
   Добавление индикатора выполнения для нашего слайдера.
6. 
   Добавление всплывающей подсказки, для отображения заголовков.
7. CSS3-переходы
   Выводим подсказку при наведении курсором, используя CSS3-переходы
8. Пауза и рестарт
9. Демонстрация
   Показываем слайдер в действии.
10. Заключение
    Заключительные размышления.

1. Введение

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

Базовые понятия CSS3-переходов

Обычно, когда вы изменяете значение CSS, изменения отображаются статично. Теперь, благодаря свойству перехода, мы можем с легкостью производить изменения от одного состояния к другому.

Мы можем использовать четыре свойства перехода:

Transition-property
Определяет имя (имена) свойств CSS, к которым должны быть применены переходы.

Transition-duration
Определяет время, за которое должен произойти переход.

Transition-timing-function
Определяет, как вычислены промежуточные значения перехода.

Transition-delay
Определяет, когда переход запускается.

В настоящее время переходы CSS3 поддерживаются в Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ и IE 10. Поскольку технология все еще относительно новая, то необходимы префиксы для браузеров . Синтаксис одинаков для всех браузеров за исключением добавлениея необходимых префиксов. Мы опустим их в этой статье, но не забудем включить префиксы в код.

Давайте посмотрим, как применить простой переход к ссылке:
a { color: #000; transition-property: color; transition-duration: 0.7s; transition-timing-function: ease-in; transition-delay: 0.3s; } a:hover { color: #fff; }

Присваивая анимацию элементу, вы можете также использовать сокращеную форму:
a { color: #000; transition: color 0.7s ease-in 0.3s; } a:hover { color: #fff; }

Базовые понятия CSS3-анимации

CSS-анимация позволяет нам создавать анимацию без JavaScript при помощи набора ключевых кадров.
В отличие от CSS-переходов, анимация по ключевым кадрам в настоящее время поддерживается только в WebKit-браузерах, Firefox, а также в скором времени и в IE 10. Неподдерживаемые браузеры просто проигнорируют код анимации.

У свойства анимации есть восемь подсвойств:

Animation-delay
Определяет, когда анимация запускается.

Animation-direction
Определяет, должна ли анимация играть в обратном направлении в чередующихся циклах.

Animation-duration
Определяет отрезок времени, который анимация занимает, чтобы завершить один цикл.

Animation-iteration-count
Определяет количество циклов анимации перед остановкой.

Animation-name
Определяет имя правила в @keyframes.

Animation-play-state
Определяет, проигрывается ли анимация или приостановлена.

Animation-fill-mode
Определяет, как CSS-анимация должна применить стили к своей цели до и после выполнения.

Давайте посмотрим, как применить простую анимацию к блоку:
/* Элемент, к которому мы применяем анимацию. */ div { animation-name: move; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.5s; animation-iteration-count: 2; animation-direction: alternate; -moz-animation-name: move; -moz-animation-duration: 1s; -moz-animation-timing-function: ease-in-out; -moz-animation-delay: 0.5s; -moz-animation-iteration-count: 2; -moz-animation-direction: alternate; -webkit-animation-name: move; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 0.5s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate; } /* Код самой анимации. */ @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } } @-moz-keyframes move { from { -moz-transform: translateX(0); } to { -moz-transform: translateX(100px); } } @-webkit-keyframes move { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(100px); } }

Мы можем использовать сокращенную запись, чтобы задать сразу все свойства анимации:
div { animation: move 1s ease-in-out 0.5s 2 alternate; -moz-animation: move 1s ease-in-out 0.5s 2 alternate; -webkit-animation: move 1s ease-in-out 0.5s 2 alternate; }

Ключевые кадры

Каждый ключевой кадр описывает, как анимированный элемент должен вести себя в данной временной точке анимации. Ключевые кадры принимают процентные значения, чтобы определить время: 0% - запуск анимации, в то время как 100% - конец. Вы можете дополнительно добавить промежуточные кадры для анимаций.

/* Анимация от 0% до 100% */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } /* Анимация с промежуточным кадром */ @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(100px); } }

У W3C есть много полезной и подробной информации про “CSS3-анимацию ”

Базовая структура нашего слайдера

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

Как вы видите, слайдер будет контейнером, в котором будут отображаться изображения.
Анимация очень проста: изображение следует по заданному направлению, изменяя свойства " top ", " z-index " и " opacity ".
Давайте перейдем прямо к HTML-разметке, чтобы создать слайдер.

2. HTML-разметка

Разметка HTML очень проста. Она четко организована и благоприятна для SEO. Давайте сначала посмотрим полный код, а затем подробно выясним, как все работает.

Div id="slider"
Это основной контейнер слайдера. У него нет определенной функции, но он нам нужен, чтобы приостановить анимацию.

Div id="mask"
Мы будем использовать этот блок, чтобы скрыть всё, что происходит за пределами слайдера. В дополнение к этому, маска позволяет нам отображать содержание слайдера.

Li id="first" class="firstanimation"
У каждого элемента списка есть ID и класс. ID выводит на экран подсказку, а класс привязан к анимации, которая должна произойти.

Div class="tooltip"
Этот блок выводит на экран заголовок изображения. Можете изменить его в зависимости от потребностей, например, делая его кликабельным или добавляя краткое описание.

Div class="progress-bar"
Этот блок содержит функцию, которая показывает прогресс выполнения анимации.

Теперь пришло время к формированию CSS-файла.

3. Стили CSS

Давайте создадим базовую структуру слайдера. У него будет тот же размер, что у изображения. Свойство границы будет полезно для создания рамки вокруг изображения.

/* Структура слайдера */ #slider { background: #000; border: 5px solid #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); height: 320px; width: 680px; margin: 40px auto 0; overflow: visible; position: relative; }

Класс " mask " скроет все элементы, которые расположены за пределами слайдера. Его высота должна быть равной высоте слайдера.

/* Прячем все за пределами слайдера */ #mask { overflow: hidden; height: 320px; }

Наконец, чтобы отсортировать список изображений, будем использовать " position: absolute " и " top: -325px " так, чтобы все изображения были расположены за пределами слайдера.

/* Список изображений */ #slider ul { margin: 0; padding: 0; position: relative; } #slider li { width: 680px; /* Ширина изображения */ height: 320px; /* Высота изображения */ position: absolute; top: -325px; /* Исходное положение (за пределами слайдера) */ list-style: none; }

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

4. CSS3-анимация по ключевым кадрам

Прежде, чем мы начнем с анимации, мы должны определить некоторые параметры, чтобы получить правильное представление анимации.
Как мы знаем, полная продолжительность анимации составит 25 секунд, но мы должны знать, сколько будет ключевых кадров в 1 секунде.
Давайте решим ряд операций, который даст нам точное число ключевых кадров и полную продолжительность анимации. Вот вычисления:
Определяем общее количество изображений, в слайдере: 5 ;
Определяем продолжительность анимации для каждого изображения: 5 секунд ;
Определяем полную продолжительность анимации, умножая общее количество изображений на продолжительность каждого: 5 изображений × 5 секунд = 25 секунд ;
Вычисляем, сколько ключевых кадров (процентов) будет в одной секунде.
Делим общее количество ключевых кадров на полную продолжительность анимации: 100%/25 = 4% ,
В одной секунде 4 ключевых кадров, или 1 секунда равна 4% от анимации.

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

#slider li.firstanimation { animation: cycle 25s linear infinite; } #slider li.secondanimation { animation: cycletwo 25s linear infinite; } #slider li.thirdanimation { animation: cyclethree 25s linear infinite; } #slider li.fourthanimation { animation: cyclefour 25s linear infinite; } #slider li.fifthanimation { animation: cyclefive 25s linear infinite; }

Как только свойства анимации были присвоены, мы должны использовать ключевые кадры, чтобы привести анимацию в движение.
Следуя этому принципу, мы можем соединить все анимации друг с другом, даже если они независимы друг от друга. Это и даст нам бесконечный цикл.
Я добавил свойства " opacity " и " z-index ", чтобы сделать переход от одного изображения к следующему более привлекательным.
Как видите в коде, у первой анимации больше ключевых кадров, чем у остальных. Причина этого состоит в том, что, когда слайдер запущен, первое изображение освобождает место для второго, но когда последнее изображение закончит свою анимацию, у первого изображения должны быть дополнительные ключевые кадры, чтобы не создавать прерываний между циклами анимации.

Вот весь код для анимаций:
/* Анимация */ @keyframes cycle { 0% { top: 0px; } /* При запуске слайдера, первое изображение уже видимо */ 4% { top: 0px; } /* Стартовая позиция */ 16% { top: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */ 20% { top: 325px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/ 21% { top: -325px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */ 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */ 100%{ top: 0px; opacity: 1; } } @keyframes cycletwo { 0% { top: -325px; opacity: 0; } /* Исходная позиция за пределами маски */ 16% { top: -325px; opacity: 0; }/* Начало движения с 16% */ 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } /* С 20% до 24% (в течении 1 секунды) - вход*/ 36% { top: 0px; opacity: 1; z-index: 0; } /* С 24% до 36 % (3 секунды) изображение видимо */ 40% { top: 325px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)- выход */ 41% { top: -325px; opacity: 0; z-index: -1; } /* Возврат на исходную позицию */ 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100%{ top: -325px; opacity: 0; z-index: -1; } } @keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100%{ top: 325px; opacity: 0; z-index: 0; } }

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

Процесс анимации индикатора выполнения совпадает с тем, что был для слайдера. Создаем сам индикатор выполнения:

/* Индикатор выполнения */ .progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; animation: fullexpand 25s ease-out infinite; }

Не бойтесь синтаксиса. Тут есть такая же функция как «from to». Вы можете увидеть, что ключевые кадры устанавливают появление и исчезновение каждого изображения.

/* Строка состояния анимации */ @keyframes fullexpand { /* В этих ключевых кадрах анимация стационарна */ 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } /* В этих - оживает */ 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } /* В этих - плавно заполняется */ 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } /* В этих ключевых кадрах индикатор выполнения завершил свой путь */ 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } /* В этих ключевых кадрах индикатор выполнения исчезнет, а затем возобновит цикл */ 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } }

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

Стили для подсказок:
#slider .tooltip { background: rgba(0,0,0,0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; } #slider .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 10px; }

Здесь мы сделали видимыми только заголовки изображений, но вы можете сделать так же для любого текста, ссылок и всего, чего захотите.

7. CSS3-переходы

Мы увидели, как применить CSS3-переходы к элементам, теперь давайте сделаем их для подсказок.
Если помните, мы добавили ID к каждому списку («first», «second», и т.д.), чтобы при наведении каждая подсказка была связана с отдельным изображением, при этом не появлялись все подсказки сразу.

#slider .tooltip { … transition: all 0.3s ease-in-out; } #slider li#first: hover .tooltip, #slider li#second: hover .tooltip, #slider li#third: hover .tooltip, #slider li#fourth: hover .tooltip, #slider li#fifth: hover .tooltip { left: 0px; }

8. Пауза и рестарт

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

#slider: hover li, #slider: hover .progress-bar { animation-play-state: paused; }

9. Демонстрация

Наконец, мы дошли до конца урока. Слайдер теперь готов на 100%!
(). Она работает в Firefox 5+, Safari 4+ и Google Chrome, а также iPhone и iPad. Можете также загрузить архив ().
Спасибо Massimo Righi за его изображения.

10. Заключение

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

От переводчика:
Если вы нашли какие-то ошибки перевода, прошу отписаться в личных сообщениях. Спасибо.

Теги: Добавить метки

Плагин для создания красивейших слайдеров - iView. Множество настроек, навигация, таймер, API, поддержка touch устройств, вставка видео и адаптивность.

04.03.2013 1 692

Плагин для создания микро галереи на сайте. Автопоказ, возможность добавления описания для каждого изображения, и режим листания по кругу, т.е. зацикливание.

01.02.2013 1 153

Плагин jQuery.popeye это элегантное и красивое решение для показа галереи изображении не покидая страницы. На странице отображается только одно фото, при наведении появляется возможность пролистать или увеличить все изображения в данном наборе. Плагин прост в установке и настройке и разрабатывался, как альтернатива часто использующихся lightbox2, fancybox или colorbox, которые используют модальные окна.

23.11.2012 7 286

Отличный адаптивный jQuery слайдер - FlexSlider. Включает возможность навигации bullet (точками), позволяет использовать миниатюры вкупе с навигацией, возможность вставки видео в качестве слайда, опция карусели, а также плагин имеет небольшое API.

12.09.2012 4 667

Mobilyslider - простой плагин на jQuery весом всего 5Кб, при этом выглядит минималистично и стильно. Есть несколько дополнительных опции, в числе которых включение/отключение навигации, стрелок вперед/назад, авто слайдшоу, выбор вида перехода и др.

07.06.2012 1 403

Создадим полноэкранное слайдшоу, основная идея которого состоит в том, чтобы порезать текущий открытый слайд при навигации к следующему или предыдущему. Используя jQuery и CSS анимацию, мы можем получить уникальные переходы между слайдами.

09.05.2012 778

Слайдшоу на jQuery с музыкальным сопровождением с помощью кросс платформенной библиотеки jPlayer. Смена слайдов происходит в указанные промежутки музыкальной композиции.

04.05.2012 892

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

03.05.2012 2 061

Плагин слайдшоу базирующийся на jQuery и плагине easing. Добавлена возможность прокрутки слайдов с помощью колесика мышки. На демо страницах представлены различные варианты использования навигации по слайдам.

12.04.2012 1 387

Используя jmpress, сделаем jquery плагин для создания слайдшоу с интересными 3D эффектами для слайдов.