Header
Partagez | 

[CODAGE] • Défilement automatique des partenaires

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Nevida

Etudiante
Bons Points (BP) : 114
Voir le profil de l'utilisateur

Message Sujet: [CODAGE] • Défilement automatique des partenaires   Ven 11 Aoû - 20:25

Défilement automatique des partenaires


Coucou tout le monde !

Oui oui, c'est encore moi ! Aujourd'hui, je vais vous expliquer comment créer un défilement automatique pour afficher vos partenaires sur une page d'accueil. En plus de cela, je vais vous indiquer les propriétés qui permettent de stopper le défilement automatique au passage de la souris et comment créer une modification d'opacité lorsqu'on passe la souris sur un icône partenaire Smile
Vous allez voir ce n'est pas si compliqué !

Ce que l'on va coder !

Voici donc un aperçu de ce que nous allons coder :

Spoiler:
 

Transcrire le visuel en HTML & CSS

Pour ce faire, nous allons d'abord coder le rectangle noir qui nous servira de fond :

Spoiler:
 

Code:
<div style="width:781px;height:45px;background:blue;margin-top:5px;margin-left:5px;background:#353535;"></div>

Une fois que cela est fait, on y intègre le défilement automatique, pour ce faire, nous écrivons les balises suivantes :

Code:
<marquee></marquee>

Donc ça donne ceci :

Code:
<div style="width:781px;height:45px;background:blue;margin-top:5px;margin-left:5px;background:#353535;"><marquee></marquee></div>

Si on laisse ces balises comme ceci, le défilement automatique ne se stoppera jamais. Du coup, on est obligé de lui indiquer que lorsque la souris passera sur le défilement, ce sera devra s'arrêter pour ce faire, on écrit ceci :

Code:
<marquee onmouseover="this.stop();" onmouseout="this.start();">

Code:
onmouseover="this.stop();"
: pour que le défilement s'arrête au passage de la souris
Code:
onmouseout="this.start();"
: pour le défilement démarre quand la souris quitte le défilement !

Vous pouvez très bien vous amusez à faire l'inverse même si c'est plus pratique de le faire dans ce sens pour cliquer facilement sur le bouton partenaire de notre choix Smile

Donc on obtient le code suivant :
Code:
<div style="width:781px;height:45px;background:blue;margin-top:5px;margin-left:5px;background:#353535;"><marquee onmouseover="this.stop();" onmouseout="this.start();"></marquee></div>

On ne reste plus qu'à coder les boutons partenaires ! Pour ce faire, nous allons créer une classe que j'appelerai "icone_partenaire" !

On peut déjà écrire le code avec cette nouvelle classe et en y ajoutant le lien partenaire et l'image du bouton  :

Spoiler:
 

Code:
<div style="width:781px;height:45px;background:blue;margin-top:5px;margin-left:5px;background:#353535;"><marquee onmouseover="this.stop();" onmouseout="this.start();"><div class="icone_partenaire"><a href="LIEN_PARTENAIRE" target="_blank"><img src="http://nsa38.casimages.com/img/2015/10/06/151006013817318176.png"></a></div></marquee></div>

Info : l'attribut _blank permet d'envoyer la cible dans une page vierge, autrement dit cela permet d'être dirigé vers le site partenaire par l'ouverture d'un nouvel onglet de votre moteur de recherche, c'est plus pratique !

Maintenant que c'est fait, on stylise notre class "icone_partenaire" de la façon suivante :

Code:

.icone_partenaire{
display:inline-block;
margin-top:5px;
opacity:0.6;
transition:1s;
transform:all;
}

Quelques explications sur les propriétés CSS utilisées pour cette classe

Code:
display:inline-block;
: permet d'aligner tous les boutons partenaires sur une même ligne
Code:
margin-top:5px;
: permet de positionner correctement les boutons dans le rectangle noir de fond, pour le centrer par rapport au haut et au bas du rectangle
Code:
opacity:0.6;
: permet d'abaisser l'opacité du bouton partenaire

Cela permettra d'obtenir ce résultat :

Spoiler:
 

