Делаем эффектную фотогалерею на сайте

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

Логика проекта

Нам понадобится три компонента: HTML-страница, где будет карусель, CSS-файл, где мы настроим внешний вид карусели в целом, и скрипт на JavaScript, в котором будет вся механика работы карусели с фотографиями. Как всё будет работать:

1. Готовим на странице место под картинки и оформляем их как блоки.
2. Эти блоки объединяем в общий блок с каруселью.
3. Задаём общие параметры внешнего вида картинок, фона и блоков в целом в CSS-файле.
4. В скрипте делаем две вещи: правильно отрисовываем карусель в любом положении и учим страницу реагировать на движение мыши.

HTML-страница

В этом проекте нам понадобятся две библиотеки, которые мы ещё не использовали: GASP и Zepto.

GSAP позволяет быстро и удобно работать с анимациями картинок и параллаксом в них. Параллакс — это когда картинка стоит как бы чуть дальше вглубь от своей рамки и при прокрутке движется чуть медленнее, открывая новые детали.

Zeppo — это аналог jQuery, который совместим с этой библиотекой в большинстве команд, но который не поддерживает старые браузеры. Основная идея Zeppo в том, чтобы создать быстрый и современный фреймворк, но без сложных конструкций внутри для поддержки старых браузеров. Поэтому наш проект будет работать только в браузерах, которые вышли после 2016 года.

Так как внутри страницы у нас будут одни блоки без содержимого, то и в браузере мы увидим только пустую белую страницу. Содержимое добавим в самом конце.

CSS-файл для настройки общего вида карусели

Так как у нас 3D-карусель, то первое, что мы сделаем, — установим свойство transform-style: preserve-3d . Это значит, что теперь нужные нам элементы будут отображаться в трёхмерном пространстве, а не на плоскости экрана. В этом же блоке запретим пользователю что-то выделять мышкой, чтобы при прокрутке карусели не выделялись никакие элементы:

/* общие настройки для всей страницы, а также для картинок
и блока с кольцом */
html, body, .stage, .ring, .img width:100%;
height: 100%;
transform-style: preserve-3d;
user-select:none;
>

Теперь настроим правила, по которым лишние объекты будут исчезать со страницы. Смысл в том, чтобы скрыть ту часть карусели, которую мы не видим, чтобы картинки не накладывались друг на друга при прокрутке:

/* настраиваем общие правила скрытия лишних объектов на странице */
html, body overflow:hidden;
background:#000;
>

Сделаем так, чтобы положение всех вложенных элементов зависело друг от друга, а не от размера окна браузера или других объектов. Это нужно для того, чтобы при вращении карусели мы смогли точно запрограммировать поведение картинок:

/* устанавливаем абсолютное позиционирование блоков на странице */
div position: absolute;
>

Последнее, что нам здесь осталось сделать, — задать отдельные настройки для самой карусели. Кроме высоты и ширины важный параметр в карусели — отдаление виртуального центра карусели от края экрана. Этот параметр влияет на перспективу: чем меньше это число, тем сильнее перспективные искажения.

/* отдельные настройки для карусели в целом */
.container /*на сколько центр карусели будет виртуально уедет вглубь монитора*/
perspective: 2000px;
width: 300px;
height: 400px;
left:50%;
top:50%;
/*как будут сдвигаться наши картинки*/
transform:translate(-50%,-50%);
>

Пишем скрипт

👉 Для удобства работы скрипта мы оставим оригинальные ссылки на картинки из скрипта Тома Миллера. Если вам нужно будет заменить их на свои — пронумеруйте картинки, начиная с номера 33, и положите их в одну папку.

Разделим скрипт на две части: спецэффекты с анимацией и обработку движения мыши.

Первое, что нам понадобится для работы с каруселью, — значение сдвига карусели:

// здесь будем хранить текущее значение сдвига карусели
let xPos = 0;

Чтобы ставить все картинки в карусели сразу по местам с самого начала, сделаем отдельную функцию getBgPos(i) — она будет брать элемент с номером i и возвращать нужное положение и значение трансформации картинки в карусели:

// получаем свойство background-position у элемента с номером i, чтобы отрисовать картинку в нужном месте в карусели
function getBgPos(i) return ( 100-gsap.utils.wrap(0,360,gsap.getProperty(‘.ring’, ‘rotationY’)-180-i*36)/360*500 )+’px 0px’;
>

Для анимации и обработки спецэффектов будем использовать встроенный в GSAP элемент timeline и менять его свойства на нужные для нас:

