Forum - En vrac ! - Image avec flip ( initié par Robin )
le 14/10/2017 @ 07:00
par JeanDenis
Administrateur
Bonjour,
Je reprends ici les messages postés par Robin sur la mini-messagerie.
Citation : « Robin »
Bonjour Jean-Denis,Je voudrais savoir où sont tes images du dossier img/imagettes, sachant que j'ai bien intégré la skin_transparence04 dans mon site https://espace63.fr.L'essai en question est flip2.Tu peux voir mon essai en bas de la page d'accueil.Merci d'avanceCordialement Robin
Citation : « Jean-Denis »
Bonsoir,Si tu veux tester l'effet avec flip sur les images du tutoriel il suffit de les télécharger une à une et de les mettre dans un dossier équivalent :img/Imagettessur ton siteRécupère les images ainsi :https://71site.fr/img/Imagettes/star.pnghttps://71site.fr/img/Imagettes/global.pnghttps://71site.fr/img/Imagettes/folder128.pnghttps://71site.fr/img/Imagettes/compose.pnghttps://71site.fr/img/Imagettes/document256.pngVoilà...Mais c'était juste pour montrer...Tu gagnerais à utiliser tes propres images ...Cordialement,
Citation : « Robin »
Bonsoir,j'ai fait l'essai en intégrant une image perso , tout est ok sur PC mais pas sur Mac.Y a t-ilune configuration à faire sur ce système d'exploitation ?Voir sur mon site https://espace63.fr en bas de la page d'accueil.Cordialement Robin
Bonjour Robin,
Il est possible que des fonctionnements imparfaits soient liés aux navigateurs.
Pour ma part, je n'utilise pas de matériel Apple et donc ne pourrait t'aider.
Reporte-toi au tutoriel :
https://www.71site.fr/articles.php?lng=fr&pg=102&mnuid=19&tconfig=0
dans lequel j'explique :
les préfixes -moz- -webkit- -o- -ms- devant ces règles sont destinés aux différents navigateurs, respectivement (Firefox, Chrome, Opera, Microsoft, j'en oublie sans doute...). Il est possible de se passer de ces préfixes avec le "risque" que l'effet escompté ne s'affiche pas sur tel ou tel navigateur...
Et donc, dans ton cas peut-être qu'il conviendrait de modifier (en ajoutant simplement aux "règles non reconnues" les préfixes -à toi de voir donc ce qui n'est pas reconnu-)
par exemple (et tu devras le faire pour tout le style "non reconnu" de cet effet) : modifier
#f1_card { width: 100%; height: 100%; transform-style: preserve-3d; transition: all 1.5s linear; }
en
#f1_card { width: 100%; height: 100%; -o-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -o-transition: all 1.5s linear; -moz-transition: all 1.5s linear; -webkit-transition: all 1.5s linear; -ms-transition: all 1.5s linear; transition: all 1.5s linear; }
ça allonge le code, mais cela le rend plus compatible...
PS : Pour alléger ton article, tu peux éventuellement mettre ce code ( en ôtant au début et à la fin les balises d'ouverture et de fermeture style type="text/css" et /style ) dans ton fichier styleplus accessible dans Config style.
Cordialement,
--------
le 14/10/2017 @ 15:33
par Robin
Bonjour Jean-Denis,
Tout d'abord je te remercie de consacrer du temps pour ce sujet. Sur le navigateur Safari d' Apple le texte est à l'envers et cela malgré le complément que tu as cité. Pour la suite ce n'est pas très gênant vu que la majorité des personnes de mon association consultent sur Windows et Firefox,
Cordialement
Robin
--------
le 14/10/2017 @ 18:45
par JeanDenis
Administrateur
Re,
Le préfixe spécifique pour le navigateur Safari est -webkit-
Essaie quand même, puisqu'il s'agit du texte (et donc des classes .face.back1 .face.back2 etc...)
de placer pour ces classes
.face.back1 { display: block; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); ... }
etc... en adaptant pour les 4 autres utilisations...
Cordialement,
--------
le 22/10/2017 @ 17:07
par Robin
Bonjour Jean-Denis,
je reviens sur l'application de survol sur Mac: j'ai suivi tes conseils mais en vain le résultat est le même : les écritures sont inversées et le retour sur l'image est instantané. Dommage car j'avais simplement besoin d'un seul survol: le logo ABC que j'ai inséré sur ma page d'accueil en essai, site https://www.espace63.fr.
Cordialement
Robin
--------
le 22/10/2017 @ 19:13
par JeanDenis
Administrateur
Bonsoir Robin,
J'en suis sincèrement désolé et je crains de ne pouvoir t'aider davantage :
Mes compétences sont limitées... et je n'ai aucun matériel Apple pour tester.
Il va probablement falloir que tu t'en passes...
Mais peut-être ce type d'animation peut-il te convenir :
https://www.71site.fr/articles.php?lng=fr&pg=182&mnuid=19&tconfig=0
( à condition bien sûr qu'il fonctionne sur Apple ! )
As-tu déjà visionné ce présent site avec un Mac ?
Cordialement,
--------
le 24/10/2017 @ 19:00
par Robin
Bonjour Jean-Denis,
Bonne nouvelle : les images avec Hover Effects fonctionnent très bien sur Mac et cela me conviendra parfaitement.
En attendant je souhaiterais réussir la démo indiquée dans ton site. Malgré quelques essais je n'ai pas réussi à obtenir de résultats , en effet je ne suis pas doué pour l'intégration des codes: j'ai fait l'essai en copiant dans le code source d'une boîte libre le code style commun en m'assurant de mettre à la fin. , puis à la suite j'ai copié le code du corps de l'article . Quant aux images je ne sais pas où les trouver (skin transparence...?ou téléchargement? ).
Je suis persuadé qu'il manque des codes à intégrer mais par quel chemin ? c'est la raison pour laquelle je fais appel à toi.
Cordialement
Robin
--------
le 25/10/2017 @ 07:48
par JeanDenis
Administrateur
Bonjour Robin,
Bon, eh bien il y a au moins quelque chose de ce site qui fonctionne avec Apple...
Pour les images, celles du tutoriel ne sont là évidemment que pour montrer le principe... Elles sont libres de droits et viennent de cette banque d'image : OpenClipArt800 ( Issu d'un site canadien, mais qui ne parait plus disponible sur le Net... )
Je te mets un lien vers les quelques images du tutoriel : https://www.71site.fr/file/images_pour_hover_effect.zip
Si tu veux les tester sans modifier trop le code d'intégration, et notamment au niveau des liens, mets-les dans le dossier img/images
Et teste le code fourni avec le tutoriel au moins pour le ou les effets souhaités :
¤ le style peut être dans styleplus : style commun et style des effets souhaités.
¤ Si tu mets le style dans l'article "encadre"-le avec les balises ci-dessous au début du code source et à la fin du style.
<style type="text/css"> ... </style>
Et reprends le code du corps de l'article pour placer les images choisies.
Pour l'instant, il n'y a rien dans ton article "essais survol", il est donc difficile de t'aider davantage... Mais il sera possible de simplifier le style et le code en fonction de ce que tu veux y placer.
Il faut tester et "t'amuser" avec...
Cordialement,
Rectifier message Clôturer sujet Remonter