Пример:
Поводите курсором мыши по изображению
HTML:
|
1 2 3 4 5 6 |
<div class="canvas-wrap"> <div id="canvas"></div> <div id="fullwidth-image"> <img data-sampler="displacedImage" src="man.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 31 32 33 |
.canvas-wrap { width: 100%; height: 500px; position: relative; } #canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #fullwidth-image { position: absolute; top: 0; left: 0; width: 100%; height: 500px; } #fullwidth-image img { display: none; } .no-webgl #fullwidth-image { display: flex; justify-content: center; align-items: center; } .no-webgl #fullwidth-image img { display: block; object-fit: cover; width: 100%; height: 500px; } |
JS:
Подключаем библиотеку curtains.min.js и скрипт самого эффекта displacement.js
Найдено на codepen.io у пользователя Martin Laxenaire
Библиотека curtains.js на github
Александр, просьба проверить выложенные материалы. На странице пропала картинка, но эффект работает. Вчера я через DevTools подставил картинку. Эффект был. Сегодня я уже 10 картинок с прямыми ссылками подставил -- не грузятся картинки. Но это не важно, эффект работает и на пустой картинке. Но я не могу его запустить у себя.
Я картинки сейчас выключил все, заменяю потихоньку на ИИшные
без картинок много эффектов вообще не видны. Эта тема -- исключение 🙂