Tutoriel vidéo jQuery : Effet de lueur en Javascript

Tutoriel jQuery

Dans ce tutoriel vidéo vous apprendrez à réaliser un effet de lueur dynamique en Javascript. Découvert sur le labs de l'agence Dragon Interactive, cet effet consiste simplement à faire défiler une image contenant des dégradé derrière un masque transparent.

Démonstration

Tags : JqueryJavascriptLueur

Tutoriel jQuery posté Mercredi 06 Janvier 2010
 53 Commentaires

 

Partager
Ils l'ont utilisé

 

Publicité

 

Vos commentaires
Laisser un commentaire

Quentin (Mercredi 06 Janvier 2010 à 14:35):

Merci! Sa peut servire

Léo (Mercredi 06 Janvier 2010 à 14:40):

Effet super sympa et classe ...

Badbart (Mercredi 06 Janvier 2010 à 14:46):

Ouai bon, c'est pas le truc super indispensable, mais c'est beau.

Arnaud (Mercredi 06 Janvier 2010 à 14:48):

Super merci :D

Lovev'cade (Mercredi 06 Janvier 2010 à 14:50):

Je me demande où tu trouves tous sa... C'est simplement énorme comme technique, et en effet super classe.

Alex (Mercredi 06 Janvier 2010 à 14:51):

Merci ! L'effet est très sympa, fallait y pensé.

super_g2 (Mercredi 06 Janvier 2010 à 15:14):

nice ce tuto mille mercis mon cher grafi et bonne année à toi et à toute ta famille

Csg-Studio (Mercredi 06 Janvier 2010 à 15:33):

Merci pour le tuto, encore une fois, je le regarderai ce soir !

Kentiin (Mercredi 06 Janvier 2010 à 15:51):

Super ton tuto continue comme sa!

Synops229 (Mercredi 06 Janvier 2010 à 15:55):

C'est super joli, moi qui ai l'habitude de faire des animation en flash, je sens que je vais bientôt passer au javascript pour la bonne raison que le flash va se faire dépassé par ce langage.

MagiC (Mercredi 06 Janvier 2010 à 16:48):

Merci.
C'est quoi le logiciel que tu utilise? lunchy? Pour la calculette

Grafikart (Mercredi 06 Janvier 2010 à 17:49):

Launchy, Il permet de lancer rapidement des applications et de faire d'autres chose (calculette par exemple )

Rapha (Mercredi 06 Janvier 2010 à 19:23):

Magnifique...

pacintosh (Mercredi 06 Janvier 2010 à 20:06):

Vraiment nickel c'est vrai, à mettre dans la boite à outils ;o)
Merci bien pour l'info.

Darkavatars (Mercredi 06 Janvier 2010 à 20:10):

Super tuto vachement beau ^-^ il serai possible d'avoir le contenu pour les membres qui ne sont pas en premium pas les codes les images utiliser si c'est possible ?

cerise (Mercredi 06 Janvier 2010 à 20:29):

On commence l'année avec un tuto génial.
Vraiment beau cet effet!
je me le garde précieusement comme tous les autres
merci vraiment

Sc62 (Mercredi 06 Janvier 2010 à 20:35):

SUPER! vraiment du travail de pro.

Kris Concept (Mercredi 06 Janvier 2010 à 21:31):

Bluffant ce que l'on peux faire en Javascript !! Merci Grafikart pour ce magnifique tuto.

Technostyle (Jeudi 07 Janvier 2010 à 04:04):

Oh super merci de ne pas l'avoir mis payant ^^
c'est tout ce qui me manquait pour mon portfolio^^
Merci x1000

agentcobra (Jeudi 07 Janvier 2010 à 13:31):

c'est super je vais faire quelques essais avec

j'ai juste question, où peut on avoir les images sources
je ne les trouves pas sur le site de dragon lab

Thomas (Jeudi 07 Janvier 2010 à 13:48):

Merci super tuto j'adore jquery

@agentcobra
si tu as firefox va sur http://labs.dragoninteractive.com/panel/demo/
avec firefox dans outils / information sur la page / Medias
tu auras toutes les images ...

agentcobra (Jeudi 07 Janvier 2010 à 21:53):

ok merci, il n'y a pas de zip ?
il faut les "aspirer".

Thomas (Vendredi 08 Janvier 2010 à 20:37):

Non si tu suis mon cheminement tu clics sur l'image et tu clics sur enregistrer tout simplement. tu fais image par image

agentcobra (Mercredi 13 Janvier 2010 à 12:25):

plus simple, tu fais enregistrer la page, les images viennent avec

MyXfrd (Jeudi 07 Janvier 2010 à 18:13):

Il y a un bug sous Internet Explorer 7 mais sinon sous Firefox c'est super!!!!!!!!!!

Harry (Jeudi 07 Janvier 2010 à 20:26):

Pareil avec Safari sur la démo (le bloc est tout en haut)

Aleks (Jeudi 07 Janvier 2010 à 19:44):

Un très grand bravo ! C'est encore une fois super. Celui là je l'attendais et je suis vraiment pas déçu. Gg !

LimeCitrus (Jeudi 07 Janvier 2010 à 20:23):

Merci pour l'idée, vraiment bien expliqué...

Jay (Jeudi 07 Janvier 2010 à 23:25):

Grâce à toi et à ce tuto, j'ai résolu un souci de js d'un de mes sites avec la fonction stop() de jquery que tu utilises içi, et dont j'ignorais l'utilité donc merci.

fantoche (Vendredi 08 Janvier 2010 à 02:00):

Bonne année à tous.
Excellent et très jolie.
Une question totoshop :
J'essai de refaire l'image du bloc a une autre dimension, comment produire reproduire l'effet du cadre central en bordur un peu flou ?
Merci

Corentin (Vendredi 08 Janvier 2010 à 12:21):

Ouais ça serait pas mal d'avoir le psd pour modifier à volontés les blocs ...

@+ Et bonne journée sous la neige ^^

fantoche (Vendredi 08 Janvier 2010 à 14:51):

Pas forcément le psd, mais la façon de faire.

Merci pour la neige, mais par chez moi c'est plutôt normal d'en avoir une trentaine ou plus (de centimètres) en cette période.

Thomas (Vendredi 08 Janvier 2010 à 20:52):

tu ouvres une feuille fond transparent
tu crées un calque (1) -> un rectangle noir avec angle arrondi
tu crées un calque (2)-> tu le met tout en fond noir

tu prend ton claque (1) dans ton onglet claque Ctrl + clic gauche (ca sélectionne ton cadre)
tu sélectionnes ton calque (2) tu as tjs ta zone de selection -> Tu vas dans sélection / modifier / contour progressif et tu choisis 2 à 5 pixels a toi de voir.

et tu fais Suppr.


Voila

T'enregistre tout ca en png 24

fantoche (Samedi 09 Janvier 2010 à 00:10):

Thomas, un grand merci ;-)

Corentin (Vendredi 08 Janvier 2010 à 14:57):

Merci encore pour se tuto ..

olivier (Vendredi 08 Janvier 2010 à 21:06):

Style très sympa,
quelle texture utilises-tu dans le formulaire?

Merci!

Asm (Samedi 09 Janvier 2010 à 01:03):

Merci encore pour ce tuto une nouvelle fois très utile !

leknoppix (Samedi 09 Janvier 2010 à 11:10):

Super tutoriel

Par contre, une petite erreur: 25000secondes et non 25000pixel Tu as fait une faute orale.

R-transat (Dimanche 17 Janvier 2010 à 16:14):

Et tu as fait une faute de frappes ^^ 25000ms et non secondes

joska (Samedi 09 Janvier 2010 à 20:48):

super idée. Merci pour le tuto.
Bonne années à tous

max (Mardi 12 Janvier 2010 à 17:06):

waow...ché jouliiiiiiii....encore une trouvaille!!!

artkabis (Mardi 12 Janvier 2010 à 23:15):

Très beau rendu, je ne connaissais pas cet effet et je dois dire que le résultat est vraiment surprenant. Un très bon tutoriel !!!

toto (Vendredi 15 Janvier 2010 à 03:06):

Très bon tuto par contre, est ce qu'il y aurait un moyen d'enlever "l'effet de pulse" de la lueur ? (Cet effet se produit quand on clique rapidement les input login, pass, login, pass, .... et ensuite on arrête de cliquer). Merci d'avance

R-transat (Dimanche 17 Janvier 2010 à 15:24):

Très bon tuto =) Merci =P
Par contre à la fin lorsque l'on rajoute le glowContainer et que l'on navigue entre les deux champs on voit le fadeOut et le stop ne sert plus à rien, y a t-il une solution ?

leforezien (Mercredi 20 Janvier 2010 à 16:18):

A chaque fois un tuto réussi: encore bravo!

Atasuke (Vendredi 22 Janvier 2010 à 09:32):

Peu de code pour un beau rendu
Merci :-)

Jutix (Lundi 01 Février 2010 à 15:12):

Trop class !

bobskye (Vendredi 05 Février 2010 à 07:06):

Vraiment pas mal mais peut-on utuliser cette effet sur un contour de bouton, je ne vois pas quel fonction je doit utuliser, si une ame charitable peut m'expliquer

webber (Mercredi 17 Février 2010 à 19:33):

Vraiment super, très simple à faire et ça en jète!
par contre petite remarque: Je trouve dommage que tu n'utilise plus l'effet de zoom sur tes vidéos... certes ça doit être plus de travail mais alors quel confort après ! car là le code est tout petit c'est a peine si on arrive à le lire, et si on passe en plein écran on ne peut plus écrire :s
sinon mis à par la forme, le fond est génial, j'ai rigolé en voyant les anglais supplier dragon intéractive pour avoir un tuto sur ça ^^ alors que nous francophones nous avons notre raton qui fait des merveilles !!!
Merci encore

mpassionate (Dimanche 21 Février 2010 à 22:15):

J'ai réussit à faire cette exemple sur mon site web et je ne suis pas capable de faire animer l'image coloré derrière la casse. C'est avec quel version de jQuery vous avez utilisé dans ce tutorial. Je pense que le problème vient de là. Pour la création de la page j'ai utilisé la version 1.2.4 (dernière version) de jQuery. Je sélectionne le formulaire, l'image que normalement est posé de bouger elle ne bouge pas.

Merci de votre aide pour régler ce petit problèmes.

Badbart (Dimanche 21 Février 2010 à 23:12):

C'est pourtant simple, tu as juste a mettre a jour Jquery (3min chrono), tu verras bien si le problème vien de là.

stephbf (Vendredi 26 Février 2010 à 08:56):

salut

super tuto ,néanmoins il y a un truc que je ne comprend pas. pourquoi avec moi,ça ne fonctionne pas. sous IE8 j ai une erreur d objet inattendu. (c est la fonction), et sous mozilla, (animateglow not defined). pourtant j ai bien recopié le code js.
si quelqu un pouvait me dire pourquoi, ça serait sympa. merci

Xtfu (Jeudi 04 Mars 2010 à 02:20):

Bonsoir,
Félicitations tout d'abord pour ce tutoriel clair et tout à fait intéressant!
J'aurais cependant une question:
Pourrait on appliquer cet effet aux boutons d'un menu horizontal par exemple ?L'effet serait alors activé non pas suite à une clic mais par un "mouse over" et donc désactivé par "mouse out". Si cela est possible comment procéder ?
Merci d'avance pour votre réponse !

 

Ajouter un commentaire
Vous devez activer javascript.
 

 

Suivre les commentaires de ce tutoriel