Решение выполнено на JavaScript c использованием библиотеки GSAP и рассчитано на несколько фотографий.
Пример:
HTML:
|
1 2 3 4 |
<div id="gal"> <div id="bg"></div> <div id="fg"></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 |
#gal { position: relative; height: 600px; overflow: hidden; margin: 20px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } #fg, #bg { width: 100%; height: 100%; } #fg p { color: #fff; font-size: 16px; font-weight: bold; font-family: Verdana, sans-serif; margin: 6px; display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); margin: 0; text-shadow: 0 2px 6px rgba(0,0,0,0.8); border-radius: 6px; } #fg div, #bg div{ position:absolute; top:0; } @media screen and (max-width: 767px) { #gal { height: 400px; } } |
JS:
Подключаем библиотеку GSAP (версия 3.7.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 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 |
var imgs = [ '/photo-1.jpg', '/photo-2.jpg', '/photo-3.jpg', '/photo-4.jpg', '/photo-5.jpg' ], n = imgs.length, current = n-1, closedWidth = Math.floor(gal.offsetWidth/10) for (var i=0; i<n; i++){ var bgImg = document.createElement('div'); bg.appendChild(bgImg); gsap.set(bgImg, { attr:{id:'bgImg'+i, class:'bgImg'}, width:'100%', height:'100%', backgroundImage:'url('+imgs[i]+')', backgroundSize:'cover', backgroundPosition:'center' }) var b = document.createElement('div'); fg.appendChild(b); gsap.fromTo(b, { attr:{id:'b'+i, class:'box'}, innerHTML:'<p>'+(i+1)+'</p>', width:'100%', height:'100%', borderLeft:(i>0)?'solid 1px #eee':'', backgroundColor:'rgba(250,250,250,0)', left:i*closedWidth, transformOrigin:'100% 100%', x:'100%' },{ duration:i*0.15, x:0, ease:'expo.inOut' }) b.onmouseenter = b.onclick = (e)=>{ if (Number(e.currentTarget.id.substr(1))==current) return; var staggerOrder = !!(current < Number(e.currentTarget.id.substr(1))); current = Number(e.currentTarget.id.substr(1)); gsap.to('.box', { duration:0.5, ease:'elastic.out(0.3)', left:(i)=>(i<=current)? i*closedWidth: gal.offsetWidth-((n-i)*closedWidth), x:0, stagger: staggerOrder? 0.05:-0.05 }) bg.appendChild( document.getElementById('bgImg'+current) ) gsap.fromTo('#bgImg'+current, {opacity:0}, {opacity:1, duration:0.3, ease:'power1.inOut'}) gsap.fromTo('#bgImg'+current, {scale:1.05, rotation:0.05}, {scale:1, rotation:0, duration:1.5, ease:'sine'}) } } window.onresize = (e)=>{ closedWidth = Math.floor(gal.offsetWidth/10) gsap.set('.box', { x:0, left:(i)=> (i<=current)? i*closedWidth: gal.offsetWidth-((n-i)*closedWidth) }) } |
Найдено на codepen.io у пользователя Tom Miller
Фотографии InspiredImages
Смотрите также:
Трансформация фотографии в обложку объемной книги средствами CSS
Оформление фотографий в стиле старого фильма средствами CSS-анимации
Создание одного постера из 9-ти разных фотографий на примере обложки игры GTA 5
Добавить комментарий:
Ваш комментарий отправлен!
А как фотки подписывать и если фото ставит javaScript , то поисковый бот не проиндексирует. Думаю надо фото вставлять в сам html и на JS работать с ним. Так они будут доступны поисковому роботу. А так всем мира и добра желаю, от меня, кво мастера Пашки )
А как на каждую фотку написать текст, поставить кнопку, сделать всю фотку ссылкой? Чтобы например использовать этот слайдер как услуги на сайте
JS править и там выводить какой то текст, когда фотка открыта
Хтмлом невозможно? Чтобы поисковики тоже нормально видели такой контент. Ну и для тех, кто яваскрипт не знает.
В этом решении нет