La page d'Audrey : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
(ID. Superposition et scrollbars)
(ID. Cliques et apparitions)
Ligne 28 : Ligne 28 :
  
 
J'avais envie de créer un site où le texte interagirait avec la souris. Pour ce faire, il faut utiliser JavaScript. Je ne l'ai jamais fait, mais il faut bien passer par là. Je me suis inspirée de ce magnifique site qu'est [https://studio-push.com/ Studio Push] et en réalité, j'aurais aimé faire la même chose niveau interaction mais je sais pas comment faire. Le texte que j'ai choisi est les paroles de "We Appreciate Power" de la chanteuse Grimes. Ca parle d'intelligence artificielle, et j'aime beaucoup cette artiste, donc pourquoi pas.
 
J'avais envie de créer un site où le texte interagirait avec la souris. Pour ce faire, il faut utiliser JavaScript. Je ne l'ai jamais fait, mais il faut bien passer par là. Je me suis inspirée de ce magnifique site qu'est [https://studio-push.com/ Studio Push] et en réalité, j'aurais aimé faire la même chose niveau interaction mais je sais pas comment faire. Le texte que j'ai choisi est les paroles de "We Appreciate Power" de la chanteuse Grimes. Ca parle d'intelligence artificielle, et j'aime beaucoup cette artiste, donc pourquoi pas.
 +
 +
<syntaxhighlight lang="html">We appreciate power
 +
 +
What will it take to make you capitulate?
 +
 +
Simulation, give me something good
 +
 +
God's creation, so misunderstood
 +
 +
Pray to the divinity, the keeper of the key
 +
 +
One day everyone will believe
 +
 +
When will the state agree to cooperate?
 +
 +
People like to say that we're insane
 +
 +
But AI will reward us when it reigns
 +
 +
Pledge allegiance to the world's most powerful computer
 +
 +
Simulation: it's the future
 +
 +
And if you long to never die
 +
 +
Baby, plug in, upload your mind
 +
 +
Come on, you're not even alive
 +
 +
If you're not backed up on a drive
 +
 +
Neanderthal to human being
 +
 +
Evolution, kill the gene
 +
 +
Biology is superficial
 +
 +
Intelligence is artificial
 +
 +
Submit</syntaxhighlight>
  
 
===='''ÉTAPE 1.prout'''====
 
===='''ÉTAPE 1.prout'''====

Version du 12 décembre 2021 à 16:55

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.

Grid1.png


SITE . 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. Ceci dit, il y a deux résultats sur la page qui me plaisent : en haut à gauche, il y a des lettres qui apparaissent derrière d'autres ; et en bas à droite, où un scroll passe au-dessus d'un autre scroll.

ÉTAPE 2. Exploiter la superposition.

[ajouter image]

SITE . J'ai essayé d'exploiter l'idée des lettres qui apparaissent derrières d'autres, pour créer quelque chose de plus graphique, voire utile ? Je ne sais pas. Dans tous les cas, j'ai joué avec des couleurs différentes. Et j'ai découvert qu'avec le scroll qui va vite, on lit mieux le mot derrière. J'apprécie ce truc-là, je vais essayer de voir jusqu'où je peux aller dans cette idée.

ÉTAPE 3. Que faire avec la superposition ?

SITE . Bah là maintenant, j'ai décidé de focus beaucoup plus sur la superposition mais plus graphique.

Texte — Faire interagir avec un texte

ID. Cliques et apparitions

J'avais envie de créer un site où le texte interagirait avec la souris. Pour ce faire, il faut utiliser JavaScript. Je ne l'ai jamais fait, mais il faut bien passer par là. Je me suis inspirée de ce magnifique site qu'est Studio Push et en réalité, j'aurais aimé faire la même chose niveau interaction mais je sais pas comment faire. Le texte que j'ai choisi est les paroles de "We Appreciate Power" de la chanteuse Grimes. Ca parle d'intelligence artificielle, et j'aime beaucoup cette artiste, donc pourquoi pas.

We appreciate power

What will it take to make you capitulate?

Simulation, give me something good

God's creation, so misunderstood

Pray to the divinity, the keeper of the key

One day everyone will believe

When will the state agree to cooperate?

People like to say that we're insane

But AI will reward us when it reigns

Pledge allegiance to the world's most powerful computer

Simulation: it's the future

And if you long to never die

Baby, plug in, upload your mind

Come on, you're not even alive

If you're not backed up on a drive

Neanderthal to human being

Evolution, kill the gene

Biology is superficial

Intelligence is artificial

Submit

ÉTAPE 1.prout