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 ! » Images survol Flip
 
 
 
    Imprimer la page...
    Imprimer la section...

Forum - En vrac ! - Images survol Flip


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

clos par JeanDenis le 19/10/2016 @ 10:44  Sujet n° 15

le 06/10/2016 @ 17:11
par ptitstrucs

ptitstrucs

1 message

Bonjour Jean-Denis,

Je voudrais savoir si dans le script  d'une image au survol ont peut intégrer une vidéos?

Ce que je voudrais c'est:

Un côté écriture et de l'autre la vidéo

En vous remerciant par avance

Cordialement
Stéphane

Merci de votre aide.

Site web ptitstrucs
sujet clos Haut  

Réponse n° 1
--------
le 06/10/2016 @ 18:16
par JeanDenis

JeanDenis

Administrateur
24 messages

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.

 
Code : php
<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,

Site web JeanDenis
clos par JeanDenis le 19/10/2016 @ 10:44 Haut  
Réponse n° 2
--------
le 06/10/2016 @ 19:32
par ptitstrucs

ptitstrucs

2 messages

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 n

En vous remerciant

Cordialement
Stéphane

Merci de votre aide.

Site web ptitstrucs
clos par JeanDenis le 19/10/2016 @ 10:44 Haut  
Réponse n° 3
--------
le 06/10/2016 @ 22:00
par JeanDenis

JeanDenis

Administrateur
25 messages

Re,

Merci pour l'information pour Vimeo.
 

Citation : ptitstrucs

en mode normal je ne peux écrire du texte ou autre, car "Flip" reste animé

 
Eh oui ! s 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 ! k

Ou alors inverse font face et back face tongue, 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 ? k

Cordialement,


Site web JeanDenis
clos par JeanDenis le 19/10/2016 @ 10:44 Haut  
Réponse n° 4
--------
le 07/10/2016 @ 10:07
par ptitstrucs

ptitstrucs

3 messages

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
Site web ptitstrucs
clos par JeanDenis le 19/10/2016 @ 10:44 Haut  
Réponse n° 5
--------
le 07/10/2016 @ 13:36
par JeanDenis

JeanDenis

Administrateur
26 messages

Bonjour Stéphane,
 

Citation : ptitstrucs

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

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 :

 

Code : 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 ! k


Cordialement,



Rectifié par JeanDenis le 07/10/2016 @ 13:51
Site web JeanDenis
clos par JeanDenis le 19/10/2016 @ 10:44 Haut  
Réponse n° 6
--------
le 07/10/2016 @ 14:50
par ptitstrucs

ptitstrucs

4 messages

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.

Site web ptitstrucs
clos par JeanDenis le 19/10/2016 @ 10:44 Haut  
Réponse n° 7
--------
le 07/10/2016 @ 18:29
par JeanDenis

JeanDenis

Administrateur
27 messages

Re,
 
Citation : ptitstrucs

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,

Site web JeanDenis
clos par JeanDenis le 19/10/2016 @ 10:44 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