Октябрь 25, 2019 Запись была обновлена
3D сетка на сайте или потрясающая галерея
Кто размещает на сайте большое количество изображений, обычно делают это в виде галереи. В интернете их очень много. Но это не совсем обычная галерея, потому что с помощью этих функций можно разместить несколько новостей с красивым просмотром полной версии. А для галереи, то что мы будем рассматривать в этом уроке, подойдет наилучшим образом. Достаточно лишь посмотреть демо.
Похожие материалы:
- Галерея изображений на jQuery с интересным эффектом
- Интерактивная 3D галерея на CSS и jQuery
- Оригинальная анимированная галерея на CSS3
Пример можно увидеть здесь:
Посмотреть примерСкачать
HTML часть
HTML структура будет состоять из двух больших и основных частей. Первая часть это изображения, при клике на которые будет открываться подробное описание:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="grid-wrap"> <div class="grid"> <figure><img src="img/1.jpg" alt="img01"/></figure> <figure><img src="img/5.jpg" alt="img05"/></figure> <figure><img src="img/8.jpg" alt="img08"/></figure> <figure><img src="img/2.jpg" alt="img02"/></figure> <figure><img src="img/3.jpg" alt="img04"/></figure> <figure><img src="img/4.jpg" alt="img03"/></figure> <figure><img src="img/9.jpg" alt="img09"/></figure> <figure><img src="img/6.jpg" alt="img06"/></figure> <figure><img src="img/7.jpg" alt="img07"/></figure> </div> </div> |
И вторая часть, подробное описание:
1 2 3 4 5 6 7 | <div class="content"> <div> <div class="dummy-img"></div> <p class="dummy-text">The only people...</p> <p class="dummy-text">The only people...</p> </div> </div> |
Перед тем как закрывается данный блок, также вставляем индикатор загрузки и кнопку в виде крестика, для того чтобы закрыть подробный просмотр:
1 2 | <span class="loading"></span> <span class="icon close-content"></span> |
CSS часть
Задаем стили для блока, в котором находятся изображения:
1 2 3 4 5 6 7 8 9 10 11 12 13 | grid-wrap { margin: 10px auto 0; max-width: 1090px; width: 100%; padding: 0; perspective: 1500px; } .grid { position: relative; transition: all 0.5s cubic-bezier(0,0,0.25,1); transform-style: preserve-3d; } |
Когда мы кликаем по любому изображению, то добавляем класс view-full, чтобы отдалить фон:
1 2 3 4 5 6 7 | .view-full .grid { transform: translateZ(-1500px); } .grid figure.active { opacity: 0; } |
Прописываем необходимые действия при повороте:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .grid .placeholder { pointer-events: none; position: absolute; transform-style: preserve-3d; transition: all 0.5s ease-out; } .placeholder > div { display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .placeholder .front img { width: 100%; height: 100%; } .placeholder .back { background: white; transform: rotateY(180deg); } |
Когда появляется подробная информация, то есть маленькая задержка:
1 2 3 | .view-full .placeholder { transition: all 0.5s 0.1s cubic-bezier(0,0,0.25,1); } |
Для вертикального и горизонтального поворота разные стили:
1 2 3 4 5 6 7 | .vertical .view-full .placeholder { transform: translateZ(1500px) rotateX(-179.9deg); } .horizontal .view-full .placeholder { transform: translateZ(1500px) rotateY(-179.9deg); } |
Javascript часть
И подключаем необходимые плагины для правильного отображения галереи:
1 2 3 4 5 6 | <script src="js/classie.js"></script> <script src="js/helper.js"></script> <script src="js/grid3d.js"></script> <script> new grid3D( document.getElementById( 'grid3d' ) ); </script> |
Вывод
Первой мыслью мне в голове была — это красивая галерея может из этого получиться. Но также можно красиво оформить новости, или диски с продуктами(для инфобизнесменов), а также многое другое, стоит лишь подключить фантазию.
Успехов!
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Торможение анимации давит на глаза…
А какой браузер вы используете? У меня Firefox 26.0 и анимация не тормозит.
Chrome последний…
здравствуйте. подскажите, пожалуйста, куда именно прописываются эти коды? как привязать свои изображения? где прописываются urlы?
Артем, легче будет разобраться, если скачать архив с демо и посмотреть его структуру. Там увидите где лежат изображения. А изображения необходимо прописывать в HTML.
Симпатично получилось, Юре большое спасибо. Возник маленький нюанс при установке шрифтов. Так в файле Demo.css прописываются пути к шрифтам из папки fonts/ codropsicons, в файле component.css прописываются пути к шрифтам из папки fonts/ fontawesome. Осталось не понятным как использовать шрифты находящиеся в папки fonts/ blokk, где они используются или прописываются на них пути. Или эти шрифты вообще не нужны?
Несколько добрых советов!
Вот несколько советов для тех, кто будет ставить эту фишку на сайт.
Для того что бы улучшить читабельность всплывающего текста, бесполезно крутить оптику в CSS. (я имею в виду: opacity) Просто в файле component.css находим
И там где color: #ddd; выставляем нужный цвет, например радикальный чёрный,
color: #000;
Для того что бы в сплывающей странице в верху была то же картинка, в HTML находим
и вставляем между тэгами свой путь до изображения, для наглядности:
Размер картинки: ширина: 600px, высота: 400px.
Красивого Вам сайта!
Спасибо за советы, я думаю, они обязательно кому-нибудь помогут 🙂
Здравствуйте, Юрий!
Меня заинтриговала данная фишка 3D. Попробовал скачать, изменил на свои изображения, но при нажатии на изображение, ни какого эффекта не происходит, страница как бы с изображениями, так и отображается, ни каких переходов нет! Может быть на моем компьютере что-то не установлено? Ни Explorer, ни Мазила никаких эффектов при нажатии на картинку не дает. Подскажите, пожалуйста! Надо очень-очень ко дню рождения начальника подготовить сюрприз.
Заранее благодарен!
Здравствуйте, Павел!
А в демо, которое находится на сайте, работает нормально? (демо находится здесь)
Здравствуйте, Юрий!
Спасибо за Ваш оперативный ответ.
Дело вот в чем. На сайте демо работает, я скачал (назову условно "сетку") сетку, изменил на нужные мне изображения. На моем дом (личном компе) все переходы работают отлично. Но моя цель установить сетку в качестве домашней страницы браузера на рабочем компе моей начальницы, у которой в начале апреля день рождения. Но ни на моей рабочей машине, ни начальника — ничего не происходит, т.е. браузер картинки отобразил и всё, хоть по несколько раз на них нажимай — эффекта никакого.
Я думаю, что на раб компе установлен стандартный набор программ, ничего лишнего, м.б. надо что-то доустановить? Может flashplayer нужно ещё дополнительно установить на тот комп-р? Буду ждать Вашего комментария.
С уважением, Павел. 28.03.2017
Павел, проверьте работает ли по данной ссылке демо у вашей начальницы на компьютере. То есть без установки, просто по ссылке в разных браузерах.
Нет, Юрий! На моем дом компе ссылка, демо — всё работает отлично. На рабочих компах (моем и нач-цы) изображения появились, но при нажатии на них — никакого эффекта не происходит. Мне, всё-таки, кажется что-то надо установить на раб компе.
Павел, возможно у вас на рабочих компьютерах установлены старые версии браузеров? (потому что здесь лишь html+css+js, ничего дополнительно устанавливать не нужно)
Юрий!
На работе установлены IE 8 и Mozila 25 и 40
Здравствуйте, Юрий!
Спешу поделиться с Вами своей радостью. Я установил на рабочий компьютер последнюю версию Mozila 52 и все эффекты работают отлично!
Одна только просьба о помощи! Юрий, будьте добры, подскажите, пожалуйста, как правильно прописать, чтобы за место синего и красного фона на примере, можно было замостить изображение воздушных шаров, например, вот этих ( ). У меня не получилось!!! Этот момент реализовать бы получилось, она будет просто в восторге!!!
Заранее благодарен!
Павел