Mondher

De Design numérique
Révision datée du 9 décembre 2021 à 19:41 par Mondher (discussion | contributions) (→‎travail autour du scroll)
Aller à : navigation, rechercher

Pad du cours

Id serveur filezilla :

hôte : designnumerique.be / student.work / t0ct0ct0c

Exemple de labyrinthe

travail autour du scroll

Focus sur un élément d'interface très particulier par sa longévité (il existe depuis les années 70), son rapport à l'écran (on déplace du contenu à l'intérieur d'un cadre ou on déplace un cadre par rapport à un contenu); le scroll. Lancement d'un premier exercice autour du scroll; comment détourner / utiliser le scroll au sein d'une expérimentation sur une page web.

Pour cet exercice, j'ai choisi de travailler sur un labyrinthe. Dans ce labyrinthe, on ne se déplace pas dans les espaces vides mais dans les barres de scroll. Chaque barre est reliée à une autre barre au moins, qu'elle active et rend visible ou désactive et rend invisible, en fonction du déplacement du curseur de la barre. Il n'y a qu'un seul chemin qui amène au bout du labyrinthe. Une fois arrivé au bout du labyrinthe, la première barre de scroll du jeu et rendue visible, comme à l'état initial du jeu. Il n'y qu'un seul chemin qui amène au bout du labyrinthe mais il y a parfois des options sans issues. Dans ces cas-là, il faut faire demi tour et retrouver les barres de scrolls qui ont étés masquées pour prendre le bon chemin. Il y a 70 barres de scroll, dont 20 pour le bon chemin.

Structure du labyrinthe

HTML, CSS, JavaScript

Code HTML :