// основная функция, которая управляет всеми спецэффектами в карусели gsap.timeline() // устанавливаем свойство rotationY, чтобы была видна только одна половина виртуального кольца с картинками .set('.ring', < rotationY:180, cursor:'grab' >) // поворачиваем вдоль виртуального кольца каждую картинку .set('.img', < rotateY: (i)=>i*-36, transformOrigin: '50% 50% 500px', z: -500, // берём новую картинку для карусели по её индексу backgroundImage:(i)=>'url(https://picsum.photos/id/'+(i+32)+'/600/400/)', // сразу масштабируем картинки под их размер в карусели backgroundPosition:(i)=>getBgPos(i), // не показываем обратную сторону картинок backfaceVisibility:'hidden' >) // добавляем эффекты затемнения .add(()=>< // когда мышь попадает в зону карусели $('.img').on('mouseenter', (e)=>< // находим текущий элемент, на который указывает мышь let current = e.currentTarget; // затемняем всё, кроме этого элемента gsap.to('.img', (t==current)? 1:0.5, ease:'power3'>) >) // когда мышь ушла за пределы карусели $('.img').on('mouseleave', (e)=>< // убираем затемнение и эффекты со всех картинок gsap.to('.img', ) >) >)

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

// когда зажата левая кнопка мыши — можно крутить карусель
$(window).on(‘mousedown touchstart’, dragStart);
// отпускаем мышь — карусель останавливается
$(window).on(‘mouseup touchend’, dragEnd);

1. Если мышь нажата, то меняем курсор на зажатую руку, получаем значение сдвига карусели и следим за тем, когда начнёт двигаться мышь.
2. Когда мышь двинется — получаем новую координату сдвига и отрисовываем карусель по новым координатам.
3. Когда пользователь отпустит мышь, то меняем курсор на обычную руку и отрисовываем карусель с учётом того, где отпустили мышь.

// прокрутка карусели function dragStart(e)< // если было касание тач-интерфейса — получаем координаты касания if (e.touches) e.clientX = e.touches[0].clientX; // устанавливаем новое значение сдвига карусели xPos = Math.round(e.clientX); // меняем форму курсора внутри карусели, чтобы было видно, что мышь ей управляет gsap.set('.ring', ) // когда мышь начнёт двигаться — запускаем функцию обработки захвата карусели $(window).on('mousemove touchmove', drag); > // функция обработки захвата карусели function drag(e)< // если было касание тач-интерфейса — получаем координаты касания if (e.touches) e.clientX = e.touches[0].clientX; // обрабатываем общий блок с кольцом gsap.to('.ring', < // высчитываем разницу между старым и новым положением и меняем значение свойства rotationY rotationY: '-=' +( (Math.round(e.clientX)-xPos)%360 ), // запускаем встроенную в GSAP функцию: она дождётся нового положения карусели и поменяет положения картинок в ней onUpdate:()=>< gsap.set('.img', < backgroundPosition:(i)=>getBgPos(i) >) > >); // устанавливаем новое значение сдвига карусели xPos = Math.round(e.clientX); > // обрабатываем конец вращения карусели function dragEnd(e)< // считаем новое положение карусели после того, как отпустили мышь $(window).off('mousemove touchmove', drag); // меняем форму курсора на карусели gsap.set('.ring', ); >

Собираем всё вместе и смотрим на результат на странице:

Источник

Фотогалерея для своего сайта – все способы реализации

Это ж надо было умудриться столько наснимать, что сделанные вами фотографии даже у тещи под кроватью лежат. Жена сказала, чтоб дома больше ни одного снимка не было? Ох-хо-хох! Тогда пора все свои работы переносить в виртуальное пространство. А для этого вам понадобится фотогалерея для сайта:

Фотогалерея для сайта

Очень часто фотогалерею можно спутать с фотоальбомом. Основным признаком галереи является « выставление на показ » сразу всех фотографий. А в альбоме снимки отображаются по одному.

Но такое деление является чисто условным, и нередко в интернете можно встретить образцы, которые просто не поддаются никакой классификации. Поэтому рассмотрим пример реализации классической фотогалереи на html . Но для начала разберемся, почему использование галереи предпочтительнее для сайта, чем фотоальбом:

• Возможность продемонстрировать все изображения ( фото ) сразу – иногда пользователям лень нажимать кнопки для перелистывания. А в классической фотогалерее все объекты сразу доступны для просмотра;
• Простота реализации – стандартный образец можно легко создать с помощью html ;
• Открытость – фотогалерея ( по сравнению с альбомом ) обладает большей « открытостью », что на подсознательном уровне позволяет вызвать доверие со стороны пользователей.

