Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

Rejoignez le forum, c’est rapide et facile

Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.
Communauté francophone - Jimdo
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le deal à ne pas rater :
TCL C74 Series 55C743 – TV 55” 4K QLED 144 Hz Google TV (Via ODR ...
499 €
Voir le deal

transition rollover

3 participants

Aller en bas

transition rollover Empty transition rollover

Message par studuo Jeu 11 Fév 2016 - 13:47

Bonjour,

je cherche comment gérer la transition d'un rollover .
Savez-vous si il existe un code à intégrer pour gérer cet effet ?*

Merci

studuo

Messages : 14
Date d'inscription : 08/02/2016

http://studuo.jimdo.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par FredVig Jeu 11 Fév 2016 - 16:13

Vous avez quelques tutos dans l'aide "avancée" qui utilisent ces fonctions.
Ce sont les propriétés transition, delay et transform qu'il faut étudier .
il n'existe pas "un code" général, mais un contexte spécifique, qui va exiger une série de codes spécifiques.
Exemple décrit sur mon site

FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par studuo Jeu 11 Fév 2016 - 16:20

Merci beaucoup pour le lien,
en fait il s'agirait simplement de créer un fondu entre les 2 images, afin que le rollover ne soit pas trop brut.

Donc il n'existe pas de code a intégrer dans la section widget/html ?

studuo

Messages : 14
Date d'inscription : 08/02/2016

http://studuo.jimdo.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par FredVig Jeu 11 Fév 2016 - 16:25

Sans doute!  Mais ça dépend de vos éléments, de leur contexte, de l'effet que vous souhaiter réaliser. allez voir dans les rollover proposé par l'aide, vous avez tout cela très bien décrit :
http://aide.jimdo.com/aller-plus-loin-avec-jimdo/effets-de-rollover/
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par studuo Jeu 11 Fév 2016 - 16:27

Très bien je vais aller voir ça de plus près

merci beaucoup

studuo

Messages : 14
Date d'inscription : 08/02/2016

http://studuo.jimdo.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par FredVig Jeu 11 Fév 2016 - 16:28

Vous avez les codes (par exemple pour le rollover agrandissement). La progressivité est obtenue par :
Code:
<style type="text/css">

img[alt="gros"] {
transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
}

img[alt="gros"]:hover {
transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -o-transform: scale(1.05);      
}

</style>
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par FredVig Jeu 11 Fév 2016 - 16:31

L'aide Jimdo propose d'utiliser un sélecteur un peu particulier qui utilise la balise "alt" des images. mais rien n'oblige à utiliser cette méthode. Elle est utile surtout si vous avez plusieurs types de transitions sur votre site, avec plusieurs séries d'images avec des rollovers différents.
Vous pouvez cibler avec l'identifiant unique.

Mais je le répète, le contexte est capital.
Si vous voulez appliquer une transition sur un effet obtenu avec du javascript (ce qui est proposé il me semble dans les tutos de Jimdo) il n'est pas certain que l'on puisse appliquer une transition avec du CSS, mais seulement avec du javascript.


Dernière édition par FredVig le Jeu 11 Fév 2016 - 16:34, édité 1 fois (Raison : a)
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par FredVig Jeu 11 Fév 2016 - 16:54

Sur votre page portfolio, vous avez des images qui s'échangent au survol (deux images identiques, couleur et NB), avec du javascript.
C'est un effet que vous obtiendrez aussi avec du CSS, et vous pourrez appliquer le code de transition-delay en css également.
le tuto de jimdo est ici :
http://aide.jimdo.com/aller-plus-loin-avec-jimdo/effets-de-rollover/effet-noir-blanc/
(Je m'aperçois en passant qu'il y a un bugg dans cette démo de Jimdo elle fonctionne mal sur firefox EDIT : corrigé par l'équipe, une Màj de firefox avait bloqué la propriété grayscale)
Si vous suivez le tuto sus-nommé, ajoutez plutôt ce code :
Code:
img[alt="gris"] {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-o-filter: grayscale(100%);

-ms-filter: grayscale(100%);

opacity: 0.8;

transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
}

 img[alt="gris"]:hover {

filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-o-filter: grayscale(0%);

-ms-filter: grayscale(0%);

opacity: 1;

transform: all(1.05);
        -webkit-transform: all(1.05);
        -moz-transform: all(1.05);
        -o-transform: all(1.05);      
}

et vous aurez la transition "douce"


Dernière édition par FredVig le Ven 12 Fév 2016 - 16:40, édité 1 fois
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par studuo Jeu 11 Fév 2016 - 17:55

Je crois avoir réussi, est-il possible d'inverser l'effet ?
image couleur normal et noir et blanc actif ?

Merci beaucoup

studuo

Messages : 14
Date d'inscription : 08/02/2016

http://studuo.jimdo.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par studuo Jeu 11 Fév 2016 - 19:23

J'aurais encore une petite question,

j'aimerais combiner deux effet sur une image,
l'effet arrondi trouvé sur votre lien ( encore merci !!!)
et afficher un texte au survol de la souris au milieu de cette image en plus

est-ce possible d'après vous ?


studuo

Messages : 14
Date d'inscription : 08/02/2016

http://studuo.jimdo.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par FredVig Jeu 11 Fév 2016 - 20:29

Les deux choses sont sans doute possibles, il n'y a pas de raison.
Pour la couleur passant au noir il suffit d'inverser les valeurs dans les accolades
Pour combiner des effets, je pense qu'il faut indiquer entre les m^me accolades les 2 variantes de propriétés, et bien vérifier que "transition" est sur "all" :        
-webkit-transition: all .2s ease-in-out;
En passant… il est possible de définir un temps de transition différent pour chaque effet.
Sur ma description, vous avez des exemples (réalisés par Alesio Atzeni) qui appliquent cette mesure afin d'avoir une succession d'effets.
il rajoute une valeur en :hover :       transition-delay: 0.4s;


Dernière édition par FredVig le Jeu 11 Fév 2016 - 20:36, édité 1 fois (Raison : orthographe)
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par studuo Jeu 11 Fév 2016 - 21:57

Oui je vois,
mais je ne retrouve pas les propriétés correspondant a l'affichage du texte dans le code indiqué
sur votre premier lien par exemple.

Merci pour le délais c'est exactement ce que je voulais

studuo

Messages : 14
Date d'inscription : 08/02/2016

http://studuo.jimdo.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par FredVig Ven 12 Fév 2016 - 16:44

Le texte des images - liens en rollover est obtenu en construisant le tout en html, dans un module html :
Code:
Créer un widget html contenant deux div imbriquées et du texte :
 
 <div class="view view-fifth"><img src="https://… " alt="" /><div class="mask"> <h2>(Titre de l'image)</h2><p>Indication de vos sources</p><a href="http://…" class="info">Lisez plus</a></div</div>
 
Répéter l'opération autant de fois que d'images désirées.

C'est une construction différente de celle que propose Jimdo dans son aide.
Ils essayent d'utiliser au maximum les modules de base, de façon à ce que ce soit simple, mais aussi (à mon avis) que cela reste le plus stable dans le temps, puisque les modifications du builder tiennent davantage compte des modules jimdo, que des éléments rajoutés en widget.
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par FredVig Ven 12 Fév 2016 - 16:49

Mais pour afficher un texte au survol de l'image, je vous conseille la méthode en module html, ça demande de savoir coder un peu quand même…
FredVig
FredVig

Messages : 2392
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par studuo Ven 12 Fév 2016 - 17:42

Oui merci beaucoup, mes connaissances sont trè limitées, je vais chercher le plus simple

studuo

Messages : 14
Date d'inscription : 08/02/2016

http://studuo.jimdo.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par Solie Ven 12 Fév 2016 - 18:09

N'hésitez pas à lire ce topic.
http://www.jimdoforum.fr/t961-demande-aide-comment-mettre-du-texte-et-des-boutons-sur-une-image-comme-sur-le-site-de-jimdo-fr

Vous y trouverez peut-être certains éléments de réponse Wink
Solie
Solie

Messages : 514
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par studuo Ven 12 Fév 2016 - 18:37

Merci beaucoup,
j'ai vraiment essayé beaucoup de code sans réussite lol

studuo

Messages : 14
Date d'inscription : 08/02/2016

http://studuo.jimdo.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par studuo Ven 12 Fév 2016 - 20:27

Je pense faire un rollover avec le texte inclus directement sur l'image, est-ce qu'il y a une methode plus simple si je veux juste conserver le fondu ?

Merci d'avance

studuo

Messages : 14
Date d'inscription : 08/02/2016

http://studuo.jimdo.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par Solie Lun 21 Mar 2016 - 2:37

FredVig a écrit:
Le tuto de jimdo est ici :
http://aide.jimdo.com/aller-plus-loin-avec-jimdo/effets-de-rollover/effet-noir-blanc/
(Je m'aperçois en passant qu'il y a un bugg dans cette démo de Jimdo elle fonctionne mal sur firefox.
EDIT : corrigé par l'équipe, une Màj de firefox avait bloqué la propriété grayscale)
Si vous suivez le tuto sus-nommé, ajoutez plutôt ce code :
Code:
img[alt="gris"] {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-o-filter: grayscale(100%);

-ms-filter: grayscale(100%);

opacity: 0.8;

transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
}

 img[alt="gris"]:hover {

filter: grayscale(0%);

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-o-filter: grayscale(0%);

-ms-filter: grayscale(0%);

opacity: 1;

transform: all(1.05);
        -webkit-transform: all(1.05);
        -moz-transform: all(1.05);
        -o-transform: all(1.05);      
}
et vous aurez la transition "douce"

Cool, je me souviens avoir viré cet effet noir & blanc qui ne fonctionnait pas. Je vais tester le code de Jimdo une nouvelle fois, alors ! Merci pour cette info FredVig Very Happy
Solie
Solie

Messages : 514
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

transition rollover Empty Re: transition rollover

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum