Draggable image blur effect

Odpowiedz Nowy wątek
2019-08-09 21:04
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/insp[...]g-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

Pozostało 580 znaków

2019-08-09 21:17
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


Has he lost his mind? Can he see or is he blind?
edytowany 3x, ostatnio: Yukiteru Gromadzki, 2019-08-09 21:18
Super pomysł, chyba w ten sposób będę próbował to ogarniać. - chesterros 2019-08-09 21:47

Pozostało 580 znaków

2019-08-09 21:22
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...

edytowany 2x, ostatnio: Spine, 2019-08-09 21:27
Tak, widziałem że jest użyte pixijs, ale nie chcę ładować biblioteki do tego jednego efektu. Ogarnąłem też, że to jest jakoś za pomocą canvasa zrobione, znalazłem nawet skrypt odpowiadający za ten efekt(chyba), ale kilka bibliotek trzeba by ładować. A chcialbym to zrobić jednak po swojemu - chesterros 2019-08-09 21:50

Pozostało 580 znaków

2019-08-09 21:26
4

W starych Windowsach taki efekt był fabrycznie :) https://www.google.com/search[...]&source=lnms&tbm=isch


((0b10*0b11*(0b10**0b101-0b10)**0b10+0b110)**0b10+(100-1)**0b10+0x10-1).toString(0b10**0b101+0b100);

Pozostało 580 znaków

2019-08-09 21:36
2

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


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
Pokaż pozostałe 4 komentarze
@cerrato: Na komunię, to ja mogłam, co najwyżej, ZX Spectrum dostać :p - Freja Draco 2019-08-09 21:49
widać rodzice Cię nie kochali, bo jakby było inaczej to by nie żałowali kasy i kupili 486 :P - cerrato 2019-08-09 21:52
Nie podoba, ale jak jakby to podrasować, żeby np. robił z obrazka subtelne smugi itp... To by mogło być fajne :) Ale najpierw trzeba mieć jakąś wersję startową i może autorowi dlatego jest potrzebny ten efekt? - Spine 2019-08-09 21:57
@cerrato: 486 jeszcze wtedy nie istniał. A XT/AT kosztował tyle, co ich kilkuletnie zarobki. Z resztą nawet na Spectruma nie miałam wtedy co liczyć, "bo to przecież niepotrzebne". - Freja Draco 2019-08-09 21:59
@spine - myślę (z całym szacunkiem dla pytającego), że jeśli nie umie sobie tego wyciągnąć z kodu strony, do której podaje link, to raczej tym bardziej nie ogarnie jakichkolwiek przeróbek. Faktycznie, jakby to smużenie było mniej nachalne/ordynarne, to może wrażenie by było inne, ale póki co to jest niestrawne. - cerrato 2019-08-09 22:00

Pozostało 580 znaków

2019-08-09 22:07
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.


Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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