Tutoriel gradualfader

2 participants

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

Résolu Tutoriel gradualfader

Message par Sallie 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

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 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

demeter1
Membre actif

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

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

Résolu Re: Tutoriel gradualfader

Message par Sallie Ven 22 Juil 2011 - 19:49

Han sa marche!!!

Merci beaucoup ^^
Sallie

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 Ven 22 Juil 2011 - 20:23

De rien Sallie.
demeter1

demeter1
Membre actif

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

https://altitudetropicale.forums-actifs.com/
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