Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: JS Blur - znikające elementy
Forum PHP.pl > Forum > Po stronie przeglądarki
expert
Witam,

Znalazłem stronę na której jest ładnie pokazany efekt rozmycia: http://jakiestfu.com/2012/10/01/blurjs-take-ii/

Zastosowałem to na swojej stronie. przez jakiś czas działało, jednak nie wiem z jakich powodów, jak dam blur do jakiegoś elemntu, to ten element jakby znika. Cos w tym stylu:
http://jsbin.com/anuhid/1/watch

Na czym może polegać błąd/problem?
!*!
Ten skrypt w ogóle nie działa, nawet na stronie autora. W komentarzach masz link do alternatywy.
expert
http://blurjs.com/ ?

Mnie to do końca nie satyfakcjonuje, bo:
- skrypt pobiera tło 'source', a ja chcę razem z elementami zrobić blur
- po za tym może wziąć tylko jeden element, a ja potrzebuje kilka

Po prostu otwieram okno na stronie i chcę wszystko pod tym oknem 'zblurować', rozmyć.
PrinceOfPersia
trochę nie rozumiem po co skrypt do tego, jeśli ten skrypt nic innego nie robi jak dodaje klasę CSS, co tam jest pokazane (na pierwszym linku).
Szczerze mówiąc nie miałem pojęcia wcześniej, że w CSS3 można zrobić efekt blur, więc się dowiedziałem czegoś nowego... anyway. Kluczowa jest tu deklaracja CSS:
Kod
.blurjs-10-radius {
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    filter: url("#blur10px");
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=10);
}

i tyle. Więcej nie potrzeba, bo jeśli to ma działać na jQuery to tam samemu możesz sobie dodać/odjąć klasę addClass/removeClass (a i bez jQuery też możesz to łatwo zrobić). W sumie po co komplikować rzeczy proste?

EDIT:
no chyba, że chodzi o kompatybilność: ten kod CSS działa mi pod Chrome i pod IE8, niestety już w Firefoxie nie za bardzo...
expert
Dla tego na razie sobie dam z tym spokój... Może potem cos sie wykombinuje.

Tylko co ciekawe, przykład na tej stronie: http://jakiestfu.com/2012/10/01/blurjs-take-ii/ u mnie na firefox działa bez problemu... Hmm... co storna i przeglądarka, to inny efekt...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.