Draggable image blur effect

0

Cześć, mam problem z efektem na stronie, który chciałbym użyć u siebie i nie za bardzo wiem jak takie coś ogarnąć. Chodzi o efekt taki jak tutaj: https://www.awwwards.com/inspiration/duplicating-drag-image-effect-ada-sokol,
po najechaniu na tekst w tle pojawia się obrazek - i z tym sobie poradziłem, ale nie wiem jak zrobić efekt rozmycia po przesunięciu myszką.
Strona z efektem: http://adasokol.com/

Nie liczę na gotowca, ale przynajmniej jakieś naprowadzenie jak to zrobić. Przeszukałem internet pod różnymi hasłami ale nic ciekawego nie znalazłem. Myslałem, żeby też zmieniać cursor na image po najechaniu i robić wtedy taki efekt ale niestety tutaj utknąłem.

Z gory dzięki za podpowiedzi, pozdrawiam

3

Mogę się mylić ale według mnie to żadne rozmycie tylko po prostu jest rysowany kolejne zdjęcie.

Na przykład kiedy ruszysz myszką rysuje się zdjęcie. Kiedy ruszysz ją znowu rysuje się znowu tylko że po przedni nie zostaje usunięty a następny jest przesunięty ponieważ jest uzależniony od pozycji myszki + jeszcze jakiś licznik ile razy zdjęcie może zostać narysowane, a później wszystko jest czyszczone i zamieniane na inne zdjęcie.

EDIT: Możesz podejrzeć kod strony za pomocą devtoolsów

3

Wygląda jak obrazek jest rysowany na canvasie, bez czyszczenia canvasa przy każdym odświeżeniu powierzchni.
Ta stronka wygląda na to, że używa https://www.pixijs.com/ - ale to tylko lib do rysowania, pewnie inny skrypt odpowiada za korzystanie z tego liba...

4

W starych Windowsach taki efekt był fabrycznie :) https://www.google.com/search?q=windows+xp+window+freeze&source=lnms&tbm=isch

2

A tak w ogóle to czy Wam się ten efekt podoba? Bo moim zdaniem takie smużenie wygląda tragicznie...

2

Odnośnie pomysłów na przeróbki. Canvas słabo się nadaje do takich efektów jak blednące poświaty, bo to po prostu zamalowane płótno. Natomiast dałoby się coś podobnego zrobić garścią obrazków i klasycznym JS mouse tail:
https://codepen.io/falldowngoboone/pen/PwzPYv
http://javascriptkit.com/script/script2/cursortrail.shtml
Wtedy można by ustawić dla każdej kolejnej iteracji obrazka większe opacity.

Tyle tylko, że bzdury latające za kursorem już 20 lat temu były przedstawiane jako przykład złego gustu i antywzorca interfejsu.

1 użytkowników online, w tym zalogowanych: 0, gości: 1