Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
displacement.jpg требуется для эффекта смены фотографий.
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 39 40 41 42 43 44 45 46 47 48 |
.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
Фотографии: kellepics
Библиотека curtains.js на github
Добавить комментарий: