guppy.71site.fr - Forum - En vrac !

Sujet n° 26

le 08/03/2017 @ 18:39
par stephane

Bonsoir, Jean-Denis

Je me suis amuser à faire une bannière avec les images flip et j'ai choisi ( rotation ).

Pensez-vous qu'on peut adapter la rotation automatique à chaque rechargement de page ?

Je pense que cela pourrait-être sympas...

En vous remerciant par avance
Cordialement

Stéphane

Réponse n° 1
--------
le 09/03/2017 @ 05:37
par JeanDenis

Administrateur
49 messages

Bonjour Stéphane,

Cela pourrait être intéressant à mettre en place, pourquoi pas...

Mais je crains qu'il faille utiliser autre chose que le "simple" CSS.

Je regarderai si je peux le faire. Je ne te promets rien, bien entendu.

Cordialement,

Réponse n° 2
--------
le 09/03/2017 @ 10:18
par stephane

Bonjour, Jean-Denis

Merci, mais c'était juste une idée comme ça ...

Cordialement
Stéphane

Réponse n° 3
--------
le 19/03/2017 @ 10:07
par JeanDenis

Administrateur
62 messages

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 :

Code : css

#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

Code : php

<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

Code : php

<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 :

Code : php

<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,

Réponse n° 4
--------
le 20/03/2017 @ 07:57
par stephane

Bonjour, Jean-Denis

Voilà j'ai placée la boîte (essai logo),Moi je trouve que cela fonctionne, bon ça accroche un peu car il y a des vidéos en page d'accueil; mais c'est plutôt pas mal..

J'adopte !

Merci encore de vos dévouements.

Cordialement
Stéphane

Réponse n° 5
--------
le 20/03/2017 @ 08:25
par JeanDenis

Administrateur
65 messages

Bonjour Stéphane,

Je chercherai encore. Il doit y avoir un moyen de temporiser l'effet... (le démarrer après un certain délai...) Ce devrait être plus fluide... (Enfin j'espère !)

Cordialement,

Réponse n° 6
--------
le 20/03/2017 @ 18:37
par JeanDenis

Administrateur
67 messages

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,

Réponse n° 7
--------
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

Réponse n° 8
--------
le 21/03/2017 @ 11:50
par JeanDenis

Administrateur
69 messages

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,

Réponse n° 9
--------
le 21/03/2017 @ 14:45
par stephane

Re,

J'ai remis le survol....il fonctionne bien.

En tout cas c'était intéressant d'essayer.

Merci encore.

Cordialement
Stéphane

Réponse n° 10
--------
le 21/03/2017 @ 16:29
par JeanDenis

Administrateur
70 messages

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

Réponse n° 11
--------
le 21/03/2017 @ 19:03
par stephane

Bonsoir, Jean-Denis

Les vidéos sont : menu linéaire (courts-métrages visiteurs ).

Si vous avez encore des vidéos, dans ma boîte Contact, il faut cocher ( ajouter une vidéo ) au cas ou, et je les mettrai volontiers.

Cordialement
Stéphane