Галерея изображений в стиле картотеки ролодекс
Картотека ролодекс достаточно долгое время (с 50-х до середины 80-х прошлого века) была популярным атрибутом рабочего пространства. Удобная конструкция размещения карточек на барабане обеспечивала быстрый доступ к нужной информации. Сделаем галерею изображений в стиле популярного офисного прибора.
Вместо колеса прокрутки воспользуемся элементом HTML5 range
для переключения между изображениями. Так как элемент не поддерживается в FireFox то для него формируем замещение.
JavaScript (в форме jQuery) используется для связывания элемента управления с изображениями, но весь код умещается в несколько строк.
Содержание галереи представляет собой серию изображений одинакового размера в элементах <figure>
с отдельным описанием а элементах <figcaption>
:
<div id=imgdex> <figure> <img src="/assets/img/arabic-eyes.jpg" alt="Photograph of a woman's face under a Bedouin headress"> <figcaption>Bedouin</figcaption> </figure> <figure> <img src="/assets/img/blue-green-eyes.jpg" alt="Photograph of a man's blue-green-eyes"> <figcaption>Blue-green</figcaption> </figure> <figure> <img src="/assets/img/fake-eyelashes.jpg" alt="Photograph of dramatic fake eyelashes in closeup"> <figcaption>Dramatic Fake</figcaption> </figure> <figure class=rolodex> <img src="/assets/img/snow-queen.jpg" alt="Photograph of a girl in heavy snow"> <figcaption>Snow</figcaption> </figure> </div>
CSS код без префиксов браузеров:
div#imgdex{ position:relative; perspective:4000px; width:70%; margin: 0 auto; transform-style:preserve-3d; font-family:Calibri; } div#imgdex figure{ position:absolute; top:0; left:120px; transform-origin:left bottom; transform:rotateX(-92.1deg); transition:1s transform ease-in-out; width:70%; } div#imgdex figure img{ max-width:100%; } div#imgdex figure figcaption{ position:absolute; bottom:0; font-size:1.2rem; left:-8rem; opacity:0; transition:1s opacity ease-in-out; } div#imgdex figure:last-of-type{ transform:rotateX(5deg); box-shadow:0px 0px 200px rgba(0,0,0,0.5); }
Элемент div
использует перспективу для манипулирования изображениями. Основные элементы figure
вращаются вокруг нижней грани, становясь почти плоскими.
Ниже элемента div
располагается элемент range
:
<input type="range" min="1" onchange="updateImage(this.value);" value="4" id="ranger"/>
Элемент имеет минимальное значение 1 (в галерее должно быть хотя бы одно изображение). Когда слайдер перемещается, элемент вызывает функцию upDateImage
и передает ей текущее значение.
function updateImage(val) { $('#imgdex figure:nth-child('+val+')').css('-webkit-transform','rotateX('+val+'deg)'); $('#imgdex figure:nth-child('+val+')').css('transform','rotateX('+val+'deg)'); $('#imgdex figure:nth-child('+val+') figcaption').css('opacity','1'); $('#imgdex figure:not(:nth-child('+val+')) figcaption').css('opacity','0'); $('#imgdex figure:nth-child('+(val-1)+')').css('-webkit-transform','rotateX(-92.'+(count - val)+'deg)'); $('#imgdex figure:nth-child('+(val-1)+')').css('transform','rotateX(-92.'+(count - val)+'deg)'); }
Код достаточно запутанный. Важно помнить, что значение val
всегда соответствует порядку изображений. Например, значение 4 указывает на последнее изображение в примере.
Если слайдер range
перемещается в положение 3, то изображение 3 поворачивается до значения угла 3 градуса. Изображения поворачиваются с небольшим разбросом, чтобы создавать иллюзию объема.
Как только изображение повернется соответствующая подпись figcaption
становится видимой, за счет изменения свойства opacity
, а остальные подписи скрываются.
Теперь нужно обеспечить элемент range
максимальным значением, которое соответствует общему числу изображений. Это же число установим для значения по умолчанию:
<script> var count = $("#imgdex figure").length; $('#ranger').attr('max', count); $('#ranger').attr('value', count); </script>
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/HdPl0PTbvX0/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Не было еще ни одного великого ума без примеси безумия. Аристотель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.