Tutoriel gradualfader

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

Résolu Tutoriel gradualfader

Message par Sallie le Ven 22 Juil 2011 - 17:33

Bonjour.

Je veux faire un effet gradualfader sur mon forum et j'ai donc chercher des tutoriels. J'en ai testé beaucoup mais aucun ne marche sur mon forum. J'aimerais savoir si quelqu'un possède un effet gradualfader qui marche?

Merci d'avance.

Sallie
*

Féminin
Messages : 45
Inscrit(e) le : 25/03/2010

http://street-academy.forumactif.org
Sallie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel gradualfader

Message par demeter1 le Ven 22 Juil 2011 - 18:27

Non testé avec la nouvelle fonctionnalité que FA nous offre mais voici la méthode que j'ai appliqué sur un de mes forums. J'ai hébergé le fichier chez archive host, cela vous permettra de sauter une étape (bon rien ne vous empêche d'héberger le script dans le module javascript de fa et de modifier l'adresse du fichier js )

Étape 1: Rendez-vous dans la section template de votre panneau d'administration (PA>onglet affichage>section template tout en bas puis "général"). Ouvrez le template "overall_header" et cherchez ce passage( CTRL+F pour rechercher):

Code:
<head>


Juste après cette portion de code, collez ceci:

Code:

<script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/22406661265772126/gradualfader.js"></script>


Validez puis publiez.

Étape 2: Ouvrez à présent le template "overall_footer" et recherchez ce passage (CTRL+F pour rechercher):

Code:

</body>



Juste avant cette portion de code, collez ceci (c'est ce qui permettra d'activer le script):

Code:
<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>


Validez puis publiez.

Étape 3: Si vous avez correctement suivi les instructions, le script fonctionne maintenant. Il suffit de mettre une class à votre image:

Code:
:
<img src="url de l'image" class="gradualfader">


C'est toujours cette class qu'il faut utiliser. Si vous en avez déjà une, utilisez un span:

Code:
<span class="gradualfader"><img src="url de l'image" class="votre seconde class"></span>



Enfin, pour modifier les variables, rien de plus simple. Dans votre script, trouvez ce passage, il est tout en haut:

Code:
gradualFader.baseopacity=0.4 //set base opacity when mouse isn't over element (decimal below 1)
gradualFader.increment=0.2 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)



En modifiant la première ligne et en lui donnant une valeur décimale plus grande, comme 0.6 par exemple, votre image sera moins transparente lorsqu'on ne passe pas la souris dessus. Pour la seconde ligne, il s'agit de la vitesse à laquelle le fond se fait lorsqu'on passe la souris sur l'image. En mettant 0,1, ce sera plus rapide.


Dernière édition par demeter1 le Ven 22 Juil 2011 - 20:24, édité 1 fois

demeter1
+ Hyperactif +

Masculin
Messages : 8226
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel gradualfader

Message par Sallie le Ven 22 Juil 2011 - 19:49

Han sa marche!!!

Merci beaucoup ^^

Sallie
*

Féminin
Messages : 45
Inscrit(e) le : 25/03/2010

http://street-academy.forumactif.org
Sallie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel gradualfader

Message par demeter1 le Ven 22 Juil 2011 - 20:23

De rien Sallie.

demeter1
+ Hyperactif +

Masculin
Messages : 8226
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum