Перелистывание изображений при скроллинге

Пример:

HTML:

<div id="content-canvas"></div>

1	<div id="content-canvas"></div>

CSS:

#content-canvas {
	width: 100%;
	height: 600px;
	margin: 20px auto;
	max-width: 724px;
	box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);
}

#content-canvas {

width: 100%;

height: 600px;

margin: 20px auto;

max-width: 724px;

box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);

}

JS:

Подключаем three.min.js, TweenMax.min.js и скрипт слайдера slider.js
Изображения вставляются в переменной const textures
На примере использованы квадратные фотографии. Если используются другие размеры, в переменной const geometry = new THREE.PlaneGeometry(1, 1); стоит указать соотношение сторон. Первое значение - ширина, второе - высота.

За основу взят скрипт, найденный на codepen.io у пользователя Alain
Фотографии: kellepics

Пример:

HTML:

CSS:

JS:

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

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