Mondher : Différence entre versions
(→travail autour du scroll) |
(→travail autour du scroll) |
||
| Ligne 13 : | Ligne 13 : | ||
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. | 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. | ||
| − | [[Fichier:Laby boxes mondher.jpg| | + | [[Fichier:Laby boxes mondher.jpg|200px|Structure du labyrinthe]] |
'''HTML, CSS, JavaScript''' | '''HTML, CSS, JavaScript''' | ||
Version du 9 décembre 2021 à 19:26
Id serveur filezilla :
hôte : designnumerique.be / student.work / t0ct0ct0c
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.
HTML, CSS, JavaScript
Code HTML :
<!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>
