Systeme afficher cacher

re gg
Javascript

Bonjour,
je voudrais essayer de faire un systeme qui permet d'afficher une div et de cacher l'autre avec un effet de glissement. Struture html

<div class="scroller">
          <div class="StaffLogo TopAnimation">
          <img src="lien image" height="192px" width="192px">
          <div class="masque masque">
            <h2>test</h2>
          </div>
          </div>
       </div>

Celle qui s'apelle masque. A en css

  • display : none;
  • visibility : hidden;

Je voudrais donc afficher la div masque et caché l'image

9 réponses

SLK
Réponse acceptée

Je me suis amusé à le faire.
C'est vrai que c'est pas évident si on ne s'y connait pas trop...
En plus j'avais dis de ne pas utiliser visibility mais je n'avais pas pensé au bouton au 2ème plan, sur lequel il faut pouvoir cliquer...

C'est rigolo comme effet, je met un exemple ici :

HTML :

<div class="super-effet">
    <div class="plan plan1"></div>
    <div class="plan plan2">
        <h1>Super</h1>
        <p>Effet CSS</p>
        <a href="#">Voir</a>
    </div>
    <div class="plan plan3"></div>
</div>

CSS : 

.super-effet,
.plan {
    width: 200px;
    height: 200px;
}
.super-effet {
    position: relative;
    overflow: hidden;
}
.plan {
    position: absolute;
    width: 200px;
    height: 200px;
}

.plan1 {
    z-index: 1;
    background-image: url(http://lorempicsum.com/up/200/200/5);
}

.plan2 {
    z-index: 2;
    background-color: hsla(0,0,0,0);
    opacity: 1;
    transform: scale(0);
    transition: transform .4s;
    font-size: 1.5em;
    text-align: center;
}
.plan2 h1 {
    width: 80%;
    margin: 0 auto;
    border-bottom: 1px solid black;
    padding-bottom: 20px;
    margin-top: 20px;
}
.plan2 p {
    margin-top: 20px;
}
.plan2 a {
    display: inline-block;
    margin-top: 30px;
    padding: 7px 10px;
    background-color: black;
    color: white;
    text-decoration: none;
}

.plan3 {
    z-index: 3;
    background-image: url(http://lorempicsum.com/futurama/200/200/6);
    opacity: 1;
    transform: scale(1);
    transition: transform .4s 0s, opacity .4s 0s, visibility .4s 0s;
}

.super-effet:hover .plan2{
    transform: scale(1);
}

.super-effet:hover .plan3 {
    transform: scale(3);
    opacity: 0;
    visibility: hidden;
    transition: transform .4s 0s, opacity .4s 0s, visibility .4s 0s;
}

Je pensais qu'il fallait mettre les prefixers "-moz-" et "-webkit-", mais j'ai essayé sur FireFox, Chrome, et Opera et ça fonctionne bien sans.

re gg
Auteur

Exemple :
Je voudrais faire un effet jore comme sa :

SLK

Salut,

À première vue,
dans l'exemple que tu montres, il y a 3 éléments, tous confondus, et chacun sur un z-index différent.

Au survol de la souri :

  • le 1er plan semble avoir une transition à la fois sur zoom, et opacity.
  • le 2nd plan semble avoir une transition sur zoom. Son background est en opacity: 0 pour voir le 3ème plan.
  • le 3ème plan ne fait rien.

Si on peut le faire en passant par du javaScript, ça me semble être une mauvaise façon de faire.
C'est le genre de chose qu'on fait directement en pur CSS, avec :

  • :hover
  • position
  • z-index
  • opacity
  • zoom
  • transition

Ne te sers ni de display, ni de visibility pour faire ça.
display n'est clairement pas ce que tu recherches, et c'est avec opacity que tu vas faire le boulot que tu voulais faire avec hidden

betaWeb

Salut,

Nul beosin de JS pour faire ce genre d'effet, du CSS (simple) suffit amplement.

re gg
Auteur

Qui pourais m'aider à le faire car je ne suis débutant dans l'animation en CSS

betaWeb

Le net regorge de ressources, surtout pour ce genre d'effets. Je t'invite donc à effectuer quelques recherches, je suis sûr que tu trouvera rapidement par toi-même ;)

re gg
Auteur

Je tient à te remercie énormément pour ce boulot formidable !

betaWeb

Ce n'est pas en te faisant faire ton code que tu pourras apprendre ...

re gg
Auteur

Oui sauf que je vais le refaire avec le nom de mes div et comprendre comment sa fonctionne. Je suis pas du style à faire du C/C