Данный слайдер не имеет стрелок и точек, а перелистывание фотографий происходит при скроллинге страницы.

Работает он на библиотеках TweenMax и three.js

Пример:

HTML:

CSS:

JS:

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

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

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

Переход страницы к нижней части нужного элемента на JS

Навигационное меню для лендинга с плавным скроллом и подсветкой пункта активной секции

Красивая 3D карусель, которая управляется зажатием и движением мышки.

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

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