(bon ici l'effet onmouseover ne fonctionne pas mais il fonctionnera sur votre page html, ne vous inquiétez pas^^) !

On a presque terminé, il ne reste plus que l'effet d'opacité à ajouter en hover (c'est à dire au passage de la souris, on veut que l'opacité du bouton augmente). Pour réaliser cet effet, c'est très simple ! On crée une nouvelle classe, qui sera le hover de la classe "icone_partenaire", on l'écrit comme ceci :

Code:

.icone_partenaire :hover{
}

Puis on lui attribut les propriétés CSS suivantes :

Code:

.icone_partenaire:hover{
opacity:1;
transition:1s;
transform:all;
}

Quelques explications sur les propriétés CSS utilisées pour cette classe

Code:
opacity:1;
: permet d'augmenter l'opacité au maximum (1 correspond à 100% d'opacité)
Code:
transition:1s;
: permet de réaliser la transition en 1 seconde, vous pouvez modifier ce temps de transition !
Code:
transform:all;
: permet d'appliquer cet effet sur l'ensemble de la classe

Voici donc le rendu final :
Spoiler:
 

Voilà, le tour est joué ! J'espère que ce tutoriel vous servira pour votre forum !

© Tutoriel by Nevida - Tous Droits Réservés.

Je soussigné(e), Nevida, accepte / n'accepte pas [barrez la mention inutile] qu'un directeur reposte le tutoriel "titre" tel que je l'ai rédigé.
Revenir en haut Aller en bas
En ligne
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Elenthil

Directrice
Bons Points (BP) : 2213
Voir le profil de l'utilisateur

Message Sujet: Re: [CODAGE] • Défilement automatique des partenaires   Mar 15 Aoû - 13:11

Coucou Nevida et merci pour ce tuto ^^

On en parle entre nous en zone staff et on reviendra vers toi pour en discuter plus en détail Wink
Revenir en haut Aller en bas




Merci à Ecleasya et Askip :love:
Spoiler:
 


avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Nevida

Etudiante
Bons Points (BP) : 114
Voir le profil de l'utilisateur

Message Sujet: Re: [CODAGE] • Défilement automatique des partenaires   Mar 15 Aoû - 17:23

Coucou Elenthil Smile
Merci à toi pour ta réactivité :p
J'espère que mon tutoriel est assez complet, s'il y a des modifications à faire, n'hésitez pas à me dire Very Happy
Revenir en haut Aller en bas
En ligne
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Elenthil

Directrice
Bons Points (BP) : 2213
Voir le profil de l'utilisateur

Message Sujet: Re: [CODAGE] • Défilement automatique des partenaires   Mer 13 Sep - 11:14

Coucou Nevida Smile

Désolé pour le temps de réponse, avec les fins de vacances, le redémarrage et tout, on a mis un peu de temps avant de venir te répondre désolé :nuage:

Le tuto est intéressant mais nous trouvons qu'il manque un peu de clarté Razz

Première chose, mettre du css dans les balises html, ce n'est pas l'idéal. Il vaut mieux avoir une partie CSS à part (déjà pour rendre le html moins chargé et pour une meilleure clarté des informations). En plus à la fin de ton tuto, tu mets le CSS à part. Il vaut mieux rester sur cette méthode Wink

Je te conseillerais aussi de faire passer d'abord l'étape du codage et l'insertion des boutons partenaires avant l'effet dynamique. Pour le étape par étape, je trouve que c'est mieux d'avoir d'abord l'aperçu complet visuel statique et ensuite le mettre en animation Smile

Ensuite, ça serait bien aussi de mettre plus de titres explicatifs pour les différentes étapes.

Dans ton tuto, tu nous parles de :
- Mettre en forme la barre des boutons partenaires + ajouter les boutons
- Effet défilement + stop au passage souris
- Effet Animation Opacité

Donc, séparer ces grandes étapes par un titre évocateur serait plus parlant ^^

Puis, n'oublie pas que tu parles de JS aussi (avec l'effet pour stopper l'animation au passage de la souris). Il faudrait que tu le précises car un lecteur débutant peut croire que c'est du html ou du css Wink (avec un sous-titre pour dire qu'on va intégrer du JS et porter l'attention du lecteur dessus). Tu peux aussi nous donner une explication sur ce qu'est le "this". Tu parles du stop et du start mais pas du this ^^ Et puis pareil, tu peux aussi expliquer chaque élément utilisé (onmouseover/onmouseout) parce qu'on ne sait pas quel élément fait quoi en fait ^^

Il y a un autre petit truc où j'ai un doute mais je vais en parler avec le staff parce que je ne suis pas sûre. Dans tes exemples, il y a le titre de ton forum sur les boutons + le lien pour accéder à ton forum Fukusha Jinsei. Or les tutos pour ici doivent être créés pour SoP il me semble. Or dans tes spoilers, le texte c'est "CODAGE BY NEVIDA DE FUKUSHA JINSEI - WWW.FUKUSHA-JINSEI.COM" alors que nous sommes sur SoP pas cet autre forum Wink
Donc moi je dirais qu'il faudrait enlever le nom du forum mais comme je ne suis vraiment pas sûre du tout, je vais demander l'avis à mes collègues et je reviens vers toi rapidement pour te dire ce qu'il en est.

EDIT : Je suis allée demandée et on s'est dit qu'il serait mieux que tu retires le nom du forum Fukusha Jinsei là où il apparaît Smile Après tout nous sommes sur SOP et ça fait bizarre de voir le nom d'un autre forum sur un tuto destiné à SoP Wink Je te demanderais aussi de changer les boutons, prendre le bouton de SoP par exemple ou un qui est plus neutre. Merci pour ta compréhension :love:

Je te laisse faire les modifications demandées ^^ (sauf si tu préfères attendre la réponse pour le lien du forum Smile) Et j'en aurais peut être d'autres à te demander de faire une fois que tu auras modifié Smile
Revenir en haut Aller en bas




Merci à Ecleasya et Askip :love:
Spoiler:
 


avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Nevida

Etudiante
Bons Points (BP) : 114
Voir le profil de l'utilisateur

Message Sujet: Re: [CODAGE] • Défilement automatique des partenaires   Dim 17 Sep - 14:19

Coucou Elenthil Smile
Je comprends et j'espère avoir le temps de faire les modifications. C'est que j'ai très peu de temps mais je souhaitais vous aider en partageant ce tutoriel. Si j'ai un peu de temps, je ferai les modifications nécessaires mais je vous cache pas que le temps me manque terriblement. Il y a t-il un délai pendant lequel les modifications doivent être faites ou cela peut-être mis en stand by quelques temps ? ^^

Pour le lien, j'ai pas trop fait gaffe. Il sera bien évidemment retirer, je ne souhaite pas le laisser Smile

Merci à toi Smile
Revenir en haut Aller en bas
En ligne
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Elenthil

Directrice
Bons Points (BP) : 2213
Voir le profil de l'utilisateur

Message Sujet: Re: [CODAGE] • Défilement automatique des partenaires   Dim 17 Sep - 17:02

Coucou Nevida ^^

C'est gentil pour l'aide Smile

Concernant le temps pour mettre à jour ton tuto, nous te laissons un mois pour faire les modifications nécessaires. Si vraiment tu n'as pas le temps de le corriger dans ce mois, le sujet sera archivé mais tu pourras nous prévenir pour qu'on le remette en place dès que tu auras le temps de t'en occuper Smile

Merci encore :love:
Revenir en haut Aller en bas




Merci à Ecleasya et Askip :love:
Spoiler:
 


avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Nevida

Etudiante
Bons Points (BP) : 114
Voir le profil de l'utilisateur

Message Sujet: Re: [CODAGE] • Défilement automatique des partenaires   Mer 20 Sep - 11:03

Super merci beaucoup Smile
J'essaye de voir ça dans le mois *-*
Revenir en haut Aller en bas
En ligne
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Elenthil

Directrice
Bons Points (BP) : 2213
Voir le profil de l'utilisateur

Message Sujet: Re: [CODAGE] • Défilement automatique des partenaires   Mer 20 Sep - 11:16

C'est noté ^^ Merci à toi Smile
Revenir en haut Aller en bas




Merci à Ecleasya et Askip :love:
Spoiler:
 


[CODAGE] • Défilement automatique des partenaires
Page 1 sur 1
 Sujets similaires
-
» Forcer la première bannière d'un défilement automatique
» problème avec Défilement d'images avec liens (partenaires) :
» Barre de défilement
» Tableau de partenaires avec effet Zoom
» Redimensionnement automatique des images
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Proposer un tutoriel+