Pas difficile et efficacement. Terminer trembler votre avatar.
1. Ouvrez l'image dont vous avez besoin et de le donner:
2. Maintenant, mettez en surbrillance le fond de la fille avec l'outil baguette magique. Ou vous pouvez allouer pour ceux qui savent comment la couche de masque. Puis Sélection\u003e Inversion (Select\u003e Inverse).
3. Maintenant Ctrl + J.. Il devrait y avoir deux couches avec une fille.
4. Nous allons B. Filtre\u003e Flou\u003e Flou en mouvement (filtre\u003e BLUR\u003e Motion Flur).
5. Maintenant, il reste seulement de configurer l'animation. La première fenêtre n'est pas une couche visible, la seconde est visible, la troisième n'est pas visible. J'ai fait un intermédiaire 6.
Tout de même est efficace pour le texte. Seulement pour le brouiller, vous devez d'abord Type de rasterize (type de rasterize). Il allume le texte flou:
Pour renforcer visuellement l'effet, vous pouvez aller un peu plus difficile:
1. Nous écrivons du texte. Nous rasérons la couche:
2. Faites plusieurs copies, disons deux (vous pouvez plus) Ctrl + J..
3. Maintenant à tour de rôle floue chaque couche ( Filtre\u003e Flou\u003e Flou en mouvement (filtre\u003e BLUR\u003e Motion Flur)), mais avec des degrés variables. C'est à ressembler à ceci:
Couche 1. \u003d Pas de flou
Couche 2. \u003d Flou 5.
Couche 3. \u003d Flou 10.
Bonjour, chers lecteurs. Aujourd'hui, je veux vous dire comment en utilisant jQuery. Vous faire secouer presque tous les objets sur le site que nous voudrons seulement.
Vous penserez probablement que pour des non-sens? :-) Ce n'est pas comme ça du tout. Il a l'air tellement efficacement. Surtout si c'était vraiment absurde, je ne l'ai pas publié sur le blog.
Ici, nous ne regardons pas de petits exemples. Ce script vous permet de secouer des objets lorsque vous survolez et tout le temps. Ainsi que des effets supplémentaires, par exemple, tels que. Dans les sons tentants, n'est-ce pas? :-)
Je veux vraiment dire un merci énorme merci à jackrugile.com pour ce plugin cool.
En général, regardons comment mettre en œuvre une telle chose sur votre site.
ι
JQuery framework and script secouant
Par tradition, nous devons attacher la bibliothèque et le script lui-même tremblant. Pour cela entre les tags
et Nous ajoutons ce qui suit:
Ces fichiers (scripts) sont dans le code source que vous pouvez télécharger ci-dessus.
Je vous rappelle si la bibliothèque est déjà attachée, il n'est pas nécessaire de la joindre à nouveau.
jquery-1.7.2.min.js - Bibliothèque (cadre). Je répète, si vous avez ci-joint ce script, vous n'avez pas besoin de nouveau.
jquery.jrumble.1.3.min.js - Mais ce script, qui crée en fait des miracles avec des objets sur le site. :-) Joignez-le nécessairement.
Objets
Dans ce cas, nous secouerons l'habituel, ce qui créera avec l'aide. C'est ainsi que ce bloc ressemblera à:
Et voici le code CSS lui-même:
Démo-box (flotteur: gauche; marge: 10px 20px 20px 0; largeur: 130px;) .demo-box.last (marge: 10px 0 20px;) .Demo-boîte; Couleur: # 40B9FF; Couleur: #fff; Taille de la police: 30px; Poids: Bold: Bold; Hauteur: 130px; Hauteur de ligne: 130px; Marge: 10px 0 0 0; Texte-Align: Centre; Text-Shadow: -2PX 2PX 0PX RGBA (0,0,0 , .2);) .Demo-box div: plancher (arrière-plan: # 4C7FF;)
Ceci est le code de bloc qui est présenté dans l'exemple.
Tremblement
Maintenant, nous appellerons le script lui-même.
Le principe du script est très simple. Il effectue des mouvements aléatoires le long des axes X et Y à une certaine vitesse. Ces paramètres que nous pouvons vous configurer.
Par exemple, dans la démonstration, nous avons le tout premier bloc au numéro un. Il se déplace lorsqu'il se déplace le long des axes spécifiés: X: 2 et Y: 2, le paramètre de rotation est tel que défini avec une valeur 1. Ce paramètre déterminera s'il sera secoué ou non, autrement dit, il ne donne pas loin loin le bloc pour ses frontières. Ainsi, obtient visuellement un petit ou un effet fort.
Voyons maintenant comment tout aura lieu dans le code:
Gammes
Par défaut, prenez le premier bloc avec la classe DEMO1
la démo-box est une classe de bloc que nous avons créée au début dans les styles CSS.
demo1 - classe que nous allons utiliser dans le script de tremblements à ce bloc.
Scénario
Maintenant, vous avez besoin de balises
et Ajoutez-le:
Comme vous pouvez le voir dans le script, le bloc est en cours de paramètres spécifiés X: 2, Y: 2, avec rotation: 1. Je veux dire (répéter) que ces paramètres peuvent être changés comme vous voulez. Et dans la démonstration, ces paramètres sont représentés.
La vitesse
Ici, nous augmenterons et réduirons la vitesse de tremblement. Pour ce faire, prenez un exemple dans une démo au numéro 5. Dans ce cas, le script d'appel lui-même changera légèrement. Il ressemblera à ceci:
Par défaut, la vitesse est nulle, plus la valeur de ce paramètre est importante, moins la démonstration va secouer :-) La démonstration présente plusieurs exemples avec des valeurs différentes.
Transparence
Ici, nous allons combiner la secousse et la transparence en même temps. Je veux dire ce qui a l'air très beau et pas habituellement :-)
Dans la démo, prenez un bloc au numéro 12, qui shacrit comme un fou, et encore une fois, seul un script d'appel changera:
DANS cet exemple La valeur est définie sur 6 sur les deux axes. Le paramètre de rotation est 6, vitesse 5. La transparence dans le script est appelée - opacité avec une valeur réelle est une ligne obligatoire. Ainsi que la force de transparence - OpacityMin: il coûte 05. Plus cette valeur sera le bloc le plus transparent lorsque vous survolez.
Autres exemples
Des exemples de scripts de bloc seront présentés ici dans la démonstration à leur propre numéro et en classe:
Bloc 14 (Cliquez sur)
Bloc 15 (Cliquez sur (Hold))
Bloc 16 (sans arrêt)
Bloc 17 et 18 (à distance)
il effet intéressantLorsque lorsque vous allumez sur le bloc droit, se déplace à gauche et inversement.
Bloc 19 (plusieurs sec. (Cliquez sur))
Bloc 20 (pulsant)
ι
Nous avons donc appris comment nous secouons des objets sur la page Web. C'est tout. chers amisSi vous avez des difficultés, assurez-vous de demander dans les commentaires. À bientôt.
Dans cet article, je vous dirai comment créer un petit effet de tremblements de couches (texte, formes et tout autre) dans Effets secondaires.Créer une vidéo stylisée (éléments). J'ai vu beaucoup de rouleaux, où cet effet a été utilisé: sur le dessus de la vidéo ou utilisée comme stylisation de tout élément. Ceci peut être fait différentes façonsJe vais en parler à l'un d'entre eux. Ne confondez pas ce tremblant avec la position habituelle sur la position, elle est complètement différente.
Pour faciliter la tâche, pour cela dans votre composition, il doit y avoir des couches de texte ou des éléments qui doivent être décomposés, puis créer une couche de réglage et lancer un plugin à la turbulance déplacer:
Après cela, vous tournez les réglages: plus la taille de la turbulance déplace, les plus petits détails que vous obtenez lorsque vous tremblez. Le paramètre d'amout affecte la force de la gigue, j'ai quitté 15. Ensuite, animée ce tremblement, car je suis entré dans l'heure du paramètre Evolution * 2500. Fabriqué une telle expression ad-rapide, car nous utiliserons davantage le temps de postérus pour créer des cadres.
Sauter le personnel sur les couches tremblantes améliore cet effet. Faire fPS bas La composition peut être différentes façonscomme des expressions et des plugins. Je vais utiliser le plugin de temps postériser pour réduire le nombre de cadres par seconde. Vous pouvez créer une nouvelle couche de réglage et vous pouvez faire du prépomposi, dans tous les cas, vous devez lancer le plug-in Time -\u003e Postériser le temps. Je mets 15 images par seconde, plus cette valeur est petite. Le grand cadre sera "partir".
Pour les formes, le modificateur de chemins Wiggle peut être utilisé séparément. De plus, vous pouvez séparer séparément la turbulance déplacer des couches pour créer une gigue aléatoire.
De plus, vous pouvez utiliser des bords rugueux, plus cette option est qu'il s'agit de ce plugin agissant sur le bord de la couche et non complètement sur toute la couche.
