Решение выполнено на 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
Смотрите также:
Скрипт splitpic.js для смены мышкой одной фотографии на другую
Адаптивная сетка из шестиугольников для фотогалереи или кратких информационных блоков
3D эффект волны на изображении при движении по нему курсора мыши
Добавить комментарий:
Ваш комментарий отправлен!
А как фотки подписывать и если фото ставит javaScript , то поисковый бот не проиндексирует. Думаю надо фото вставлять в сам html и на JS работать с ним. Так они будут доступны поисковому роботу. А так всем мира и добра желаю, от меня, кво мастера Пашки )
А как на каждую фотку написать текст, поставить кнопку, сделать всю фотку ссылкой? Чтобы например использовать этот слайдер как услуги на сайте
JS править и там выводить какой то текст, когда фотка открыта
Хтмлом невозможно? Чтобы поисковики тоже нормально видели такой контент. Ну и для тех, кто яваскрипт не знает.
В этом решении нет