Отправляет email-рассылки с помощью сервиса Sendsay

Свежие уроки CSS3, HTML5, jQuery

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 142 RSS
←   Июнь 2014   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней 12 выпусков (1-2 раза в неделю)


Открыта: 27-04-2014

Автор
Юрий Немец

Статистика

142 подписчиков
0 за неделю
←   Все выпуски   →

Свежие уроки CSS3, HTML5, jQuery Слайд-шоу в виде мозаики


Слайд-шоу в виде мозаики

Сегодня мы будем иметь дело со слайд-шоу. Слайд-шоу обычно используется для того чтобы компактно расположить изображения, для дальнейшего показа пользователю. Мы рассмотрим как создать слайд-шоу на своём сайте, изображения которого будут меняться в виде мозаики на заднем фоне. Это очень красивый и интересный эффект, поэтому я рекомендую сразу посмотреть реальный пример. Также в этом уроке представлены три вида эффектов, поэтому вы можете выбрать тот, который вас больше всего устраивает.

Демо с 3-мя видами эффектов анимации вы можете увидеть ниже:

Смотреть пример

Как установить слайд-шоу себе?

Для слай-шоу нам необходимо разместить изображения в блоках <div> с классом panel, которые, в свою очередь, находятся в одном большом блоке с идентификатором boxgallery и классом boxgallery. Также обратите внимание на последний атрибут этого блока data-effect — он позволяет задавать для разных страниц, разные эффекты анимации изображений:

1
2
3
4
5
6

<div id="boxgallery" class="boxgallery" data-effect="effect-1">
    <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
    <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
    <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
    <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>

Продолжение - в полной новости.

--------------------

С Уважением, Юрий Немец
В избранное