Пример:

HTML:
1 2 3 4 5 6 |
<div class="canvas-wrap"> <div id="canvas"></div> <div class="plane"> <img src="fish.jpg" crossorigin="anonymous"/> </div> </div> |
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 |
.canvas-wrap { position: relative; } #canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .plane { width: 100%; height: 500px; position: relative; overflow: hidden; } .plane img { display: none; } .no-curtains .plane { overflow: hidden; display: flex; align-items: center; justify-content: center; } .no-curtains .plane img { display: block; max-width: 100%; object-fit: cover; } |
JS:
Подключаем библиотеку curtains.min.js и скрипт самого эффекта underwater.js
Найдено на codepen.io у пользователя Martin Laxenaire
Автор фотографии PublicDomainPictures
Библиотека curtains.js на github
Добавить комментарий: