Forum - En vrac ! - Images survol Flip
--------
le 06/10/2016 @ 18:16
par JeanDenis
Administrateur
Bonjour Stéphane,
Oui, c'est possible. Récupère le code ci-dessous, il fonctionne. Colle-le dans un article (attention la partie <style></style> est à mettre tout au début, tu places les div ensuite où tu le souhaites).
La vidéo issue de Youtube (que l'on retrouve dans un autre de mes tutoriels... C'était pour tester...) est au format 16/9 j'ai mis le format du "flip" à 640x360 pixels. J'ai préféré une rotation horizontale (rotateX)...
Mais tu peux adapter à ta guise. Relis les tutos du site pour voir comment cela fonctionne, Reviens ici si tu as un souci.
<style type="text/css">
#f1_container {
position: relative;
margin: 10px auto;
width: 640px;
height: 360px;
z-index: 1;
background: transparent;
border:1px solid #cccccc;
border-radius:0px;
}
#f1_container {
perspective: 500px;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateX(180deg);
border-radius: 0px;
box-shadow: 5px -5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateX(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #000000;
-khtml-opacity:1;
opacity:1;
border-radius:0px;
}
</style>
<div style="display: inline-block;">
<div id="f1_container">
<div id="f1_card">
<div class="front face" style="background:#C0C0C0; text-align:center;">
<p><span style="font-size:14px;">Voilà de la place pour afficher un autre contenu.</span></p>
<p><span style="font-size:14px;">du texte, un lien, une image et même une vidéo en survolant ce cadre...</span></p>
</div>
<div class="back face center"><iframe allowfullscreen="" frameborder="0" height="100%" mozallowfullscreen="" src="https://www.youtube.com/embed/hWHVIaIWz_Q?rel=0" webkitallowfullscreen="" width="100%"></iframe></div>
</div>
</div>
</div>
Cordialement,
--------
le 06/10/2016 @ 19:32
par ptitstrucs
Bonsoir Jean-Denis et Merci,
Votre code fonctionne...
Pour info ( pour vimeo ) il faut comme url (https://player.vimeo.com/video/183636389) sinon ça ne fonctionne pas.
Mon problème:
En mode source on peut modifier texte ect...
Mais en mode normal je ne peux écrire du texte ou autre, car "Flip" reste animé..!?
Faut-il tout modifier texte, images etc...en mode source ? ( j'ai pas trouver sur vos Tutos ) à moins que j'ai mal lu
En vous remerciant
Cordialement
Stéphane
Merci de votre aide.
--------
le 06/10/2016 @ 22:00
par JeanDenis
Administrateur
Re,
Merci pour l'information pour Vimeo.
en mode normal je ne peux écrire du texte ou autre, car "Flip" reste animé
Eh oui ! Dans les tutos, c'est l'image qui est en front face et le texte en back face... et donc comme tu survoles le cadre, tu peux travailler le texte back face qui s'affiche, directement dans l'éditeur de GuppY.
Mais toi, tu voulais du texte en front face, il te faut donc le travailler en mode source... Pas d'autres solutions !
Ou alors inverse font face et back face , mais cela n'a pas beaucoup de sens de mettre la vidéo en front face et qu'elle se "retourne" quand on la survole ! Car alors... Comment la démarrer ?
Cordialement,
--------
le 07/10/2016 @ 10:07
par ptitstrucs
Bonjour Jean-Denis et Merci encore,
Pour moi aucun soucis pour modifier en code source...
J'avoue que c'est un bon script..! ( Flip ) Bravo.
Cordialement
Stéphane
ps: si vous voulez voir votre script en action ( cela se trouve dans le menu linéaire "hits" ).
Merci de votre aide.
Rectifié par ptitstrucs le 07/10/2016 @ 10:54
--------
le 07/10/2016 @ 13:36
par JeanDenis
Administrateur
Bonjour Stéphane,
si vous voulez voir votre script en action ( cela se trouve dans le menu linéaire "hits" )
Esthétique et efficace ! ... Ravi d'avoir pu t'aider...
Une suggestion supplémentaire : dans les menus linéaires de Guppy, il y a en natif des délais d'affichage et de camouflage du panneau qui ne s'accordent pas bien avec les délais des images flips (avance à l'affichage et retard au camouflage). J'ai modifié sur ce site dans le panneau où s'affiche les "flips" ces délais (tu peux les voir en affichant le styleplus.css de ce site).
Pour faire la même chose sur ton site, tu peux ajouter ceci dans ton styleplus.css :
.DDL461 ul.dropdown-linear li.T1:hover > ul, .DDL461 ul.dropdown-linear li.T2:hover > ul, .DDL461 ul.dropdown-linear li.T3:hover > ul { /* réglage pour délai affichage -images au survol- */
transition-property : visibility;
transition-delay : 0ms;
visibility: visible;
}
.DDL461 ul.dropdown-linear li.T1 > ul, .DDL461 ul.dropdown-linear li.T2 > ul, .DDL461 ul.dropdown-linear li.T3 > ul { /* réglage pour délai camouflage -images au survol- */
transition-property : visibility;
transition-delay : 1000ms;
visibility: hidden;
}
Évidemment, si cela ne te convient pas... tu supprimes !
Cordialement,
Rectifié par JeanDenis le 07/10/2016 @ 13:51
--------
le 07/10/2016 @ 14:50
par ptitstrucs
Re-Bonjour Jean-Denis,
Merci du tuyau..,
Par contre les scripts à effet sur les images ( transition & simple ), dommages qu'on ne peut pas incorporer le script dans la galerie photos de Guppy..!
J'aurais trouver assez sympas de voir les vignettes avec ses effets.
Merci encore
Cordialement
Stéphane
Merci de votre aide.
--------
le 07/10/2016 @ 18:29
par JeanDenis
Administrateur
Re,
Par contre les scripts à effet sur les images ( transition & simple ), dommages qu'on ne peut pas incorporer le script dans la galerie photos de Guppy..!
J'aurais trouver assez sympas de voir les vignettes avec ses effets.
Sans doute... mais cela supposerait de créer deux miniatures pour chaque photo... et de réécrire le code associé de GuppY... Cela n'est ni de mon ressort, ni de mes compétences...
Cordialement,
Rectifier message Clôturer sujet Remonter