Exore LTD » jQuery » Интерактивная 3D галерея на CSS и jQuery
Лого SiteHere.ru

Октябрь 26, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Интерактивная 3D галерея на CSS и jQuery

Интерактивная 3D галерея на CSS и jQuery

Иногда появляется такая проблема, как лучше и креативнее расположить несколько изображений или фотографий с общей темой в одном месте. Как вариант можно создать слайдер(тем более их огромное множество). Но в этом уроке мы создадим интерактивную 3D галерею с помощью CSS3 и jQuery.

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

Несколько дней назад был урок "Великолепная интерактивная 3D модель", возможно он вас заинтересует:

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



HTML часть

Здесь мы располагаем наши изображения на странице с обтеканием слева:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="gallery">
    <div class="item">
        <img src="images/c2NAjXD.jpg" align="left">
        <span class="caption">
            <h1>
                SiteHere.RU
            </h1>
            <p>
                Пример текста
            </p>
        </span>
    </div>
    <div class="item">
    ...
    </div>
    ...
</div>


CSS часть

Затем прописываем следующие стили:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

.gallery {
    margin: 0 auto;
    width: 700px;
}
.gallery .item{
    cursor: pointer;
    position: relative;
    display: block;
    float: left;
    margin: 0 50px -175px;
    z-index: 1;
    transform-origin:20% 40%;
    -webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg);
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;
    -moz-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg);
    -moz-transition-property: all;
    -moz-transition-duration: 0.7s;
}
.gallery .item:hover {
    z-index: 2;
    -webkit-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg) scale(1.2);
    -moz-transform: translate3d(0, -50px, 0) scaleY(0.57) rotate(-45deg) scale(1.2);
}
.gallery .item.clicked{
    z-index: 3;
    -webkit-transform:none;
    -moz-transform:none;
}
.gallery .item .caption{
    display: none;
    border-radius: 3px 3px;
    font-family: helvetica, arial;
    background: white;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.45);
    width: 300px;
}
.gallery .item .caption:after{
background-color: #fff;
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    content: "";
    display: block;
    height: 15px;
    left: -5px;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    -webkit-transform: rotate( 45deg );
    -moz-transform: rotate( 45deg );
    width:  15px;
}
.gallery .item.left .caption:after{
    right: -8px;
    left: auto;
    box-shadow: 2px -1px 2px 0 rgba( 178, 178, 178, .4 );
}
.gallery .item .caption h1{
    color: black;
    font-weight: 100;
    text-align: center;
    letter-spacing: -1px;
    margin: 0 0 5px;
    margin-bottom: 10px;
border-bottom: 1px solid #EFEFEF;
padding-bottom: 10px;
}
.gallery .item .caption p{
     color: #444;  
    font-weight: 100;}
.gallery .item.clicked .caption{
    position: absolute;
    top: 25px;
    display: inline; 
    -webkit-transition-property: display;
    -webkit-transition-duration: 0.7s;
    -moz-transition-property: display;
    -moz-transition-duration: 0.7s;
}
.gallery .item.clicked.right .caption {
    left: 115%;
    margin-left: 15px;
 
}
.gallery .item.clicked.left .caption {
    right: 115%;
     margin-right: 15px;
}
.gallery .item.clicked img {
    box-shadow:  0 0 25px rgba(0,0,0,0.25);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
}
.gallery .item img {
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.7s;
    -moz-transition-property: all;
    -moz-transition-duration: 0.7s;
    box-shadow:  -10px 10px 25px rgba(0,0,0,0.25);
    max-width: 100%;
    width: 190px;
    height: 340px;
}


jQuery часть

И последним шагом осталось добавить событие при нажатии:

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

$(document).ready(function () {
    $(".item").click(function (e) {
        e.stopPropagation();
        $(".item").removeClass("clicked");
        $(this).toggleClass("clicked");
        $("body").addClass("showing-item");
 
        var offset = $(this).offset();
        var pos = offset.left + $(this).width()
        var center = $(".gallery").width() / 2;
        if (pos > center) {
            var align = "left";
        } else {
            var align = "right";
        }
        $(this).removeClass(".left, .right").addClass(align);
 
        return false;
    });
 
    $('html').click(function () {
        $(".item").removeClass("clicked");
        $("body").removeClass("showing-item");
    });
});

Начинающим сайтостроителям приходится самостоятельно выбирать как учиться. Книги, курсы, очно или дистанционно? А может видеоуроки помогут? Но разве не лучше изучать основы HTML и ВЕБ дизайна рядом с профессионалом? В любом случае вам потребуется упорство, немного свободного времени и горячее желание :).



Вывод

Пусть данная галерея работает лишь в браузерах WebKit, но выглядит она классно на мой взгляд.


Успехов!

Источник: www.onextrapixel.com

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

1 комментарий к записи
  • Елена

    Для меня это очень актуальная тема. Спасибо за полезную информацию

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *