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
 70 Commentaires
Ils l'ont utilisé
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 !

fxmartin (Vendredi 16 Avril 2010 à 12:56):

Bonjour,
Abonné mais non premium, je voudrais savoir ou est le code source à telecharger ?
Thanks à lot !
Tu m'as convaincu du javascript, l'aventure flash est loin derrière !

Badbart (Vendredi 16 Avril 2010 à 13:18):

Tu as pas du chercher beaucoup, les sources sont a coté de la vidéo ...

Chgro (Mardi 20 Avril 2010 à 23:47):

Salut, je n'ai pas trouvé non plus les sources. En fait, je cherche plutôt les psd.

Où sont-ils ?

Badbart (Mercredi 21 Avril 2010 à 12:08):

Ya pas le psd de dispo. Et les sources c'est comme d'hab A DROITE DE LA VIDEO.
Vu que je suis pas sur que tu trouves juste avec les indications, j'ai fait une image : http://j.imagehost.org/0942/source.jpg

Si jamais tu bloques encore, je me propose de l'entourer encore un peu plus.

Nibdok (Mercredi 21 Avril 2010 à 13:28):

Non pour le coup ce n'est pas de la mauvaise volonté... les sources ne sont tout simplement pas là... du moins peut-être pas pour les membres premium (perso moi je m'en fiche un peu étant donné que les tutos sont si bien faits que l'on peut les refaire à la main.). Mais non Badbart, pas de sources ici... Mais bon je pense que si des gens ont besoin des sources, ils vous suffit de regarder la vidéo et de recopier, du coup vous aurez en bonus les explications de Grafikart

pobourger (Mercredi 21 Avril 2010 à 17:42):

Si tu voie pas le source entourer par Badbart c'est que tu est aveugle ou alors tu n'as pas de compte premium...
Si c'est le cas tes posts sont inutile xD

Chgro (Mercredi 21 Avril 2010 à 18:44):

Je n'ai pas ces icônes car, en effet je ne suis pas Premium mais un enregistré simple. Il m'avait pourtant semblé avoir vu qu'un simple utilisateur enregistré pouvait télécharger ces sources. Je ne devais pas avoir les yeux en face des trous.

J'avais juste besoin des psd car je suis un peu nul en Photoshop malgré toute la bonne volonté dont je dispose.

Néanmoins, Badbart, avant de prendre les gens pour ce qu'ils ne sont pas forcément, je te suggère d'apprendre les bases de la compréhension envers autrui. Pose les bonnes questions.

Nibdok, j'ai visionné plusieurs fois ce tuto et je vais le suivre sans sources déjà faites. Ce sera plus instructif.

@+

Badbart (Mercredi 21 Avril 2010 à 19:51):

Le message n'était pas QUE pour toi. Mais ton conseil est pas mauvais, c'est vrai que les bases sont très importante, beaucoup devrait t'écouter et apprendre les bases du php par exemple (la compréhension d'autrui à la limite on s'en fiche).
En tout cas, malgré que tu prennes mal mon message, j'ai répondu a ta question. Il n'y a pas le psd de fourni dans les sources, avec ou sans premium.

Chgro (Jeudi 22 Avril 2010 à 12:23):

Merci Badbart.

noob4ever (Lundi 26 Avril 2010 à 01:49):

Wow, vraiment trop beau, merci beaucoup))

noob4ever (Lundi 26 Avril 2010 à 02:02):

Trop bien y a même artkabis ici, trop bien lui aussi))

Charlie (Mercredi 19 Mai 2010 à 23:45):

Génial merci pour la qualité

foligraf (Lundi 28 Juin 2010 à 21:27):

Incorporé a mon site Merci mille fois.

Quand il sera en ligne je mettrais un lien pour montrer mon utilisation, a bientot.

networking (Mercredi 30 Juin 2010 à 14:23):

Ce tutoriel est génial mais comment fait-on pour avoir un texte transparent ?
c'est-à-dire pour pouvoir mettre autre chose que "admin".
Sinon ce tutoriel et même tout les tutoriels de ce site sont trop bien.

gizmodesbois (Vendredi 02 Juillet 2010 à 15:18):

Si tu es sur photoshop :

Tu ouvres photoshop (facile)
Tu créer un nouveau document (peut importe la taille)
Tu met ton fond , tu met la couleur.
Tu tapes ton texte la ou tu veux le placer.
Quand tout ça est fait tu vas dans les calques et tu vas chercher le calque de texte.
Tu appuyé sur la miniature du calque ( le cadre avec le T dedans) tout en maintenant la touche contrôle (cmd pour mac) appuyer.

Une sélection devrait ce faire , après tu vas dans Sélection => intervertir (ou ctrl(cmd)+shift+i), ta sélection va s'inverser et tu auras un cadre en pointillés.

Après tu te mets sur le calque de ton fond (tout en gardant la sélection active) et tu vas cliquer sur le logo en bas a coté de fx qui ressemble a un cercle blanc dans un carré gris.

Un masque sera fait , ton texte sera transparent , il ne te reste plus qu'a enregistré en PNG ton fichier et c'est gagné (garde le PSD au cas ou tu veux modifier)

Bonne journée

networking (Mardi 06 Juillet 2010 à 10:22):

ok merci beaucoup.

thqloz (Mercredi 01 Septembre 2010 à 16:50):

Bonjour tout le monde,

J'ai un petit soucis avec cet exemple en essayant d'aller un peu plus loin, j'ai tenté de générer le css de la div#glow (à générer une div en js autant générer son css avec), et c'est là que je bloque j'ai aucune erreur js mais l'effet n'apparait pas.

Pourtant à l'aide de firebug je vois bien qu'il me crée les deux div (glow et glowContainer) mais la div#glow est en display:none.

Voilà la ligne rajoutée au script glow :
$('#glow').css({backgroundImage:'url(../assets/rmap.jpg)', width:'358px', height:'203px', position:'absolute', display:'block', backgroundPosition:"0 0"});

En espérant que vous puissiez m'aiguiller sur ce qui cloche.

 

Ajouter un commentaire

Si vous rencontrez un problème avec votre code et que vous avez une question spécifique utilisez plutôt les questions pour avoir une réponses rapide.

Vous devez activer javascript.
 

 

Suivre les commentaires de ce tutoriel