• Genre onglets

    Survolez les images qui apparaissent

     

    Dans ce montage, le but va être de tester la façon de faire pour faire apparaître les pages latéralement, au clic sur un bouton.
    Ces pages sont des div, dans lesquelles nous pouvons placer des cadres texte, des images, des iframe, des liens...
    Le nombre de pages et donc de boutons est au choix.
    Le nombre des boutons et leur positionnement est également au choix.
    Au choix toujours, le sens d'arrivée des pages, latéralement ou verticalement.
    D'autres façons de les faire s'afficher est possible: opacité, rotation avec agrandissement, agrandissement à partir d'un point quelconque...

    Le cadre du montage est paramétré pour cacher ce qui en dépasse (overflow:hidden;)
    Les images peuvent être animées au survol mais pas au clic, qui provoquerait l'affichage de la première page.
    Comme je l'ai proposé dans un article "Pommerol", si vous souhaitez placer un élément animé au clic (vidéo Google, dans mon exemple), il vous faut la placer sur la première page.
    Il en est de même pour les liens mais je suppose que la page s'ouvrirait tout de même.
    Je n'ai laissé qu'une image dans les pages mais ... bon amusement !

     

     

     

    <div style="position: relative; width: 80vw; height: 90vh; border: 0.2vh solid grey; margin: 0vh auto; overflow: hidden;">
    <input id="page1" class="bout" type="text" value="1" /> <input id="page2" class="bout" type="text" value="2" /> <input id="page3" class="bout" type="text" value="3" /> <input id="page4" class="bout" type="text" value="4" />
    <p id="mmm0">&nbsp;</p>
    <div id="mmm1">
    <p id="para1">Votre texte en 1 ou plusieurs paragraphes</p>
    </div>
    <div id="mmm2">
    <p id="image1">&nbsp;</p>
    </div>
    <div id="mmm3">
    <p id="image2">&nbsp;</p>
    </div>
    <div id="mmm4">
    <p id="image3">&nbsp;</p>
    </div>
    </div>

    <style><!--
    .bout{position:absolute; z-index:20; width:3vw; height:3vh; border-radius:1vw; border:0.1vw solid black; box-shadow:0.2vw 0.2vh 0.2vh black; text-align:center; font-size:2em;}
    #page1{background: linear-gradient(to top, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%); transform:translate(76vw,5vh);}
    #page2{background: linear-gradient(to top, #33ff00 0%,#339900 100%); transform:translate(76vw,15vh);}
    #page3{background: linear-gradient(to top, #ff9900 0%,#ff3300 100%); transform:translate(76vw,25vh);}
    #page4{background: linear-gradient(to top, #cc9999 0%,#cc6633 100%); transform:translate(76vw,35vh);}

    #mmm0{position:absolute; z-index:10; width:5vw; height:90vh; background:rgba(0,0,0,0.3);transform:translate(75vw,0vh);}
    #mmm1{position:absolute; z-index:2; width:80vw; height:90vh; background: linear-gradient(to top, #f7fbfc 0%,#add9e4 100%); transform:translate(0vw,0vh);}
    #mmm2{position:absolute; z-index:3; width:80vw; height:90vh; background: linear-gradient(to top, #33ff00 0%,#337700 100%); transform:translate(-80vw,0vh); transition:all 2s linear;}
    #mmm3{position:absolute; z-index:3; width:80vw; height:90vh; background: linear-gradient(to top, #ff9900 0%,#ff3300 100%); transform:translate(80vw,0vh); transition:all 2s linear;}
    #mmm4{position:absolute; z-index:3; width:80vw; height:90vh; background: linear-gradient(to top, #cc9999 0%,#cc6633 100%); transform:translate(-80vw,0vh); transition:all 2s linear;}

    #page2:focus ~ #mmm2,#page3:focus ~ #mmm3,#page4:focus ~ #mmm4{ transform:translate(0vw,0vh);}
    #para1{position:absolute; width:40vw; height:auto; border:0.3vh ridge grey; background: linear-gradient(to right, #cccc00 0%,#99ff99 100%); box-shadow:0.2vw 0.2vw 0.2vw black; transform:translate(5vw,2vh); text-align:center; font-size:2.5vh; box-sizing:border-box; padding:2vw;}

    #image1{position:absolute; width:25vw; height:35vh; border:0.2vw solid white; box-shadow:0.2vw 0.2vw 0.2vw black;background:url('http://ekladata.com/JpZrOhukxlX9DKM--t18-otouMQ.jpg'); background-size:cover; transform:translate(12vw,15vh) rotate(5deg); transition:all 1s linear;}
    #image2{position:absolute; width:25vw; height:35vh; border:0.2vw solid white; box-shadow:0.2vw 0.2vw 0.2vw black; background:url('http://ekladata.com/YGXWNR4tDuWXf74F-IsybT6pnzE.jpg'); background-size:cover;transform:translate(17vw,15vh) rotate(-5deg); transition:all 1s linear;}
    #image3{position:absolute; width:25vw; height:35vh; border:0.2vw solid white; box-shadow:0.2vw 0.2vw 0.2vw black; background:url('http://ekladata.com/oCv4SbcNt9zRrdA73pshHuxmpuU.jpg'); background-size:cover;transform:translate(10vw,15vh) rotate(-5deg); transition:all 1s linear;}
    #image1:hover,#image2:hover,#image3:hover {z-index:2; width:80vw; height:90vh; transform:translate(0vw,0vh); border:none; box-shadow:0 0; border-radius:0%; filter:grayscale(0); webkit-filter:grayscale(0);}
    --></style>