June 24, 2022

Как сделать эффект, как на сайте Гоши

1. Создаем ZeroBlock

2. Переходим по ссылке https://drive.google.com/file/d/1NUxM70_w11Vz-KyhnuQe-kslC3aBFeJc/view

3. Переходим в папку three.js liquid distortion

4. Открываем файл с Техническим кодом, копируем его

5. Вставляем его в блок Т123

6. Затем открываем файл «Код для настройки» и копируем его в НОВЫЙ блок Т123

7. Теперь у нас 2 блока с кодом

8. Затем нажать на «изображение»

9. Нажать на изображение, затем на значок настроек в правом верхнем углу Pop-up`а

10. и разрешить загрузку до 1920рх

11. Загрузили фотографию – в инструкции у нас будет Рома:)

12. Переходим в настройки блока с изображением и ставим ширину 6 колонок – это нужно для того, чтобы просто удобнее было работать

13. Нажимаем правой кнопкой мыши и выбираем пункт «Скопировать адрес изображения»

14. Вставляем эту ссылку в новую вкладку, чтобы ссылка у нас не потерялась

15. Дублируем блок с изображением

16. Заменяем в дублированном блоке фотографию Ромы на одну из двух из файла в папке three.js liquid distortion

17. Аналогично копируем адрес изображения

18. И вставляем в новую вкладку, чтобы не потерять

19. Теперь в ZeroBlock, который мы создали в пункте 1, создаем шейп и сразу же удаляем фон

20. Нажимаем правой кнопкой мыши и выбираем пункт add css class name

21. Задаем ему имя

22. В шейп загружаем другое фото

23. И вставляем его во второй код

24. Опять дублируем блок с изображением Ромы

25. И загружаем туда изображение, которое мы загрузили в шейп

26. Опять копируем адрес изображения и вставляем его в новую вкладку, чтобы не потерять

27. Теперь ссылку на фото, которое у нас должно отображаться изначально мы должны вставить в Image 1

28. Ссылку на фото 2, которое должно отображаться после эффекта, мы вставляем в Image2

29. А ссылку на фото с эффектом вставляем в displacementImage

30. Теперь скрываем блоки с изображением

31. Публикуем страницу

32. Ссылка на эффект с Ромой https://go2vk.ru/page28594006.html

Чтобы сделать этот эффект на нескольких изображениях, то нужно столько же блоков с кодом из пункта 7 и каждому Shape в Zero Block присваивать свой класс через add css class name и вставлять его в код как в пункте 23 (только для нового блока с кодом)