Animer une image via CSS ou JS

[just_real]

Bonjour à tous,

 

Y a t'il un magicien du web pour m'aider sur un petit projet d'animation histoire de rendre des images dynamiques.

 

J'aimerais via Prestashop (1.6) ajouter un effet au "survol" sur une image fixe. L'effet désiré est l'un des suivants :

 

http://ryun.github.io/HCaptions/

 

Les images concernées sont liées au module  /themeconfigurator/ , c'est celles entourées en rouge ci dessous :

 

 

 

Est ce possible ? 

 

Thank U all

Edited April 24, 2015 by just_real (see edit history)

[S-HAMMANI]

Bonjour;

 

voila un exemple de deux actions  d'animation (zoom)  à compléter avec un bout de code css à inserer au fichier hook.css du themeconfigurator :

/* Right hook CSS */
    #htmlcontent_top ul li {
      overflow: hidden;
    }
    #htmlcontent_top ul li:hover img {
              -webkit-transition: all  0.5s ease-in;
                 -moz-transition: all  0.5s ease-in;
                  -ms-transition: all  0.5s ease-in;
                   -o-transition: all  0.5s ease-in;
                      transition: all  0.5s ease-in; 
              
               -webkit-transform: scale(1.3,1.3);
                  -moz-transform: scale(1.3,1.3);
                   -ms-transform: scale(1.3,1.3);
                    -o-transform: scale(1.3,1.3);
                       transform: scale(1.3,1.3);      
      }  
/* Footer hook CSS */

Edited April 27, 2015 by S-HAMMANI (see edit history)

[just_real]

Bonjour S.HAMMANI,

 

Un grand merci pour ce message. J'ai effectivement réussi la semaine dernière via CSS en ajoutant un effet de remplacement d'image au survol,

 

Par contre, pour ceux que cela peux intéresser, pour que le remplacement d'image fonctionne, personnellement je n'ai pas téléchargé l'image via le module themeconfigurator , je l'ai tout simplement appelé via un code HTML depuis l'espace dédié (dans le module au point d'accroche "top") :

:<div id="mainwrapper"><div id="box-6" class="box">
        <img id="image-6" src="http://myboutik.alwaysdata.net/summer.jpg" width="381" height="219" alt="summer.jpg" /><span class="caption scale-caption">
    </span></div>
</div> 

Ensuite j'ai modifié le hook.css pour les animations (zoom défilement opacité etc)

Pour que l'autre image apparaisse au survol avec l'effet d'animation, j'ai ajouté une ligne background-image avec l'URL de l'image

 

Voici le code utilisé (à ajuster suivant formats) :

 

#mainwrapper .box .caption {
  background-image: url(http://myboutik.alwaysdata.net/orga.jpg);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 800ms ease-out;
-moz-transition: all 800ms ease-out;
-o-transition: all 800ms ease-out;
-ms-transition: all 800ms ease-out; 
transition: all 800ms ease-out;

  right: 16px;
}

/** Caption : Fade **/
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption  {
opacity: 0;
width: 381px;
height: 219px;
padding: 15px;
}

/** Fade Caption :hover Behaviour **/
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption  {
opacity: 1;
}

Et au final j'ai été obligé de modifier quelques lignes du global.css pour ajuster l'affichage des images selon les contenants et mettre tout en place etc..

 

Ensuite pour moi ça a fonctionné nickel, la seconde image apparaît bien au survol avec l'animation CSS choisie (zoom, défilement ou autres)

 

Merci et bonne journée.

[BoutikShop69]

Bonjour,

 

Quels sont les lignes à modifier dans le global.css, svp ?

 

Je cherche à créer un effet comme celui-ci sur les images produits : http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html

 

Ils fournissent un fichier style10.css, mais je ne vois pas comment le relier et ou l'intégrer dans prestashop pour obtenir ce résultat.

 

Je recherche également à créer un effet similaire au demo 1 ou 4 semblable à celui-ci : http://tympanus.net/Tutorials/CustomDropDownListStyling/index.html

 

Sur les listes déroulantes en page product-list et formulaire de contact ... Je pense qu'il faudrait passer par un effet jquery pour obtenir l'effet que je souhaite, et j'avais trouvé ceci : https://github.com/brianreavis/selectize.js, mais là encore comment faire l'intégration quand il ne s'agit pas d'intervenir dans des fichiers qui ne seraient pas dans un module mais éparpillé à différents endroits du thème, css à droite, tpl à gauche par exemple ? 

 

Je ne passe pas par le themeconfigurator pour créer le design du site, mais le travaille entièrement à la main. Dernier petit détail, mais qui peut avoir son importance : il n'y aura aucune colonne left ou right sur le site.

 

D'avance merci pour vos conseils.

 

Cordialement.

 

PS. Et de rester indulgent et ouvert quand la demande de personnalisation du thème permet de le sortir des standards basiques de presta. Le but étant d'avancer, et de faire avancer les autres en même temps que soi ...

Edited July 6, 2015 by shooping (see edit history)

[Raf-SNS]

Salut trop cool ton lien http://tympanus.net/...ts/index10.html, je garde !

-> pour les transition, je viens d'y jeter un oeuil je pense que c'est avec transform : scale(1);

pour le zoom et transition : all 0.7s ease-in-out; pour voir l'image zoomée sinon c'est immédiat et invisible

sinon il faut aussi intégrer un autre div dans la même fenètre pour y arriver, je pense que le div

est à intégrer sur le .tpl du module

Edited July 9, 2015 by Raf-SNS (see edit history)

[BoutikShop69]

Bonjour

 

Merci pour ta réponse. En ce moment je suis le nez dans les cartons car dans à peine 2 mois je déménage ....

 

Tu l'écrirais comment par rapport au fichier css fourni dans prestashop et à quel endroit exactement stp ?

 

Car je cherche toujours comment faire.

 

Cordialement.

[Raf-SNS]

Salut, une piste (mais à tester hein !)

dans le fichier header.tpl tu remplaces (tu ajoutes)

<div id="slider_row" class="row">

<div id="top_column" class="center_column col-xs-12 col-sm-12">{hook h="displayTopColumn"}</div>

</div>

par ta propre div après, en fait le mieux serait que tu configure le slider classique, que tu le désactives

puis dans ta propre div que tu ajoutes après celle ci tu lui appliques tes propres styles/liens etc

tu refais un slider perso avec des super styles ...

c'est du boulot, je le conçois ...

[BoutikShop69]

 

Salut, une piste (mais à tester hein !)

dans le fichier header.tpl tu remplaces (tu ajoutes)

<div id="slider_row" class="row">

<div id="top_column" class="center_column col-xs-12 col-sm-12">{hook h="displayTopColumn"}</div>

</div>

par ta propre div après, en fait le mieux serait que tu configure le slider classique, que tu le désactives

puis dans ta propre div que tu ajoutes après celle ci tu lui appliques tes propres styles/liens etc

tu refais un slider perso avec des super styles ...

c'est du boulot, je le conçois ...

 

 

Bonjour,

 

Qu'est-ce que le slider vient faire là-dedans ? C'est pas lui que je cherche à modifier :/

 

Merci de bien lire la question posée.

 

Cordialement.

Edited July 11, 2015 by shooping (see edit history)