Le code HTML contient un div général, le div labyrinthe, dans lequel il y a les div de chaque box du labyrinthe, chacune avec son propre id (de 1 à 70) et toutes avec la même classe chemin. Dans chaque div de chaque box, il y a un div vide pour permettre le débordement du div et donc le scroll. Ici, il n'y a pas de contenu, alors on voit seulement le scroll. À la fin du code, il y a un bout de texte car j'ai essayé de faire en sorte que des textes s'affichent et disparaissent en fonction des mouvements des scrolls. Pour finir, le résultat ne m'intéressait pas. J'ai laissé le bout de texte dans le code parce qu'il est beau. 

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>labyrinthe scroll</title>
        <link rel="stylesheet" href="styles2.css">
        
    </head>
    <body>
    <div id="labyrinth">
        <div id="box1" class="chemin">
            <div></div>
        </div>
        <div id="box2" class="chemin active">
            <div></div>
        </div>
        <div id="box3" class="chemin">
            <div></div>
        </div>
        <div id="box4" class="chemin">
            <div></div>
        </div>
        <div id="box5" class="chemin">
            <div></div>
        </div>
        <div id="box6" class="chemin">
            <div></div>
        </div>
        <div id="box7" class="chemin">
            <div></div>
        </div>
        <div id="box8" class="chemin">
            <div></div>
        </div>
        <div id="box9" class="chemin">
            <div></div>
        </div>
        <div id="box10" class="chemin">
            <div></div>
        </div>
        <div id="box11" class="chemin">
            <div></div>
        </div>
        <div id="box12" class="chemin">
            <div></div>
        </div>
        <div id="box13" class="chemin">
            <div></div>
        </div>
        <div id="box14" class="chemin">
            <div></div>
        </div>
        <div id="box15" class="chemin">
            <div></div>
        </div>
        <div id="box16" class="chemin">
            <div></div>
        </div>
        <div id="box17" class="chemin">
            <div></div>
        </div>
        <div id="box18" class="chemin">
            <div></div>
        </div>
        <div id="box19" class="chemin">
            <div></div>
        </div>
        <div id="box20" class="chemin">
            <div></div>
        </div>
        <div id="box21" class="chemin">
            <div></div>
        </div>
        <div id="box22" class="chemin">
            <div></div>
        </div>
        <div id="box23" class="chemin">
            <div></div>
        </div>
        <div id="box24" class="chemin">
            <div></div>
        </div>
        <div id="box25" class="chemin">
            <div></div>
        </div>
        <div id="box26" class="chemin">
            <div></div>
        </div>
        <div id="box27" class="chemin">
            <div></div>
        </div>
        <div id="box28" class="chemin">
            <div></div>
        </div>
        <div id="box29" class="chemin">
            <div></div>
        </div>
        <div id="box30" class="chemin">
            <div></div>
        </div>
        <div id="box31" class="chemin">
            <div></div>
        </div>
        <div id="box32" class="chemin">
            <div></div>
        </div>
        <div id="box33" class="chemin">
            <div></div>
        </div>
        <div id="box34" class="chemin">
            <div></div>
        </div>
        <div id="box35" class="chemin">
            <div></div>
        </div>
        <div id="box36" class="chemin">
            <div></div>
        </div>
        <div id="box37" class="chemin">
            <div></div>
        </div>
        <div id="box38" class="chemin">
            <div></div>
        </div>
        <div id="box39" class="chemin">
            <div></div>
        </div>
        <div id="box40" class="chemin">
            <div></div>
        </div>
        <div id="box41" class="chemin">
            <div></div>
        </div>
        <div id="box42" class="chemin">
            <div></div>
        </div>
        <div id="box43" class="chemin">
            <div></div>
        </div>
        <div id="box44" class="chemin">
            <div></div>
        </div>
        <div id="box45" class="chemin">
            <div></div>
        </div>
        <div id="box46" class="chemin">
            <div></div>
        </div>
        <div id="box47" class="chemin">
            <div></div>
        </div>
        <div id="box48" class="chemin">
            <div></div>
        </div>
        <div id="box49" class="chemin">
            <div></div>
        </div>
        <div id="box50" class="chemin">
            <div></div>
        </div>
        <div id="box51" class="chemin">
            <div></div>
        </div>
        <div id="box52" class="chemin">
            <div></div>
        </div>
        <div id="box53" class="chemin">
            <div></div>
        </div>
        <div id="box54" class="chemin">
            <div></div>
        </div>
        <div id="box55" class="chemin">
            <div></div>
        </div>
        <div id="box56" class="chemin">
            <div></div>
        </div>
        <div id="box57" class="chemin">
            <div></div>
        </div>
        <div id="box58" class="chemin">
            <div></div>
        </div>
        <div id="box59" class="chemin">
            <div></div>
        </div>
        <div id="box60" class="chemin">
            <div></div>
        </div>
        <div id="box61" class="chemin">
            <div></div>
        </div>
        <div id="box62" class="chemin">
            <div></div>
        </div>
        <div id="box63" class="chemin">
            <div></div>
        </div>
        <div id="box64" class="chemin">
            <div></div>
        </div>
        <div id="box65" class="chemin">
            <div></div>
        </div>
        <div id="box66" class="chemin">
            <div></div>
        </div>
        <div id="box67" class="chemin">
            <div></div>
        </div>
        <div id="box68" class="chemin">
            <div></div>
        </div>
        <div id="box69" class="chemin">
            <div></div>
        </div>
        <div id="box70" class="chemin">
            <div></div>
        </div>
    </div>
    <!-- <div id="box1" class="text">
        <h1>
            J’envie — sans bien savoir si je les envie vraiment — ces gens dont on peut écrire la biographie, ou qui peuvent l’écrire eux-mêmes. Dans ces impressions décousues, sans lien entre elles et ne souhaitant pas en avoir, je raconte avec indifférence mon autobiographie sans faits, mon histoire sans vie. Ce sont mes confidences, et si je n’y dis rien, c’est que je n’ai rien à dire. J’envie — sans bien savoir si je les envie vraiment — ces gens dont on peut écrire la biographie, ou qui peuvent l’écrire eux-mêmes. Dans ces impressions décousues, sans lien entre elles et ne souhaitant pas en avoir, je raconte avec indifférence mon autobiographie sans faits, mon histoire sans vie. Ce sont mes confidences, et si je n’y dis rien, c’est que je n’ai rien à dire. J’envie — sans bien savoir si je les envie vraiment — ces gens dont on peut écrire la biographie, ou qui peuvent l’écrire eux-mêmes. Dans ces impressions décousues, sans lien entre elles et ne souhaitant pas en avoir, je raconte avec indifférence mon autobiographie sans faits, mon histoire sans vie. Ce sont mes confidences, et si je n’y dis rien, c’est que je n’ai rien à dire.
        </h1>
    </div> -->
    <script src="script2.js"></script>
    </body>
</html>

Code CSS :

Pour chaque box, il y a deux blocs de codes, un pour le scroll en soi, ses dimensions et sa position sur la page, l'autre pour le contenu invisible qui définit la taille du contenu qui déborde et donc du curseur du scroll dans la barre de scroll. 

