Галерея изображений в стиле картотеки ролодекс
Картотека ролодекс достаточно долгое время (с 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
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
Секрет быть несчастным: иметь время занудствовать на тему, счастлив ты или нет Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp