Анимированный эффект смены фотографий на JS

Пример:

Фото 1 Фото 2 Фото 3 Фото 4

HTML:

<div class="canvas-wrap">
	<div id="canvas"></div>
	<div class="multi-textures">
		<span class="change-slide" data-slide="1">Фото 1</span>
		<span class="change-slide" data-slide="2">Фото 2</span>
		<span class="change-slide" data-slide="3">Фото 3</span>
		<span class="change-slide" data-slide="4">Фото 4</span>	  
		<img src="displacement.jpg" data-sampler="displacement" crossorigin="anonymous" />
		<img src="photo-1.jpg" crossorigin="anonymous" />
		<img src="photo-2.jpg" crossorigin="anonymous" />
		<img src="photo-3.jpg" crossorigin="anonymous" />
		<img src="photo-4.jpg" crossorigin="anonymous" />
	</div>
</div>

</div>

displacement.jpg требуется для эффекта смены фотографий.

CSS:

.canvas-wrap {
	width: 100%;
	height: 500px;
	position: relative;
}
#canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.multi-textures {
	position: absolute;
	top: 0;
	left: 0;
    width: 100%;
    height: 500px;
}
.multi-textures img {
	display: none;
}
.change-slide {
	display: inline-block;
	background-color: #fff;
	color: #337AB7;
	border: 0;
	outline: 0;
	padding: 6px 22px;
	font-size: 18px;
	margin: 20px 0 0 6px;
	font-family: 'Roboto', sans-serif;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
	transition: all 0.3s;
	cursor: pointer;
	border-radius: 5px;
	border-bottom: 4px solid #bababa;
	position: relative;
	top: 0;
}
.change-slide:first-child  {
	margin: 20px 0 0 20px;
}
.change-slide:hover {
	color: #000;	
	box-shadow: 0px 18px 30px -5px rgba(0, 0, 0, 0.5);
	top:-2px;
}

.canvas-wrap {

width: 100%;

height: 500px;

position: relative;

}

#canvas {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

.multi-textures {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 500px;

}

.multi-textures img {

display: none;

}

.change-slide {

display: inline-block;

background-color: #fff;

color: #337AB7;

border: 0;

outline: 0;

padding: 6px 22px;

font-size: 18px;

margin: 20px 0 0 6px;

font-family: 'Roboto', sans-serif;

box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);

transition: all 0.3s;

cursor: pointer;

border-radius: 5px;

border-bottom: 4px solid #bababa;

position: relative;

top: 0;

}

.change-slide:first-child {

margin: 20px 0 0 20px;

}

.change-slide:hover {

color: #000;

box-shadow: 0px 18px 30px -5px rgba(0, 0, 0, 0.5);

top:-2px;

}

JS:

Подключаем библиотеку curtains.min.js и скрипт самого эффекта slide.js

Найдено на codepen.io у пользователя Martin Laxenaire
Библиотека curtains.js на github

Олег: 06.02.2024 в 16:03

Здравствуйте.
Все очень красиво и элегантно, конечно... Спасибо!
Но вот как реализовать несколько таких слайдеров на одной странице?
Я попытался, но во-первых, не открылись следующие изображения, а во вторых, при клике на "Фото 4" происходит смена первого фото на второе))
Можно ли вообще решить такое?

Ответить

Пример:

HTML:

CSS:

JS:

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

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

Комментарии: