Forum - En vrac ! - Images avec flip
le 08/03/2017 @ 18:39
par stephane
--------
le 09/03/2017 @ 05:37
par JeanDenis
Administrateur
--------
le 19/03/2017 @ 10:07
par JeanDenis
Administrateur
Bonjour Stéphane,
J'ai essayé de trouver une solution à ton petit défi...
Fais par précaution une copie de sauvegarde du code source de ta boite FB400 et essaie ceci :
Tu mets en commentaire ou tu supprimes cette partie du style :
#f1_container:hover #f1_card {
transform: rotateZ(360deg);
border-radius: 30px;
box-shadow: 5px 5px 5px transparent;
}
puis dans le code un peu plus bas tu remplaces
<div class="front face">
<a href="https://ptitstrucs.fr" target="_self">
<img alt="logo.png" src="img/mes_images/logo.png" style="border-width: 0px; border-style: solid; width: 490px; height: 276px;" />
</a>
</div>
par
<div class="front face">
<a href="https://ptitstrucs.fr" target="_self">
<img onload="javascript: getElementById('f1_card').style.transform='rotateZ(360deg)';return false;" alt="logo.png" src="img/mes_images/logo.png" style="border-width: 0px; border-style: solid; width: 490px; height: 276px;" />
</a>
</div>
Tu peux d'ailleurs supprimer de toutes façons ce qui est au dessous et qui est inutile :
<div class="back1 face center">/* inutile ici evidemment */</div>
J'ai testé en local dans un article, cela fonctionne, mais...
Si cela ne te convient pas, tu reviens en arrière, bien sûr...
Fais-moi un retour quand même.
Cordialement,
--------
le 20/03/2017 @ 07:57
par stephane
--------
le 20/03/2017 @ 18:37
par JeanDenis
Administrateur
Bonsoir Stéphane,
Il y a un moyen finalement très simple de prévoir un délai avant la rotation automatique, essaie-le tu verras bien, en variant le temps, ce qui rend l'animation la plus fluide possible.
Dans le style de ta boite FB400, tu as :
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.5s linear;
transition-delay: 3s;
}
ajoute ce que j'ai mis en vert... fais varier à ta guise le délai en secondes pour voir ce qui te convient le mieux
Tu supprimes cette ligne, évidemment, si elle t'est inutile !
Cordialement,
--------
le 21/03/2017 @ 08:16
par stephane
Bonjour, Jean-Denis
Merci pour tout ce travail...
Je l'ai régler à 4s, je trouve que la rotation est pareil, seulement il faut prendre en compte que sur la page d'accueil, il y a des vidéos et des scripts, ce qui ralenti la page.
Mais dans l'ensemble le rendu est pas mal.
Qu'en pensez-vous ?
Cordialement
Stéphane
--------
le 21/03/2017 @ 11:50
par JeanDenis
Administrateur
Bonjour Stéphane,
Eh bien, il est vrai que ta page est assez longue à charger et que la rotation automatique n'est pas très fluide... hélas...
Ceci dit, en local également, la rotation automatique (déclanchée par javascript) est moins fluide que lors du survol... J'ignore pourquoi...
Mais si une des possibilités offerte avec cet effet, automatique ou pas, avec ou sans delai... te convient... Adopte-la ! C'était de toutes façons amusant pour moi de chercher...
Cordialement,
--------
le 21/03/2017 @ 16:29
par JeanDenis
Administrateur
Re,
De rien...
Et tiens, puisque tu es intéressé par les courts-métrages, voici deux liens vers des très modestes petits films en stop-motion réalisés par mes élèves de CM (en primaire) il y a quelques années et l'an dernier...
https://youtu.be/m1vxVhvkHtM
https://youtu.be/QkV2WQUfdfs
Cordialement,
Jean-Denis
Rectifier message Clôturer sujet Remonter