WebGL
Distortion Hover Effect for Tilda
A little library that can be used for creating WebGL powered distortion hover effects using displacement images.
Distortion Hover Effect for Tilda
A little library that can be used for creating WebGL powered distortion hover effects using displacement images.
Distortion Hover Effect for Tilda
A little library that can be used for creating WebGL powered distortion hover effects using displacement images.

Как сделать Distortion Hover Effect для изображений в Tilda

Как выполнили данный пример (на примере блока CL16)
1. Создали блок CL16
2. Добавили код на страницу в блок ДРУГОЕ►Т123
В коде заменили ID блока CL16 #rec84113182
Дополнительные настройки и описание можно найти на странице
https://github.com/robin-dela/hover-effect
СПИСОК ВСЕХ ВИДЕО
Видеоинструкция данного примера
Видеоинструкция данного примера доступна в архиве
mo-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём эффект для блока из примера
2. Применяем эффект к нескольким разным блокам
3. Применяем эффект к изображениям в одном блоке
4. Применяем эффект в ZeroBlock
5. Используем различные фото фильтры/маски перехода

Применяем Distortion Hover Effect для различных блоков и изображений в Tilda.
Длительность видео: 32 мин
Подписка к видеоинструкции на платной основе
Фрагмент видео
<script src="https://tympanus.net/Development/DistortionHoverEffect/js/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://tympanus.net/Development/DistortionHoverEffect/js/hover.js"></script>
<style>
    canvas{
        float:left;
    }
</style>
<script>
    var myAnimation = new hoverEffect({
	parent: document.querySelector('#rec84113182 .t218__blockimg.t-bgimg'),
	image1: 'https://static.tildacdn.com/lib/unsplash/ab6710b5-3340-03b9-0e64-42719138012f/photo.jpg',
	image2: 'https://static.tildacdn.com/lib/unsplash/6972ac48-02e2-e308-319c-7f7113dcdf0b/photo.jpg',
	displacementImage: 'https://static.tildacdn.com/tild6266-3239-4237-a566-633234386235/4.png'
});
</script>
Made on
Tilda