Aller au contenu

Comment créer des transitions sur menu CSS3 et la géolocalisation avec HTML5 JavaScript

Apprenez comment ajouter des effets de transitions sur un menu CSS3. Et découvrez la technique HTML5 / JavaScript pour mettre en place la géolocalisation sur vos sites web.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment créer des transitions sur menu CSS3 et la géolocalisation avec HTML5 JavaScript

Bonjour à tous et bienvenu sur Développement Facile.

On continu avec l’HTML et le CSS3, donc là ça concerne un peu de l’HTML 5, du CSS3 et du JavaScript, on combine un peu les trois langages pour effectuer de la géolocalisation, et des transitions.

Effectuer une transition/un menu

Effectivement il y a de plus en plus de sites Internet qui vous propose de vous géo localiser en direct, et aussi par exemple, Google Maps, qui vous propose des itinéraires du point ou vous êtes actuellement jusqu’au point où vous souhaitez aller, donc tout ça c’est fait en combinant des propriétés HTML 5 et JavaScript. On va commencer par les transitions, faire un effet sur le menu grâce à cette propriété CSS3, la propriété transition avec, je vous ai mis un exemple, height 0.5s ease-in, il existe quatre propriétés différentes, transition-propritete, ce sont des propriétés CSS animées, vous pouvez animer la couleur, la hauteur, et le mot-clé all ça désigne toutes les propriétés de l’élément. Je vous conseille de faire les transitions, soit sur la hauteur, la largeur ou la couleur, vous pouvez définir la durée de la transition, bien évidemment, en seconde ou en milli secondes, 0,5s ça veut dire 0,5 secondes, timing-fonction c’est la fonction de transition à utiliser, il y a ease, linear, ease-in, ease-out, et ease-in-out, si vous êtes développeur ActionScript, vous les connaissez déjà ces fonctions de transition, et le délais, donc c’est le retard de départ de la transition soit en seconde, soit en millisecondes.

On va voir ensemble un exemple de code source de transition se sera beaucoup plus parlant, beaucoup plus simple, c’est un effet, un menu enfaite, tout simplement, menu accordéons, ici, avec un effet de transition que l’on détermine ici, height en 0.3 secondes, ease-in-out, bien évidemment avec moz, webkit, et ms pour que la transition soit compatible avec la majorité des navigateurs, donc voici les effets de transition sur ce menu, vous avez, tout est là enfaite, dans cette propriété css tout simplement, je vous montre à quoi ça ressemble, vous avez votre menu, et voilà, l’effet de transition, bien évidemment, vous remarquez que sur le code source j’ai mis des couleurs différentes, des background-color différentes à chaque fois, sur les menus accordéons ici, en bleu, voilà, encore un background différent et donc c’est pour ça qu’il y a des couleurs différentes. Ça vous fait des effets de menu sympas tout en sachant que dans le texte là soit vous pouvez mettre un seul, un ou plusieurs éléments, des liens, des images, ce que vous voulez, ça permet de créer des effets sympas de transitions.

La géolocalisation

Vous avez également la possibilité en combinant du html 5, un peu de CSS3 et du JavaScript, de faire de la géolocalisation avec l’objet JavaScript navigator.géolocalisation, et vous récupérez get élément by id, et vous faites innerHTML pour afficher les coordonnées de géolocalisation de l’utilisateur.
Je vais vous montrer un exemple de code source, la géolocalisation comment ça se passe ? Vous avez votre javascript ici, et votre html ici, donc qu’est-ce qui se passe ?
Au chargement on a une div latitude, une div longitude, guillemet chargement, on va mettre en français, chargement en cours, tout simplement, et pareil, chargement en cours, tout simplement. Et donc qu’est-ce qu’il se passe ? Au chargement de votre page, est-ce que l’objet navigator javascript est disponible ? Si oui tant mieux, sinon on récupère on fait un inner HTML sur la div error, si vous ne savez pas comment fonctionne inner html regardez les cours javascript sur Développement Facile.com, développement-facile.com il y a des cours javascript qui vous expliquent à quoi, comment fonctionne getElmentById avec inner html, donc on récupère la div error et on affiche le message la géolocalisation n’est pas disponible avec votre navigateur, message d’erreur, cette div sera renseignée. Si l’objet navigator est disponible, on appel la fonction de géolocalisation getCurrentPosition pour récupérer la position de l’internaute, on fait appeler une fonction getPosition, et une fonction getError en cas d’erreur, je vous montre getError, on récupère le code d’erreur et en fonction du code d’erreur, on affiche un message différent, j’ai laissé les messages d’origine en anglais, vous pourrez les traduire en français, et par défaut votre géolocalisation n’est pas disponible, une erreur est arrivée, la requête pour l’utilisateur pour demander la géolocalisation est, il y a eu un timeout sur la requête, des informations de géolocalisation ne sont pas disponibles, et là l’utilisateur a refusé, enfaite, si vous êtes sur firefox vous avez toujours un message qui vous demande d’autoriser la géolocalisation, c’est très pratique, vous savez si un site internet cherche à vous géo localiser, grâce à FireFox vous pouvez l’autoriser ou pas, d’où le message : l’utilisateur a refusé d’être géo localisé.
Après ça appel getPosition ici, on récupère la position, la latitude, la longitude, on récupère les coordonnées, coordonnées et après on récupère latitude, longitude, on peut même récupérer la précision et donc on renseigne latitude et longitude avec inner html et on connaîtra la précision également.

Je vous montre un peu ce que ça donne, sous FireFox comme je l’ai dit, le message, voulez-vous partager votre géolocalisation ? Vous pouvez, plus tard, ou partager, je clique sur partager, et en fait il s’avère qu’il y a un souci de géolocalisation ici sur mon poste, c’est bloqué, c’est pour ça que ça affiche chargement en cours tout le temps. Je vous montre sur un autre navigateur ce que ça donne, ici sur Google Chrome username, la géolocalisation, j’ai refusé d’être géo localisé donc ça affiche un message. Je peux l’autoriser ici, ok, donc voilà le code source pour si vous souhaitez ajouter une fonction de géolocalisation sur votre site internet tout est prêt à être utilisé.

Votre plan d’action !

Maintenant vous pouvez utiliser des fonctionnalités vraiment très sympas sur vos sites internet que ce soit en html 5, avec un peu de JavaScript, en CSS3, profitez-en, retrouvez le code source en téléchargement sous ce cours vidéo, si vous avez des questions, posez-les directement sous le cours vidéo, moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple CSS3 / HTML5 / JavaScript

Et voici le code source des exemples du cours.

Téléchargement du code source Transitions menu CSS3 et géolocalisation HTML5 / JavaScript

Cliquez ici pour télécharger le code source Transitions menu CSS3 et géolocalisation HTML5 / JavaScript

Montrez-moi vos menus CSS3 !

Utilisez les commentaires pour partager le code CSS3 de vos menus avec des transitions sympas.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>