En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Forum » En vrac ! » Image avec flip ( initié par Robin )
 
 
 
    Imprimer la page...
    Imprimer la section...

Forum - En vrac ! - Image avec flip ( initié par Robin )


Nombre de membres 52 membres
Connectés : ( personne )
Snif !!!
 


le 14/10/2017 @ 07:00
par JeanDenis

JeanDenis

Administrateur
115 messages

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'avance
Cordialement 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/Imagettes
sur ton site
Récupère les images ainsi :
http://71site.fr/img/Imagettes/star.png
http://71site.fr/img/Imagettes/global.png
http://71site.fr/img/Imagettes/folder128.png
http://71site.fr/img/Imagettes/compose.png
http://71site.fr/img/Imagettes/document256.png
Voilà...
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 :

http://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,  

Site web JeanDenis
sujet clos Haut  

Réponse n° 1
--------
le 14/10/2017 @ 15:33
par Robin

Robin

1 message

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

Site web Robin
clos par JeanDenis le 26/01/2018 @ 07:22 Haut  
Réponse n° 2
--------
le 14/10/2017 @ 18:45
par JeanDenis

JeanDenis

Administrateur
116 messages

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,

Site web JeanDenis
clos par JeanDenis le 26/01/2018 @ 07:22 Haut  
Réponse n° 3
--------
le 22/10/2017 @ 17:07
par Robin

Robin

2 messages

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

Site web Robin
clos par JeanDenis le 26/01/2018 @ 07:22 Haut  
Réponse n° 4
--------
le 22/10/2017 @ 19:13
par JeanDenis

JeanDenis

Administrateur
120 messages

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

Mais peut-être ce type d'animation peut-il te convenir :

http://www.71site.fr/articles.php?lng=fr&pg=182&mnuid=19&tconfig=0

( à condition bien sûr qu'il fonctionne sur Apple ! frown )

As-tu déjà visionné ce présent site avec un Mac ?

Cordialement,

Site web JeanDenis
clos par JeanDenis le 26/01/2018 @ 07:22 Haut  
Réponse n° 5
--------
le 24/10/2017 @ 19:00
par Robin

Robin

3 messages

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

Site web Robin
clos par JeanDenis le 26/01/2018 @ 07:22 Haut  
Réponse n° 6
--------
le 24/10/2017 @ 19:15
par Robin

Robin

4 messages

Re,

en complément: j'ai bien introduit au début du code de style commun:

Site web Robin
clos par JeanDenis le 26/01/2018 @ 07:22 Haut  
Réponse n° 7
--------
le 25/10/2017 @ 07:48
par JeanDenis

JeanDenis

Administrateur
122 messages

Bonjour Robin,

Bon, eh bien il y a au moins quelque chose de ce site  qui fonctionne avec Apple... eek

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...confused )

Je te mets un lien vers les quelques images du tutoriel : http://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...wink

Cordialement,

Site web JeanDenis
clos par JeanDenis le 26/01/2018 @ 07:22 Haut  
Réponse n° 8
--------
le 25/10/2017 @ 19:09
par Robin

Robin

5 messages

Bonsoir Jean-Denis,

Cette fois-ci c'est compris et concluant ! Il me reste à personnaliser sur mon site. Merci pour tes conseils et ta patience.

Cordialement

Site web Robin
clos par JeanDenis le 26/01/2018 @ 07:22 Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter  
Catégories de discussion  Forum