Non difficile ed efficace. Fai tremare il tuo avatar.
1. Apriamo l'immagine di cui abbiamo bisogno e ritagliala:
2. Ora seleziona lo sfondo della ragazza usando lo strumento bacchetta magica... Oppure può essere evidenziato per coloro che sanno come mascherare il livello. Poi Selezionare\u003e Inverso.
3. Adesso Ctrl + J... Dovresti avere due strati con la ragazza.
4. Vai a Filtro\u003e Sfocatura\u003e Sfocatura movimento.
5. Ora non resta che personalizzare l'animazione. La prima finestra non è visibile, la seconda è visibile, la terza non è visibile. Nel mezzo ho fatto 6.
Lo stesso vale per il testo. Solo per sfocarlo, devi prima Rasterizza il tipo... Questo creerà un testo sfocato:
Per migliorare visivamente l'effetto, puoi andare in un modo un po 'più complicato:
1. Scriviamo il testo. Rasterizza il livello:
2. Facciamo diverse copie, diciamo due (quante più possibili) Ctrl + J.
3. Ora, a sua volta, sfocatura di ogni livello ( Filtro\u003e Sfocatura\u003e Sfocatura movimento), ma con vari gradi, quindi dovrebbe apparire così:
Strato 1 \u003d nessuna sfocatura
Strato 2 \u003d sfocatura 5
Strato 3 \u003d sfocatura 10
Ciao cari lettori. Oggi voglio dirti come con usando jQuery crea quasi tutti gli oggetti sul sito che vogliamo scuotere.
Probabilmente stai pensando che diavolo è quello? :-) Non è affatto così. Sembra davvero impressionante. Inoltre, se fosse davvero una sciocchezza, non l'ho pubblicato sul blog.
Qui vedremo alcuni esempi. Questo script ti consente di scuotere gli oggetti quando ci passi sopra e sempre. E ci sono anche effetti aggiuntivi, come. Sembra allettante, vero? :-)
Vorrei ringraziare enormemente jackrugile.com per questo fantastico plugin.
In generale, vediamo come implementare una cosa del genere sul nostro sito Web.
ι
Framework JQuery e scuotimento di script
Per tradizione, abbiamo bisogno di allegare la libreria e la stessa sceneggiatura vibrante. Per fare ciò, tra i tag
e aggiungere quanto segue:
Questi file (script) si trovano nelle fonti, che è possibile scaricare sopra.
Ti ricordo che se hai già una libreria collegata, non è necessario collegarla di nuovo.
jquery-1.7.2.min.js - libreria (framework). Ripeto, se hai allegato questo script, non è necessario ripeterlo.
jquery.jrumble.1.3.min.js - e questo script, che, di fatto, fa miracoli con gli oggetti sul sito. :-) dobbiamo attaccarlo.
Oggetti
In questo caso, agiteremo quelli normali con cui creeremo. Ecco come apparirà questo blocco:
Ed ecco il CSS stesso:
Demo-box (float: a sinistra; margine: 10px 20px 20px 0; larghezza: 130px;) .demo-box.last (margine: 10px 0 20px;) .demo-box div (background: # 40b9ff; color: #fff; dimensione carattere: 30px; grammatura carattere: grassetto; altezza: 130px; altezza riga: 130px; margine: 10px 0 0 0; allineamento testo: centro; ombra testo: -2px 2px 0px rgba (0,0,0 , .2);) .demo-box div: hover (sfondo: # 4ec7ff;)
Questo è il codice di blocco mostrato nell'esempio.
tremante
Ora chiameremo lo script tremante stesso.
Il principio della sceneggiatura è molto semplice. Esegue movimenti casuali lungo gli assi xey ad una certa velocità. Possiamo personalizzare questi parametri da soli.
Ad esempio, nella demo abbiamo il primo blocco numero uno. Quando si passa con il mouse, si sposta lungo gli assi specificati: x: 2 e y: 2, anche il parametro di rotazione viene impostato con un valore di 1. Questo parametro determina se lo scuotimento sarà più forte o meno, in altre parole, non consente al blocco di andare oltre i suoi confini. Pertanto, visivamente si ottiene un effetto piccolo o forte.
Ora vediamo come apparirà nel codice:
Intervalli
Per impostazione predefinita, prendiamo il primo blocco con la classe demo1
demo-box è la classe box che abbiamo creato all'inizio negli stili CSS.
demo1 - la classe che useremo nello script per chiamare l'agitazione a questo blocco.
copione
Ora hai bisogno tra i tag
e Aggiungi questo:
Come puoi vedere nello script, il blocco esegue il trotto sui parametri indicati x: 2, y: 2, con rotazione: 1. Voglio dire (ripetere) che questi parametri possono essere modificati a piacere. E nella demo vengono presentati questi parametri.
Velocità
Qui aumenteremo e diminuiremo la velocità di agitazione. Per fare questo, prendiamo l'esempio nel numero demo 5. In questo caso, lo script di chiamata stesso cambierà leggermente. Sarà simile a questo:
Per impostazione predefinita, la velocità è zero, maggiore è il valore di questo parametro, meno scuotimento :-) La demo contiene diversi esempi con valori diversi.
Trasparenza
Qui uniremo agitazione e trasparenza allo stesso tempo. Vorrei dire che sembra molto bello e insolito :-)
Nella demo prendiamo il blocco numero 12, che sta tremando come un matto, e di nuovo, lo script di chiamata cambierà un po ':
NEL questo esempio impostato su 6 su entrambi gli assi. Il parametro di rotazione è 6, la velocità è 5. La trasparenza è chiamata nello script - l'opacità con un valore vero è una linea richiesta. E anche la forza della trasparenza - opacityMin: costa 05. Maggiore è questo valore, più trasparente sarà il blocco al passaggio del mouse.
Altri esempi
Qui saranno presentati esempi di script a blocchi nella demo sotto il loro numero e classe:
Blocco 14 (clic)
Blocco 15 (fare clic (tenere premuto))
Blocco 16 (Non-stop)
Block 17 & 18 (Remote)
esso effetto interessantequando si passa con il mouse sopra il blocco destro si sposta quello sinistro e viceversa.
Blocco 19 (diversi secondi (clic))
Unità 20 (pulsante)
ι
Quindi abbiamo imparato a scuotere gli oggetti su una pagina web. È tutto. Cari amici, se avete difficoltà, assicurati di chiedere nei commenti... A presto.
In questo articolo ti mostrerò come creare un piccolo effetto jitter sui bordi dei livelli (testo, forme e qualsiasi altro) in Effetti postumiper creare un video stilizzato (elementi). Ho visto alcuni video in cui è stato applicato questo effetto: sull'intero video o usato come stile di qualsiasi elemento. Puoi farlo diversi modi, Ti parlerò di uno di loro. Questa scossa non deve essere confusa con la solita oscillazione della posizione, è completamente diversa.
È facile farlo, per questo nella tua composizione, ci dovrebbero già essere strati di testo o alcuni elementi che devono essere allentati, quindi creare un livello di regolazione e lanciare il plugin Turbulance Displace su di esso:
Dopodiché, modifica le impostazioni: più piccola è la dimensione del Turbulance Displace, i dettagli più fini che otterrai quando scuoti. Il parametro Amout influenza la forza del jitter, l'ho lasciato a 15. Successivamente, animare questo jitter, per questo ho inserito il tempo di espressione * 2500 nel parametro Evolution. Ha reso un'espressione così infernale perché useremo Posterize Time per creare drop frame.
La caduta di cornici su livelli traballanti migliora questo effetto. Puoi rendere la composizione a basso fps diversi modi, sia per espressioni che per plugin. Userò il plugin Posterize Time per abbassare i frame al secondo. Puoi creare un nuovo livello di regolazione, o puoi precomporre, in ogni caso dovresti lanciare il tempo del plugin -\u003e tempo di posterizzazione. Ho impostato 15 frame al secondo, più basso è questo valore, più frame "spariranno".
Per le forme, è possibile utilizzare il modificatore del percorso di spostamento separatamente. In alternativa, è possibile separare i livelli di spostamento della turbolenza per creare jitter casuale.
Oltre a questa lpagin, puoi usare Roughen Edges, inoltre questa opzione è che questo plugin agisce sui bordi del layer e non completamente sull'intero layer.
