Nie trudne i spektakularne. Spraw, by twój awatar drżał.
1. Otwórz potrzebny nam obraz i przytnij go:
2. Teraz wybierz tło dziewczyny za pomocą narzędzia magiczna różdżka. Lub możesz wyróżnić dla tych, którzy wiedzą, jak maskować warstwę. Następnie Wybierz\u003e Odwróć.
3. Teraz Ctrl + J. Powinno się okazać dwie warstwy z dziewczyną.
4. Idziemy do Filtruj\u003e Rozmycie\u003e Rozmycie ruchu (Filtr\u003e Rozmycie\u003e Rozmycie ruchu).
5. Teraz pozostaje tylko skonfigurować animację. Pierwsze okno nie jest widoczną warstwą, drugie jest widoczne, trzecie nie jest widoczne. Zrobiłem 6 pomiędzy.
To samo dotyczy tekstu. Aby to zatrzeć, musisz najpierw Typ rasteryzacji. Otrzymujesz rozmazany tekst:
Aby wizualnie poprawić efekt, możesz przejść nieco bardziej skomplikowaną drogę:
1. Piszemy tekst. Rasteryzuj warstwę:
2. Wykonujemy kilka kopii, powiedzmy dwa (może być więcej) Ctrl + J.
3. Teraz myjemy kolejno każdą warstwę ( Filtruj\u003e Rozmycie\u003e Rozmycie ruchu (Filtr\u003e Rozmycie\u003e Rozmycie ruchu)), ale w różnym stopniu. To znaczy, że powinno to wyglądać tak:
Warstwa 1 \u003d brak rozmycia
Warstwa 2 \u003d rozmycie 5
Warstwa 3 \u003d rozmycie 10
Witajcie drodzy czytelnicy. Dzisiaj chcę Ci powiedzieć, jak to zrobić za pomocą jquery zrób prawie wszystkie obiekty na stronie, które chcemy tylko potrząsnąć.
Prawdopodobnie myślisz, jakie bzdury? :-) Wcale tak nie jest. Wygląda tak imponująco. Zwłaszcza jeśli byłoby to naprawdę bzdurą, nie opublikowałem tego na blogu.
Oto kilka przykładów. Ten skrypt pozwala na wstrząsanie obiektami po najechaniu na nie kursorem i tylko przez cały czas. A także istnieją dodatkowe efekty, takie jak. Brzmi kusząco, prawda? :-)
Chciałbym bardzo podziękować jackrugile.com za tę świetną wtyczkę.
Ogólnie rzecz biorąc, zobaczmy, jak zaimplementować coś takiego na swojej stronie.
ι
Framework JQuery i wstrząsający skrypt
Zgodnie z tradycją musimy dołączyć bibliotekę i sam wstrząsający skrypt. Do tego między tagami
i dodaj następujące:
Te pliki (skrypty) znajdują się w źródłach, które można pobrać powyżej.
Przypominam, że jeśli masz już dołączoną bibliotekę, nie musisz jej ponownie dołączać.
jquery-1.7.2.min.js - biblioteka (framework). Powtarzam, jeśli masz załączony ten skrypt, drugi raz nie jest konieczny.
jquery.jrumble.1.3.min.js - ale ten skrypt, który w rzeczywistości działa cuda z obiektami na stronie. :-) dołączamy to koniecznie.
Obiekty
W takim przypadku wstrząśnimy zwykłymi, które stworzymy za pomocą. Oto jak będzie wyglądał ten blok:
A oto sam kod CSS:
Demo-box (float: left; margin: 10px 20px 20px 0; width: 130px;) .demo-box.last (margin: 10px 0 20px;). Demo-box div (tło: # 40b9ff; kolor: #fff; rozmiar czcionki: 30px; grubość czcionki: pogrubiony; wysokość: 130px; wysokość linii: 130px; margines: 10px 0 0 0; wyrównanie tekstu: środkowy; cień tekstu: -2px 2px 0px rgba (0,0,0 , .2);) .demo-box div: hover (background: # 4ec7ff;)
To jest kod blokowy pokazany w przykładzie.
Drżący
Teraz nazwiemy sam skrypt wstrząsający.
Zasada skryptu jest bardzo prosta. Wykonuje losowe ruchy wzdłuż osi xiy z pewną prędkością. Możemy sami skonfigurować te parametry.
Na przykład w wersji demo mamy pierwszy blok pod numerem jeden. Podczas najechania kursor porusza się wzdłuż podanych osi: x: 2 i y: 2, parametr obrotu jest również ustawiany na wartość 1. Ten parametr określa, czy wstrząs będzie silniejszy, czy nie, innymi słowy, nie pozwala on blokowi wyjść daleko poza jego granice. W ten sposób uzyskuje się wizualnie mały lub silny efekt.
Zobaczmy teraz, jak to wszystko wygląda w kodzie:
Zakresy
Domyślnie weź pierwszy blok z klasą demo1
demo-box to klasa bloków, którą stworzyliśmy na początku w stylach CSS.
demo1 - klasa, której użyjemy w skrypcie do wywołania wstrząsania w tym bloku.
Scenariusz
Teraz potrzebujesz między tagami
i Dodaj:
Jak widać w skrypcie, blok jest osłonięty podanymi parametrami x: 2, y: 2, z obrotem: 1. Chcę powiedzieć (powtórzyć), że parametry te można zmieniać według własnego uznania. A w wersji demo te parametry są przedstawione.
Prędkość
Tutaj zwiększymy i zmniejszymy prędkość wstrząsania. Aby to zrobić, weź przykład w wersji demo pod numerem 5. W takim przypadku sam skrypt wywołań nieznacznie się zmieni. Będzie to wyglądać tak:
Domyślnie prędkość wynosi zero, im większa wartość tego parametru, tym mniej drgań :-) Demo przedstawia kilka przykładów z różnymi wartościami.
Przezroczystość
Tutaj połączymy wstrząsanie i przejrzystość w tym samym czasie. Chcę powiedzieć, że wygląda bardzo pięknie i nietypowo :-)
W wersji demo weź blok nr 12, który trzęsie się jak szalony, i ponownie sam skrypt wywołań niewiele się zmieni:
W ten przykład ustawić wartość 6 na obu osiach. Parametr rotacji wynosi 6, prędkość wynosi 5. Przezroczystość w skrypcie nazywa się - nieprzezroczystość z wartością true jest wymaganą linią. A także siła przezroczystości - opacityMin: kosztuje 05. Im wyższa ta wartość, tym bardziej przezroczysty będzie blok najechania kursorem.
Inne przykłady
Tutaj zostaną przedstawione przykłady skryptów blokowych w wersji demo z ich liczbą i klasą:
Blok 14 (kliknij)
Blok 15 (kliknij (przytrzymaj))
Blok 16 (bez zatrzymania)
Bloki 17 i 18 (zdalne)
to ciekawy efektkiedy po najechaniu myszką na prawy blok, lewy się porusza i odwrotnie.
Blok 19 (kilka sekund (kliknij))
Blok 20 (Pulsowanie)
ι
Nauczyliśmy się więc trząść przedmiotami na stronie internetowej. To wszystko. Drodzy przyjaciele, jeśli macie jakieś trudności, pamiętaj, aby zapytać w komentarzach. Do zobaczenia wkrótce.
W tym artykule porozmawiam o tym, jak stworzyć niewielki efekt drgania krawędzi warstw (tekstu, kształtów i innych) w Po efektachstworzyć stylizowane wideo (elementy). Widziałem wiele filmów, w których wykorzystano ten efekt: na wierzchu całego filmu lub jako stylizacja dowolnych elementów. Możesz to zrobić różne sposobyOpowiem o jednym z nich. Nie pomyl tego wstrząsu ze zwykłym poruszaniem w pozycji, jest to zupełnie inne.
Aby to zrobić jest proste, do tego w twojej kompozycji powinny już być warstwy tekstowe lub niektóre elementy, które należy poluzować, a następnie utwórz warstwę dopasowania i wrzuć na nią wtyczkę Turbulance Displace:
Następnie skręć ustawienia: im mniejszy rozmiar Turbulancji, tym mniejsze szczegóły pojawiające się podczas drżenia. Parametr Amout wpływa na moc jittera, zostawiłem 15. Następnie animujemy ten jitter, dla tego wpisałem czas wyrażenia * 2500 w parametrze Evolution. To piekielnie szybkie wyrażenie, ponieważ później użyjemy Posterize Time do stworzenia pomijania klatek.
Pomijanie ramek na chwiejnych warstwach wzmacnia ten efekt. Możesz uzyskać niskie fps dla kompozycji różne sposoby, zarówno wyrażenia, jak i wtyczki. Użyję wtyczki Posterize Time, aby obniżyć liczbę klatek na sekundę. Możesz utworzyć nową warstwę dopasowania lub wykonać wstępne kompozycje, w każdym razie powinieneś rzucić czas na wtyczkę -\u003e czas posteryzacji. Ustawiam 15 klatek na sekundę, im niższa ta wartość, tym więcej klatek „wyjdzie”.
W przypadku kształtów można użyć osobno modyfikatora ścieżki wiggle. Ponadto można osobno owinąć warstwy Turbulance Displaces oddzielnie, aby utworzyć losowy jitter.
Oprócz tej lpaginy, możesz użyć Roughen Edges, a ta opcja polega na tym, że ta wtyczka działa na brzegach warstwy, a nie całkowicie na całej warstwie.