В то же время галерея обладает и недостатками. Основной из них – это громоздкость. Из-за « массивных » размеров она занимает много место на странице сайта. Поэтому ее очень тяжело вписать в общий дизайн. Кроме этого фотогалерея обладает узким « спектром действия », потому что ее использование оправдывается лишь в полновесных версиях ресурсов. А реализация ее « классической » схемы для мобильных устройств весьма затруднена.

Пример классической фотогалереи

Простая фотогалерея для сайта представляет собой набор ссылок, к каждой из которых с помощью тега « прикручена » превьюшка основного изображения. Щелчок по ссылке переносит пользователя на другую веб-страницу, где «выставлена» полновесная фотография. Под ней находится еще одна гиперссылка, ведущая на основную страницу:

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

Фотогалерея

Фотогалерея на CSS

Предыдущий пример хоть и прост в реализации, но слишком тяжел. И больше похож на « костяк » простого сайта. Поэтому, чтобы не использовать в реализации фотогалереи несколько взаимосвязанных веб-документов, для обработки события ( нажатия на превью картинки ) можно воспользоваться возможностями Javascript . Но пока мы воздержимся от программирования, и в следующем примере реализуем фотографию на основе CSS :

Нажатие на превьюшку фотографии приведет к увеличению масштаба. Кроме этого фотогалерея « умеет » подстраиваться под размеры окна браузера, пропорционально изменяя длину и ширину превью ( уменьшая или увеличивая ). И все это лишь с помощью CSS и легкой html структуры:

Html код примера, как создать фотогалерею на сайте:

#gall < position: relative; padding-top: 50%; -moz-user-select: none; user-select: none; >#gall img < position: absolute; top: 25%; left: 12.5%; max-width: 24.5%; max-height: 49.5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: zoom-in; transition: .2s; >#gall img:nth-child(4n-2) #gall img:nth-child(4n-1) #gall img:nth-child(4n) #gall img:nth-child(n+5) #gall img:focus < position: absolute; top: 50%; left: 50%; z-index: 1; max-width: 100%; max-height: 100%; outline: none; pointer-events: none; >#gall img:focus ~ div

Фотогалерея на основе Jquery

Кроме « непрограммных » образцов на сайте можно использовать фотогалереи, написанные на Jquery . Самостоятельное создание галереи на основе этой библиотеки потребует специальных знаний и навыков. Легче найти уже готовый вариант в интернете и установить его на свой сайт.

Мы советуем Galleria . Она обладает широким набором параметров для настройки. И корректно отображается на большинстве мобильных устройств, работающих под управлением популярных операционных систем:

Скрипт фотогалереи для сайта представляет собой архив, из которого нужно извлечь программные файлы и разместить у себя на сайте.

Рассмотрим пошагово пример подключения Galleria к обычному html сайту:

Для проверки подключения библиотеки в тело страницы поместим проверочный скрипт:

Если подключение произведено корректно, то при запуске веб-страницы в браузере будет отображен соответствующий текст:

• Установка Galleria – на данном этапе следует скачать архив с фотогалереей для сайта и распаковать его в директорию, где находятся наш html файл. Для подключения плагина размещаем следующий код сразу под строкой, с помощью которой мы в предыдущем шаге включили поддержку Jquery :

А для проверки работоспособности плагина вместо предыдущего отладочного кода поместим этот:

Если галерея подключена правильно, то в браузере отобразится надпись « Galleria works »:

• Устанавливаем параметры галереи и добавляем в нее изображения – сначала с помощью класса CSS установим длину, ширину и цвет галереи. Для этого пропишем значение соответствующих стилевых свойств.

Затем добавляем изображения для показа:

• Активируем плагин и устанавливаем тему фотогалереи для сайта – чтобы сделать это, сразу под слоем изображений размещаем следующие строки кода:

В примере мы устанавливаем классическую тему. На сайте плагина доступны для скачивания и другие темы оформления , но все они платные:

Приведем весь код примера страницы с подключенным плагином:

   .galleria     
   
   

Остальные варианты

Для сайтов, работающих на основе популярных php-движков, в интернете доступно множество специализированных плагинов ( расширений ). Например, чтобы создать фотогалерею у себя на блоге, который работает под управлением WordPress , можно использовать плагин NextGen Gallery . Он является одним из самых популярных расширений для развертывания фотогалереи на базе WordPress :

Также для создания красивой галереи можно воспользоваться специализированными онлайн-ресурсами. Одним из них является Cincopa . Сервис позволяет собрать фотогалерею собственными руками, подобрав ее дизайн на свой вкус и цвет:

Вот теперь ( на радость жене ) можно смело собрать в кучу все свои фото шедевры, вынести их из дома и развесить « на стенах » новой фотогалереи. А главное, не забудьте про те фото, которые лежат у тещи под диваном!

Источник