Le but est d'obtenir un rendu artistique en déplaçant les background-image au hover
Je recherche encore les bons réglages pour les déplacements afin d'avoir un bon rendu.
Exploration de la propriété CSS Clip-path
Cette pastille humoristique est là pour souligner le fait que je n'utilise aucune librairie.
Vous l'aurez compris elle est notamment réalisée sans Bootstrap
On utilise un affichage en display:grid; avec une rotaion de 45°
Grâce aux pseudos classes ::before et ::after,on inverse la rotation des background-image.
Je vous laisse découvrir les effets de hover.
Les images utilisent la propriété CSS persperctive et les transformations
Un script JS permet de faire varier la perspective au hover selon le déplacement de la souris
L'image de fond ne défile pas en même temps que le bloc.
Pour Cela la position du background-image est en fixed
L'effet diagonale du bloc est obtenu grace à une transformation de type SkewY.
Mais firefox ne semble pas gérer le background-image:fixed et le SkewY ensembles.
Si vous voulez profiter pleinement de l'effet, je vous déconseille d'utiliser firefox.
Les requêtes AJAX permettent d'obtenir des informations de 3 API différentes
D'abord la carte grâce l'API leaflet.
Ensuite, lorsqu'on clique sur la carte qu'on vient de générer, la météo grâce à l'API prevision-meteo.ch.
Enfin on fait du geocoding reverse grâce à l'API openCage pour obtenir un nom de ville.
Le tout est mis en forme grace aux Flexbox
selectionnez votre ville en cliquant sur la map
Choisir une ville pour afficher la météo
Choisir une ville pour afficher la météo
Choisir une ville pour afficher la météo
Choisir une ville pour afficher la météo
Choisir une ville pour afficher la météo
Le personnage est sous forme de sprites pour simuler son déplacement.
Tous les décors sont sous forme d'animations CSS.
Diplômé RNCP webmaster / webdesigner mention très bien en 2017, puis Développeur Web et Web Mobile en 2022.
Ce site est une vitrine pour montrer mes idées et mes réalisations sous forme d'un portfolio de composants avec fichier SASS individuel.
Ces composants utilisent bien-sûr HTML/CSS (Sass), mais aussi du JS (vanilla, angular) et du PHP (POO), sans aucune librairie externe (sauf mention contraire).
Veuillez noter que ce site est encore en construction, il est aussi en perpetuelle évolution au gré de mes envies et de ma curiosité.
