• Principe plein écran

    Je sais que certain(e)s sont plus intéressé(e)s par des codes complets que par des explications sur mes bricolages mais, peut-être pour moi-même avant tout, voici quelques explications sur ce ue je crois avoir compris.

    Le positionnement d'un élément, peut se faire par:

    - soit par left:0; top:0; dont la référence est l'angle gauche-haut de votre écran.

    - soit par transform:translate(Hvw,Vvw); dont la référence est l'angle gauche-haut du cadre contenant.

    *****

    L'utilisation de left/top est plus simple dans le cas de l'ouverture de l'élément au clic maintenu sur un autre élément; l'élément animé s'ouvrira toujours à partir de l'angle gauche-haut de l'écran de lecture.

    Par contre, le positionnement de l'élément sur lequel on clique est difficile par ce positionnement car il faut tenir compte de la structure de la page et de la position du cadre contenant dans cette page.

    *****

     

    L'élément cliqué sera positionné par transform-translate(Avw,Bvw); dans le cadre que vous aurez positionné dans votre page et commandera l'élément qui s'agrandit en plein écran, à partir de l'angle gauche-haut de l'écran de lecture.

    *****

    Si nous souhaitons que l'élément cliqué soit animé directement, il le sera à partir de l'angle gauche-haut de son cadre contenant; si celui-ci est positionné, par exemple, à 10vw du bord gauche de la zone article et 5 vw de son bord haut, il faudra en tenir compte à l'agrandissement et compenser ce décalage.

    Voyons un exemple: Clic maintenu. avec toujours un appui sur touche clavier F11 (Mac:bouton vert) pour escamoter les barres hautes.

     

     

     

     

     

     

    <div style="width: 60vw; height: 24vw; margin: 1vh 0 0 10vw;">
    <p id="z1" class="pe">&nbsp;</p>
    <p id="z2" class="pe">&nbsp;</p>
    <p id="z3" class="pe">&nbsp;</p>
    <p id="z4" class="pe">&nbsp;</p>
    <p id="z5" class="pe">&nbsp;</p>
    <p id="z6" class="pe">&nbsp;</p>
    </div>
    <style><!--
    .pe{position:absolute; z-index:1; width:16vw; height:9vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black;transition:all 1s linear;}
    #z1{box-sizing:border-box; background:red; transform:translate(3vw,0vw); }
    #z2{box-sizing:border-box; background:green; transform:translate(22vw,0vw);}
    #z3{box-sizing:border-box; background:yellow; transform:translate(41vw,0vw);}
    #z4{box-sizing:border-box; background:lime; transform:translate(3vw,11vw);}
    #z5{box-sizing:border-box; background:coral; transform:translate(22vw,11vw);}
    #z6{box-sizing:border-box; background:aqua; transform:translate(41vw,11vw);}
    #z1:active,#z2:active,#z3:active,#z4:active,#z5:active,#z6:active{z-index:5; width:100vw; height:56.25vw; border:none; box-shadow:none; transform:translate(-11vw,0vw);}
    --></style>

    Le cadre contenant est positionné  à 1vh du bord haut de l'élément le précédant et à 10vw du bord gauche de la zone article par: margin:1vh 0 0 10vw;

    Lorsque chaque vignette va s'agrandir, elle le fera à partir de son angle gauche-haut, qui est à 10vw du bord gauche de la zone article; il faut compenser cet écart par:

     transform:translate(-10vw,0vw);

    Pour une raison que j'ignore, cette valeur laisse un petit espace à gauche qui est compensé par -1vw soit:

    transform:translate(-11vw,0vw);