html, body{
   width:100%;
   height:100%;
   margin:0; 
}
#labyrinth{
    width:900px;
    height:900px;
    border:1px solid lightgray;
    margin-top:10px;
    margin-left:10px;
    position:fixed;
    /*position : relative;*/
}


.chemin.active{
    display:block;
}

.chemin{
    overflow:auto;
    position:absolute;
    display:none;
}
#box1{
    height:500px;
    width:20px;
    top:79px;
    left:0px;
}
#box1 div{
    background-color: #f000;
    height:150000%;
    width:1px;
}
/*#box1 h1{
    font-size: 8rem;
    position: absolute;
    display : inline;
    margin-top:10px;
    margin-left:950px;
    color: black;
    overflow: inherit;
    opacity: 20%;
}*/
#box2{
    height:20px;
    width:270px;
    position:absolute;
    top:0px;
    left:0px;
}
#box2 div{
    background-color: #00f0;
    width:900%;
    height:1px;
}
}
#box3{
    height:100px;
    width:10px;
    position:absolute;
    top:40px;
    left:40px;
}
#box3 div{
    background-color: #f000;
    height:200%;
    width:1px;
}
#box4{
    height:20px;
    width:100px;
    position:absolute;
    top:79px;
    left:24px;
}
#box4 div{
    background-color: #00f0;
    width:300%;
    height:1px;
}
#box5{
    height:90px;
    width:20px;
    position:absolute;
    top:20px;
    left:220px;
}
#box5 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box6{
    height:20px;
    width:120px;
    position:absolute;
    top:105px;
    left:190px;
}
#box6 div{
    background-color: #00f0;
    width:300%;
    height:1px;
}
#box7{
    height:150px;
    width:20px;
    position:absolute;
    top:0px;
    left:314px;
}
#box7 div{
    background-color: #00f0;
    height:3300%;
    width:1px;
}
#box8{
    height:20px;
    width:433px;
    position:absolute;
    top:274px;
    left:257px;
}
#box8 div{
    background-color: #00f0;
    width:900%;
    height:1px;
}
#box9{
    height:200px;
    width:20px;
    position:absolute;
    top:223px;
    left:234px;
}
#box9 div{
    background-color: #00f0;
    height:250%;
    width:1px;
}
#box10{
    height:290px;
    width:20px;
    position:absolute;
    top:79px;
    left:128px;
}
#box10 div{
    background-color: #00f0;
    height:700%;
    width:1px;
}
#box11{
    height:200px;
    width:20px;
    position:absolute;
    top:20px;
    left:415px;
}
#box11 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box12{
    height:20px;
    width:150px;
    position:absolute;
    top:67px;
    left:438px;
}
#box12 div{
    background-color: #00f0;
    width:300%;
    height:1px;
}
#box13{
    height:20px;
    width:102px;
    position:absolute;
    top:200px;
    left:152px;
}
#box13 div{
    background-color: #00f0;
    width:200%;
    height:1px;
}
#box14{
    height:20px;
    width:150px;
    position:absolute;
    top:373px;
    left:80px;
}
#box14 div{
    background-color: #00f0;
    width:400%;
    height:1px;
}
#box15{
    height:120px;
    width:20px;
    position:absolute;
    top:460px;
    left:221px;
}
#box15 div{
    background-color: #00f0;
    height:400%;
    width:1px;
}
#box16{
    height:20px;
    width:250px;
    position:absolute;
    top:508px;
    left:320px;
}
#box16 div{
    background-color: #00f0;
    width:500%;
    height:1px;
}
#box17{
    height:180px;
    width:20px;
    position:absolute;
    top:90px;
    left:507px;
}
#box17 div{
    background-color: #00f0;
    height:400%;
    width:1px;
}
#box18{
    height:180px;
    width:20px;
    position:absolute;
    top:0px;
    left:592px;
}
#box18 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box19{
    height:20px;
    width:75px;
    position:absolute;
    top:45px;
    left:337px;
}
#box19 div{
    background-color: #00f0;
    width:200%;
    height:1px;
}
#box20{
    height:20px;
    width:190px;
    position:absolute;
    top:250px;
    left:530px;
}
#box20 div{
    background-color: #00f0;
    width:300%;
    height:1px;
}
#box21{
    height:210px;
    width:20px;
    position:absolute;
    top:40px;
    left:670px;
}
#box21 div{
    background-color: #00f0;
    height:350%;
    width:1px;
}
#box22{
    height:20px;
    width:205px;
    position:absolute;
    top:67px;
    left:693px;
}
#box22 div{
    background-color: #00f0;
    width:500%;
    height:1px;
}
#box23{
    height:135px;
    width:20px;
    position:absolute;
    top:90px;
    left:880px;
}
#box23 div{
    background-color: #00f0;
    height:300%;
    width:1px;
}
#box24{
    height:18px;
    width:140px;
    position:absolute;
    top:177px;
    left:738px;
}
#box24 div{
    background-color: #00f0;
    width:400%;
    height:1px;
}
#box25{
    height:160px;
    width:20px;
    position:absolute;
    top:200px;
    left:758px;
}
#box25 div{
    background-color: #00f0;
    height:300%;
    width:1px;
}
#box26{
    height:20px;
    width:300px;
    position:absolute;
    top:363px;
    left:500px;
}
#box26 div{
    background-color: #00f0;
    width:2000%;
    height:1px;
}
#box27{
    height:140px;
    width:20px;
    position:absolute;
    top:365px;
    left:348px;
}
#box27 div{
    background-color: #00f0;
    height:600%;
    width:1px;
}
#box28{
    height:120px;
    width:20px;
    position:absolute;
    top:385px;
    left:528px;
}
#box28 div{
    background-color: #00f0;
    height:300%;
    width:1px;
}
#box29{
    height:180px;
    width:20px;
    position:absolute;
    top:67px;
    left:1100px;
    display: none;
}
#box29 div{
    background-color: blue;
    height:200%;
    width:1px;
}
#box30{
    height:115px;
    width:20px;
    position:absolute;
    top:157px;
    left:60px;
}
#box30 div{
    background-color: #00f0;
    height:250%;
    width:1px;
}
#box31{
    height:140px;
    width:20px;
    position:absolute;
    top:297px;
    left:435px;
}
#box31 div{
    background-color: #00f0;
    height:400%;
    width:1px;
}
#box32{
    height:205px;
    width:20px;
    position:absolute;
    top:531px;
    left:450px;
}
#box32 div{
    background-color: #00f0;
    height:300%;
    width:1px;
}
#box33{
    height:20px;
    width:100px;
    position:absolute;
    top:460px;
    left:244px;
}
#box33 div{
    background-color: #00f0;
    width:300%;
    height:1px;
}
#box34{
    height:20px;
    width:300px;
    position:absolute;
    top:582px;
    left:0px;
}
#box34 div{
    background-color: #00f0;
    width:700%;
    height:1px;
}
#box35{
    height:140px;
    width:20px;
    position:absolute;
    top:440px;
    left:100px;
}
#box35 div{
    background-color: #00f0;
    height:400%;
    width:1px;
}
#box36{
    height:20px;
    width:200px;
    position:absolute;
    top:660px;
    left:247px;
}
#box36 div{
    background-color: #00f0;
    width:500%;
    height:1px;
}
#box37{
    height:20px;
    width:75px;
    position:absolute;
    top:460px;
    left:22px;
}
#box37 div{
    background-color: #00f0;
    width:200%;
    height:1px;
}
#box38{
    height:255px;
    width:20px;
    position:absolute;
    top:645px;
    left:225px;
}
#box38 div{
    background-color: #00f0;
    height:600%;
    width:1px;
}
#box39{
    height:175px;
    width:20px;
    position:absolute;
    top:605px;
    left:130px;
}
#box39 div{
    background-color: #00f0;
    height:400%;
    width:1px;
}
#box40{
    height:20px;
    width:70px;
    position:absolute;
    top:650px;
    left:57px;
}
#box40 div{
    background-color: #00f0;
    width:200%;
    height:1px;
}
#box41{
    height:20px;
    width:165px;
    position:absolute;
    top:783px;
    left:20px;
}
#box41 div{
    background-color: #00f0;
    width:400%;
    height:1px;
}
#box42{
    height:95px;
    width:20px;
    position:absolute;
    top:805px;
    left:65px;
}
#box42 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box43{
    height:20px;
    width:100px;
    position:absolute;
    top:850px;
    left:247px;
}
#box43 div{
    background-color: #00f0;
    width:200%;
    height:1px;
}
#box44{
    height:145px;
    width:20px;
    position:absolute;
    top:755px;
    left:350px;
}
#box44 div{
    background-color: #00f0;
    height:400%;
    width:1px;
}
#box45{
    height:20px;
    width:200px;
    position:absolute;
    top:783px;
    left:372px;
}
#box45 div{
    background-color: #00f0;
    width:300%;
    height:1px;
}
#box46{
    height:160px;
    width:20px;
    position:absolute;
    top:620px;
    left:530px;
}
#box46 div{
    background-color: #00f0;
    height:400%;
    width:1px;
}
#box47{
    height:20px;
    width:200px;
    position:absolute;
    top:598px;
    left:472px;
}
#box47 div{
    background-color: #00f0;
    width:500%;
    height:1px;
}
#box48{
    height:120px;
    width:20px;
    position:absolute;
    top:475px;
    left:620px;
}
#box48 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box49{
    height:20px;
    width:230px;
    position:absolute;
    top:453px;
    left:600px;
}
#box49 div{
    background-color: #00f0;
    width:500%;
    height:1px;
}
#box50{
    height:60px;
    width:20px;
    position:absolute;
    top:475px;
    left:725px;
}
#box50 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box51{
    height:500px;
    width:20px;
    position:absolute;
    top:280px;
    left:833px;
}
#box51 div{
    background-color: #00f0;
    height:1200%;
    width:1px;
}
#box52{
    height:20px;
    width:120px;
    position:absolute;
    top:538px;
    left:680px;
}
#box52 div{
    background-color: #00f0;
    width:800%;
    height:1px;
}
#box53{
    height:150px;
    width:20px;
    position:absolute;
    top:560px;
    left:760px;
}
#box53 div{
    background-color: #00f0;
    height:400%;
    width:1px;
}
#box54{
    height:20px;
    width:150px;
    position:absolute;
    top:675px;
    left:607px;
}
#box54 div{
    background-color: #00f0;
    width:400%;
    height:1px;
}
#box55{
    height:20px;
    width:180px;
    position:absolute;
    top:740px;
    left:650px;
}
#box55 div{
    background-color: #00f0;
    width:400%;
    height:1px;
}
#box56{
    height:20px;
    width:475px;
    position:absolute;
    top:845px;
    left:425px;
}
#box56 div{
    background-color: #00f0;
    width:1000%;
    height:1px;
}
#box57{
    height:80px;
    width:20px;
    position:absolute;
    top:763px;
    left:750px;
}
#box57 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box58{
    height:30px;
    width:20px;
    position:absolute;
    top:867px;
    left:825px;
}
#box58 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box59{
    height:20px;
    width:130px;
    position:absolute;
    top:180px;
    left:282px;
}
#box59 div{
    background-color: #00f0;
    width:200%;
    height:1px;
}
#box60{
    height:45px;
    width:20px;
    position:absolute;
    top:20px;
    left:800px;
}
#box60 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box61{
    height:80px;
    width:20px;
    position:absolute;
    top:530px;
    left:375px;
}
#box61 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box62{
    height:60px;
    width:20px;
    position:absolute;
    top:720px;
    left:35px;
}
#box62 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box63{
    height:90px;
    width:20px;
    position:absolute;
    top:682px;
    left:285px;
}
#box63 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box64{
    height:30px;
    width:20px;
    position:absolute;
    top:400px;
    left:1000px;
    display: none;
}
#box64 div{
    background-color: blue;
    height:200%;
    width:1px;
}
#box65{
    height:40px;
    width:20px;
    position:absolute;
    top:762px;
    left:660px;
}
#box65 div{
    background-color: #00f0;
    height:200%;
    width:1px;
}
#box66{
    height:20px;
    width:110px;
    position:absolute;
    top:125px;
    left:692px;
}
#box66 div{
    background-color: #00f0;
    width:200%;
    height:1px;
}
#box67{
    height:20px;
    width:85px;
    position:absolute;
    top:275px;
    left:40px;
}
#box67 div{
    background-color: #00f0;
    width:300%;
    height:1px;
}
#box68{
    height:20px;
    width:130px;
    position:absolute;
    top:500px;
    left:1000px;
    display: none;
}
#box68 div{
    background-color: blue;
    width:200%;
    height:1px;
}
#box69{
    height:20px;
    width:130px;
    position:absolute;
    top:500px;
    left:1000px;
    display: none;
}
#box69 div{
    background-color: blue;
    width:200%;
    height:1px;
}
#box70{
    height:20px;
    width:130px;
    position:absolute;
    top:500px;
    left:1000px;
    display: none;
}
#box70 div{
    background-color: blue;
    width:200%;
    height:1px;
}
Récupérée de « https://designnumerique.be/w/index.php?title=Mondher&oldid=3411 »