La page d'Audrey : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
(→‎ÉTAPE 1. Composer l'écran avec les scrolls.)
Ligne 11 : Ligne 11 :
  
 
Je pars sur des jeux de typo, contrairement à mon autre site qui était centré autour de dessin et de la composition. J'apprécie la composition, mais je ne sais pas encore trop quoi en faire.
 
Je pars sur des jeux de typo, contrairement à mon autre site qui était centré autour de dessin et de la composition. J'apprécie la composition, mais je ne sais pas encore trop quoi en faire.
 +
 +
body {
 +
    height: 100%;
 +
    margin:0;
 +
    font-size: 600px;
 +
}
 +
 +
.parent {
 +
    height: 100vh;
 +
    width: 100vw;
 +
    display: grid;
 +
    grid-template-columns: repeat(12, 1fr);
 +
    grid-template-rows: repeat(6, 1fr);
 +
    grid-column-gap: 0px;
 +
    grid-row-gap: 0px;
 +
    overflow: scroll;
 +
    position: absolute;
 +
    overflow:hidden;
 +
}
 +
 +
a {
 +
    text-decoration: none;
 +
}
 +
 +
nav, scroll-container {
 +
    text-align: center;
 +
}
 +
 +
nav {
 +
    font-size: 39px;
 +
}
 +
 +
scroll-container {
 +
    overflow-y: scroll;
 +
    scroll-behavior: smooth;
 +
}
 +
 +
scroll-page {
 +
    display: flex;
 +
    align-items: center;
 +
    justify-content: center;
 +
}
 +
 +
 +
.div1 { grid-area: 1 / 1 / 3 / 6;    overflow: scroll;}
 +
.div2 { grid-area: 1 / 2 / 4 / 4;    overflow: scroll;}
 +
.div3 { grid-area: 3 / 1 / 4 / 7;    overflow: scroll;}
 +
.div4 { grid-area: 1 / 6 / 7 / 7;    overflow: scroll;}
 +
.div5 { grid-area: 4 / 5 / 5 / 6;    overflow: scroll;}
 +
.div6 { grid-area: 4 / 5 / 6 / 8;    overflow: scroll;}
 +
.div7 { grid-area: 4 / 1 / 6 / 4;    overflow: scroll;}
 +
.div8 { grid-area: 3 / 3 / 7 / 6;    overflow: scroll;}
 +
.div9 { grid-area: 6 / 1 / 7 / 5;    overflow: scroll;}
 +
.div10 { grid-area: 4 / 7 / 7 / 10;    overflow: scroll;}
 +
.div11 { grid-area: 1 / 9 / 5 / 10;    overflow: scroll;}
 +
.div12 { grid-area: 1 / 7 / 3 / 11;    overflow: scroll;}
 +
.div13 { grid-area: 3 / 7 / 6 / 9;    overflow: scroll;}
 +
.div14 { grid-area: 5 / 8 / 7 / 13;    overflow: scroll;}
 +
.div15 { grid-area: 3 / 10 / 7 / 12;    overflow: scroll;}
 +
.div16 { grid-area: 1 / 12 / 6 / 13;    overflow: scroll;}
 +
.div17 { grid-area: 1 / 10 / 4 / 13;    overflow: scroll;}

Version du 17 novembre 2021 à 16:10

Scroll — Créer un site web qui exploite l'utilité du scroll

ID. Superposition et scrollbars

L'idée est de créer un grid avec énormément de scroll qui se superposent pour créer un effet plutôt graphique. J'avais déjà créé un site avec cette idée dans le cadre du cours de Web2Print, mais plutôt dans la perspective de l'imprimer. Ici, ce serait vraiment dans la perspective de fonctionnalité amusante.

ÉTAPE 1. Composer l'écran avec les scrolls.

[ajouter image]

Je pars sur des jeux de typo, contrairement à mon autre site qui était centré autour de dessin et de la composition. J'apprécie la composition, mais je ne sais pas encore trop quoi en faire.

body { 

   height: 100%;
   margin:0;
   font-size: 600px;

}

.parent { 

   height: 100vh;
   width: 100vw;
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-template-rows: repeat(6, 1fr);
   grid-column-gap: 0px;
   grid-row-gap: 0px;
   overflow: scroll;
   position: absolute;
   overflow:hidden;

}

a { 

   text-decoration: none;

}

nav, scroll-container { 

   text-align: center;

}

nav { 

   font-size: 39px;

}

scroll-container { 

   overflow-y: scroll;
   scroll-behavior: smooth;

}

scroll-page { 

   display: flex;
   align-items: center;
   justify-content: center;

}


.div1 { grid-area: 1 / 1 / 3 / 6; overflow: scroll;} .div2 { grid-area: 1 / 2 / 4 / 4; overflow: scroll;} .div3 { grid-area: 3 / 1 / 4 / 7; overflow: scroll;} .div4 { grid-area: 1 / 6 / 7 / 7; overflow: scroll;} .div5 { grid-area: 4 / 5 / 5 / 6; overflow: scroll;} .div6 { grid-area: 4 / 5 / 6 / 8; overflow: scroll;} .div7 { grid-area: 4 / 1 / 6 / 4; overflow: scroll;} .div8 { grid-area: 3 / 3 / 7 / 6; overflow: scroll;} .div9 { grid-area: 6 / 1 / 7 / 5; overflow: scroll;} .div10 { grid-area: 4 / 7 / 7 / 10; overflow: scroll;} .div11 { grid-area: 1 / 9 / 5 / 10; overflow: scroll;} .div12 { grid-area: 1 / 7 / 3 / 11; overflow: scroll;} .div13 { grid-area: 3 / 7 / 6 / 9; overflow: scroll;} .div14 { grid-area: 5 / 8 / 7 / 13; overflow: scroll;} .div15 { grid-area: 3 / 10 / 7 / 12; overflow: scroll;} .div16 { grid-area: 1 / 12 / 6 / 13; overflow: scroll;} .div17 { grid-area: 1 / 10 / 4 / 13; overflow: scroll;}

Récupérée de « https://designnumerique.be/w/index.php?title=La_page_d%27Audrey&oldid=3380 »