Пример:
Проведите курсором по изображению
HTML:
|
1 2 3 4 5 6 |
<div class="canvas-wrap"> <div id="canvas"></div> <div class="plane"> <img data-sampler="texture0" id="texture0" src="photo.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 |
.canvas-wrap { position: relative; } #canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 500px; width: 100%; } .plane { width: 100%; height: 500px; position: relative; overflow: hidden; } .plane img { display: none; } |
JS:
Подключаем библиотеку curtains.min.js и скрипт самого эффекта wave.js
Здравствуйте! Почему-то не определяет переменную при инициализации библиотеки curtains.js new canvas(canvas)
const webGLCurtain = new Curtains("canvas");
А библиотека отсюда или новая?
Если новая, то попробуйте
[code]const webGLCurtain = new Curtains({
container: "canvas"
});[/code]