Partagez | 
 

 Faire clignoter un élément en fondu

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: Faire clignoter un élément en fondu   Dim 14 Oct - 10:28
Bonjour à tous Smile

Dans ce tuto, nous allons apprendre à faire clignoter un élément en fondu et tout ça en seulement quelques clics.

Ce tuto va se divisier en 2 parties :


Idea Rappel :
Code:
/* Pour mettre un commentaire/un repère non intéprété par le navigateur dans la partie CSS */

<!-- Pour mettre un commentaire/un repère non intéprété par le navigateur dans la partie javascript -->

<!-- Pour mettre un commentaire/un repère non intéprété par le navigateur dans la partie HTML -->

Idea Pré-requis :


Allez ! C'est parti !

La partie javascript



Yep ! ça commence par ça. Rassurez-vous, c'est super simple.

1 :: on va commencer par appeler la bibliothèque javascript (= la grosse base de donnée contenant des fonctions/animations pré-définies).
Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Idea si vous utilisez ce script sur votre forum ForumActif ce point n'est pas à faire. Passez directement au point 2 Smile

2 :: maintenant, on va créer une fonction qu'on appelera lorsque l'on voudra faire clignoter un texte
Code:
function blink(){
   <!-- Le code sera ici -->
}

3 :: dans celle-ci, on va créer un script qui va faire justement le clignotement. Pour cela, on va utiliser une animation pré-définie de jquery (donc tous les réglages sont dans la bibliothèque). Cette fonction s'appelle animate.
On va devoir la faire 2 fois : mon texte s'efface puis il s'affiche

Comme on veut un fondu, on va jouer avec l'opacité en la faisant diminuer ou augmenter progressivement.
Idea Plus l'opacité est proche de 0, plus l'élement sera transparent. A l'inverse, plus l'opacité sera proche de 1, plus l'élement sera opaque.

on va donc avoir une fonction "animate" qui ressemblera à ça
Code:
animate({opacity:0},1000).animate({opacity:1}, 1000);
Traduction a écrit:
On a une animation
Code:
animate()
qui va faire passer l'opacité de départ d'un élément à 0
Code:
{opacity:0}
progressivement, car cette animation va durer 1000 ms.

Puis, quand cette animation sera terminée (donc là c'est le "." qui fait office de "puis"), on va avoir une autre animation qui, cette fois, va faire passer l'opacité de notre élément à 1 pendant une période de 1000 ms.

4 :: il faut ensuite dire sur quel élément on veut faire agir cette animation. Ici, comme on veut pouvoir l'utiliser plusieurs fois, on va lui dire qu'on applique cette animation sur tous les éléments ayant pour nom de class "clignotement". Ce qui donne :
Code:
$(".clignotement").animate({opacity:0},1000).animate({opacity:1}, 1000);

Nous avons donc pour le moment ce bout de code
Code:
function blink(){
   $(".clignotement").animate({opacity:0},1000).animate({opacity:1}, 1000);
}

5 :: si on s'arrête là, l'animation s'exécute une fois puis s'arrête. Or, nous on veut que ça se répête. On va donc ajouter une fonction qui va faire la boucle.
Code:
setTimeout("blink()",4000);
Idea Traduction : "Tu vas exécuter la fonction blink() toutes les 4000 ms".
Ce qui fait : mon animation dure 2000 ms (donc 2sec ^^). Je fais une pause de 4000ms (donc 4sec). Mon animation se rejoue pendant 2sec. Je refais une pause de 4sec. etc.

Notre fonction ressemble donc à ça à présent
Code:
function blink(){
   $(".clignotement").animate({opacity:0},1000).animate({opacity:1}, 1000);
   setTimeout("blink()",4000);
}

6 :: C'est quasi fini ! Maintenant que notre fonction est créée, on doit dire à la page "dès que tu es chargée, tu lis cette fonction et tu l'appliques si tu la vois dans la page". On va donc utiliser ce code :
Code:
$(document).ready(function(){
  blink();
});
Idea Si on traduit : Quand ma page ($(document)) est chargée et affichée (ready), je lance la fonction suivante (fonction()) : blink().

Arrow Nous avons donc ce script
Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
<!--

   $(document).ready(function(){
      blink();
   });
   
   function blink(){
      $(".clignotement").animate({opacity:0},1000).animate({opacity:1}, 1000);
      setTimeout("blink()",4000);
   }

-->
</script>

Idea si vous utilisez ce script sur votre forum ForumActif il vous suffit de créer une page javascript, de l'afficher sur toutes les pages et d'y mettre le code suivant
Code:
   $(document).ready(function(){
      blink();
   });
   
   function blink(){
      $(".clignotement").animate({opacity:0},1000).animate({opacity:1}, 1000);
      setTimeout("blink()",4000);
   }

La partie HTML


Ici, on ne va pas s'attarder très longtemps Smile

En effet, dès que vous allez avoir envie de faire clignoter un élément, il suffira de lui donner le nom de class "clignotement". Et ça fonctionne pour tout ^^

-> Un paragraphe

Avouez que c'est chouette hein ! En seulement quelques clics on fait clignoter tout ce qu'on veut ! Ahhhh décidemment, on en apprend tous les jours sur SoP et le plus cool, c'est que je comprends ce que je fais !


Code:
<p class="clignotement">Avouez que c'est chouette hein ! En seulement quelques clics on fait clignoter tout ce qu'on veut ! Ahhhh décidemment, on en apprend tous les jours sur SoP et le plus cool, c'est que je comprends ce que je fais ! </p>

-> Un titre

Mon titre clignote ^^


Code:
<h1 class="clignotement titre_partie">Mon titre clignote ^^</h1>

-> Un bloc
Look at me

J'apparais et je disparais tout seul !

Code:
<div class="clignotement" id="participants"><span>Look at me</span>

J'apparais et je disparais tout seul !</div>

-> Une image
Avatar de Miettes by Ocelline
Code:
<img src="http://files.getwebb.org/files/0a/77/8f/e32c7eca71e0f7d6105a2aa27af8afea57/source.png" class="clignotement" alt="Avatar de Miettes by Ocelline" />

-> Un lien
School Of Pub, où la perfection est à la portée de chacun.
Code:
<a href="http://school-of-pub.fr/" class="clignotement">School Of Pub</a>, où la perfection est à la portée de chacun.

-> Un morceau de phrase
School of Pub, où la perfection est à la portée de chacun. (Dixit Audidounette)
Code:
School of Pub, où la perfection est à la portée de chacun. <span class="clignotement" style="font-size:10px; font-style:italic;">(Dixit Audidounette)</span>

Bref! Vous l'avez compris, ça marche pour tout !





Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
 

Faire clignoter un élément en fondu

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Résolu] se service d'une animation pour outlook
» pourquoi peut-on faire clignoter le bouton WIFI en orange ?
» Methode pour faire clignoter un feu de Ralentissement
» Faire bouger un objet au passage de la souris [ RESOLU ]
» [RESOLU] Cherche à faire apparition et disparition en fondu

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants