Секция-галерея на GSAP

Решение выполнено на JavaScript c использованием библиотеки GSAP и рассчитано на несколько фотографий.

Пример:

HTML:

<div id="gal">
	<div id="bg"></div>
	<div id="fg"></div>
</div>

</div>

CSS:

#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;
	}
}

#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) и скрипт ниже, в котором прописываем пути к фотографиям.

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) })
}

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

Опубликовано: 12.07.2021
Рубрики: Секции, Фото, аудио и видео
Метки: GSAP, JavaScript, Фото
4242 просмотра

Смотрите также:

Отложенная загрузка контента

Дополнения плагина jquery.lazy для отложенной загрузки фреймов, скриптов, медийных файлов и т.д.

Анимированный разделитель для секций на CSS

Разделитель для секций в виде бегущих волн с использованием SVG и CSS

Слайдер фоновых изображений Vegas

jQuery плагин Vegas, его установка, настройки, анимация, методы, события и примеры

Добавить комментарий:

Ваш комментарий отправлен!

Регис: 22.07.2022 в 03:04

А как на каждую фотку написать текст, поставить кнопку, сделать всю фотку ссылкой? Чтобы например использовать этот слайдер как услуги на сайте

Ответить
- Alexander: 22.07.2022 в 09:09
  
  JS править и там выводить какой то текст, когда фотка открыта
  
  Ответить
  - Регис: 22.07.2022 в 15:17
    
    Хтмлом невозможно? Чтобы поисковики тоже нормально видели такой контент. Ну и для тех, кто яваскрипт не знает.
    
    Ответить
    - Alexander: 22.07.2022 в 16:00
      
      В этом решении нет
      
      Ответить