https://designnumerique.be/w/api.php?action=feedcontributions&feedformat=atom&user=Camille.opdebeeck 2026-04-08T03:50:00Z Contributions MediaWiki 1.44.2 https://designnumerique.be/w/index.php?title=Camille&diff=3766 2022-04-26T14:58:03Z

<p>Camille.opdebeeck : </p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> <br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> === code JavaScript===<br /> ==== Utilisé pour faire glisser les dialogues dans la page ====<br /> <br /> <br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> === lien vers la page===<br /> file:///Users/camilleopdebeeck/Documents/ERG%20PROJETS/DESIGN%20NUM/ide%CC%81es2.html<br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html<br /> <br /> == Exercice 2e quadrimestre ==<br /> === BNA-BBOT===<br /> ====sélection des témoignages audio====<br /> <br /> sélection de témoignages d'habitant.e.s du quartier des Marolles. <br /> <br /> - 0323 - &quot;Le grand bal des Marolles au théâtre des Tanneurs,15 février 2002&lt;br&gt;<br /> <br /> - 0830 - Projet recyclart &quot;kaban à paroles&quot;, 24 octobre 2005 &lt;br&gt;<br /> <br /> - 0907 - Radio Zinneke,27 février 2006 &lt;br&gt;<br /> <br /> http://website.bna-bbot.be/en/database/albums/page1/?filter=%7B%22location%22%3A%5B%226921%22%5D%7D<br /> <br /> idées : prendre extraits des témoignages pour placer dans carnet <br /> avoir fil conducteur cohérent en fonction des témoignages<br /> <br /> PROJET BNA-BBOT <br /> <br /> L’idée partait de faire un petit carnet avec des morceaux de cartes des marolles mêlées à des paroles des habitants prises dans les audios sélectionnés. <br /> Le rendu des 3 affiches se basent sur des dérivés de cartes pris dans des archives en ligne et sur google earth et ensuite retravaillée sur illustrator pour essayer de s’éloigner de cette idée de carte. Je voulais que les visuels ne soit pas forcément facile à déchiffrer et que le spectateur doive chercher, trouver que cela représente une carte et s’il arrive potentiellement à reconnaitre les lieux, les rues. <br /> L’idée aussi de s’éloigner le plus possible d’une représentation stéréotypée des marolles, avec un style esthétique qui ne lui correspond pas du tout. <br /> <br /> c'était aussi un essai artistique et stylistique</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3628 2022-02-15T17:58:18Z

<p>Camille.opdebeeck : /* sélection des témoignages audio */</p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> <br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> === code JavaScript===<br /> ==== Utilisé pour faire glisser les dialogues dans la page ====<br /> <br /> <br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> === lien vers la page===<br /> file:///Users/camilleopdebeeck/Documents/ERG%20PROJETS/DESIGN%20NUM/ide%CC%81es2.html<br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html<br /> <br /> == Exercice 2e quadrimestre ==<br /> === BNA-BBOT===<br /> ====sélection des témoignages audio====<br /> <br /> sélection de témoignages d'habitant.e.s du quartier des Marolles. <br /> <br /> - 0323 - &quot;Le grand bal des Marolles au théâtre des Tanneurs,15 février 2002&lt;br&gt;<br /> <br /> - 0318 - Habitat et Rénovation Tanneurs, 14 février 2002&lt;br&gt;<br /> <br /> - 0317 - Habitat et Rénovation Tanneurs, 4 février 2002&lt;br&gt;<br /> <br /> - 0316 - Habitat et Rénovation Tanneurs, 25 janvier 2002&lt;br&gt;<br /> <br /> - 0830 - Projet recyclart &quot;kaban à paroles&quot;, 24 octobre 2005 &lt;br&gt;<br /> <br /> - 0907 - Radio Zinneke,27 février 2006 &lt;br&gt;<br /> <br /> http://website.bna-bbot.be/en/database/albums/page1/?filter=%7B%22location%22%3A%5B%226921%22%5D%7D<br /> <br /> idées : prendre extraits des témoignages pour placer dans carnet <br /> avoir fil conducteur cohérent en fonction des témoignages</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3624 2022-02-15T15:17:45Z

<p>Camille.opdebeeck : /* sélection des témoignages audio */</p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> <br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> === code JavaScript===<br /> ==== Utilisé pour faire glisser les dialogues dans la page ====<br /> <br /> <br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> === lien vers la page===<br /> file:///Users/camilleopdebeeck/Documents/ERG%20PROJETS/DESIGN%20NUM/ide%CC%81es2.html<br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html<br /> <br /> == Exercice 2e quadrimestre ==<br /> === BNA-BBOT===<br /> ====sélection des témoignages audio====<br /> <br /> sélection de témoignages d'habitant.e.s du quartier des Marolles. <br /> <br /> - 0323 - &quot;Le grand bal des Marolles au théâtre des Tanneurs,15 février 2002&lt;br&gt;<br /> <br /> - 0318 - Habitat et Rénovation Tanneurs, 14 février 2002&lt;br&gt;<br /> <br /> - 0317 - Habitat et Rénovation Tanneurs, 4 février 2002&lt;br&gt;<br /> <br /> - 0316 - Habitat et Rénovation Tanneurs, 25 janvier 2002&lt;br&gt;<br /> <br /> - 0830 - Projet recyclart &quot;kaban à paroles&quot;, 24 octobre 2005 &lt;br&gt;<br /> <br /> - 0907 - Radio Zinneke,27 février 2006 &lt;br&gt;<br /> <br /> http://website.bna-bbot.be/en/database/albums/page1/?filter=%7B%22location%22%3A%5B%226921%22%5D%7D</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3579 2022-02-01T17:46:56Z

<p>Camille.opdebeeck : /* sélection des témoignages audio */</p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> <br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> === code JavaScript===<br /> ==== Utilisé pour faire glisser les dialogues dans la page ====<br /> <br /> <br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> === lien vers la page===<br /> file:///Users/camilleopdebeeck/Documents/ERG%20PROJETS/DESIGN%20NUM/ide%CC%81es2.html<br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html<br /> <br /> == Exercice 2e quadrimestre ==<br /> === BNA-BBOT===<br /> ====sélection des témoignages audio====<br /> <br /> sélection de témoignages d'habitant.e.s du quartier des Marolles. <br /> <br /> - 0323 - &quot;Le grand bal des Marolles au théâtre des Tanneurs,15 février 2002&lt;br&gt;<br /> <br /> - 0318 - Habitat et Rénovation Tanneurs, 14 février 2002&lt;br&gt;<br /> <br /> - 0317 - Habitat et Rénovation Tanneurs, 4 février 2002&lt;br&gt;<br /> <br /> - 0316 - Habitat et Rénovation Tanneurs, 25 janvier 2002&lt;br&gt;<br /> <br /> <br /> http://website.bna-bbot.be/en/database/albums/page1/?filter=%7B%22location%22%3A%5B%226921%22%5D%7D</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3578 2022-02-01T17:46:05Z

<p>Camille.opdebeeck : </p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> <br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> === code JavaScript===<br /> ==== Utilisé pour faire glisser les dialogues dans la page ====<br /> <br /> <br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> === lien vers la page===<br /> file:///Users/camilleopdebeeck/Documents/ERG%20PROJETS/DESIGN%20NUM/ide%CC%81es2.html<br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html<br /> <br /> == Exercice 2e quadrimestre ==<br /> === BNA-BBOT===<br /> ====sélection des témoignages audio====<br /> <br /> sélection de témoignages d'habitant.e.s du quartier des Marolles. <br /> <br /> - 0323 - &quot;Le grand bal des Marolles au théâtre des Tanneurs,15 février 2002<br /> - 0318 - Habitat et Rénovation Tanneurs, 14 février 2002<br /> - 0317 - Habitat et Rénovation Tanneurs, 4 février 2002<br /> - 0316 - Habitat et Rénovation Tanneurs, 25 janvier 2002<br /> <br /> http://website.bna-bbot.be/en/database/albums/page1/?filter=%7B%22location%22%3A%5B%226921%22%5D%7D</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3554 2021-12-22T13:07:42Z

<p>Camille.opdebeeck : /* exercice de fin de quadrimestre 2021 */</p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> <br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> === code JavaScript===<br /> ==== Utilisé pour faire glisser les dialogues dans la page ====<br /> <br /> <br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> === lien vers la page===<br /> file:///Users/camilleopdebeeck/Documents/ERG%20PROJETS/DESIGN%20NUM/ide%CC%81es2.html<br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3553 2021-12-22T13:03:11Z

<p>Camille.opdebeeck : /* Utilisé pour faire glisser les dialogues dans la page */</p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> <br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> === code JavaScript===<br /> ==== Utilisé pour faire glisser les dialogues dans la page ====<br /> <br /> <br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3552 2021-12-22T13:02:40Z

<p>Camille.opdebeeck : /* Étapes */</p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> <br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> === code JavaScript===<br /> ==== Utilisé pour faire glisser les dialogues dans la page ====<br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3551 2021-12-22T13:02:19Z

<p>Camille.opdebeeck : </p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> <br /> === code JavaScript===<br /> ==== Utilisé pour faire glisser les dialogues dans la page ====<br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3550 2021-12-22T13:01:12Z

<p>Camille.opdebeeck : </p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> === Code HTML ===<br /> ==== Ici on peut voir comment j'ai découpé mon texte====<br /> &lt;!DOCTYPE html&gt;<br /> &lt;html&gt; <br /> &lt;head&gt; <br /> <br /> &lt;meta charset=&quot;utf=8&quot;&gt;<br /> &lt;title&gt; scroll2 &lt;/title&gt;<br /> &lt;link rel=&quot;stylesheet&quot; href=&quot;concerto2.css&quot;&gt;<br /> <br /> &lt;script type=&quot;text/javascript&quot; src=&quot;concerto22.js&quot;&gt;&lt;/script&gt;<br /> <br /> &lt;/head&gt;<br /> &lt;body&gt; <br /> <br /> &lt;p&gt;&quot; Stop shaking stupid, stupid. Breathe.&quot; &lt;/p&gt;<br /> <br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee1&quot;&gt;you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee2&quot;&gt;mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;wine1&quot;&gt;he wants a glass of &lt;/div&gt;<br /> &lt;div class=&quot;container&quot;&gt;<br /> &lt;span&gt;red wine&lt;/span&gt;<br /> &lt;span class=&quot;drop&quot;&gt;&lt;/span&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;svg&gt;<br /> &lt;defs&gt;<br /> &lt;filter id=&quot;gooey&quot;&gt;<br /> &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;5&quot; result=&quot;blur&quot;/&gt;<br /> &lt;feColorMatrix in=&quot;blur&quot; values=&quot;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -20&quot; result=&quot;gooey&quot; /&gt;<br /> &lt;feComposite in=&quot;SourceGraphic&quot; in2=&quot;gooey&quot; operator=&quot;atop&quot; /&gt;<br /> &lt;/filter&gt;<br /> &lt;/defs&gt;<br /> &lt;/svg&gt;<br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;a coffee please&quot;&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;no wine?&quot;&lt;/div&gt;<br /> &lt;div class=&quot;paper&quot;&gt; I tell him I have to write a paper, he doesn't want to hear. Deaf.&lt;/div&gt;<br /> &lt;div class=&quot;music revealLeft&quot;&gt;&quot;One must feel the music reinveted from inside&quot;&lt;/div&gt; <br /> &lt;div class=&quot;breast&quot;&gt;He talks to my breast.&lt;/div&gt; <br /> &lt;div class=&quot;geza revealLeft&quot;&gt;&quot;Géza Anda, 1969, I'll play it for you at my place.&quot;&lt;/div&gt; <br /> &lt;div class=&quot;thank revealRight&quot;&gt;&quot;No, thank you, I really have to work.&quot; &lt;/div&gt;<br /> &lt;div class=&quot;funny&quot;&gt;I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ?&lt;/div&gt; <br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div id=&quot;knowing&quot;&gt;A knowing superior look&lt;/div&gt; <br /> &lt;div id=&quot;guilty&quot;&gt;I felt ashamed, guilty.&lt;/div&gt;<br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;say&quot;&gt;That's what people say, don't they ?&lt;/div&gt; <br /> &lt;div id=&quot;anything&quot;&gt;&quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;&lt;/div&gt;<br /> <br /> &lt;div id=&quot;elbows&quot;&gt;His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. &lt;/div&gt; <br /> <br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> <br /> <br /> &lt;div id=&quot;anda&quot;&gt;The Geza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. &lt;/div&gt;<br /> &lt;div id=&quot;why&quot;&gt;why?&lt;/div&gt;<br /> <br /> &lt;div id=&quot;unreel&quot;&gt;Laughing makes it unreel. It's not happening. &lt;/div&gt; <br /> &lt;div id=&quot;place&quot;&gt;He talks about going to his place again.&lt;/div&gt;<br /> &lt;div class =&quot;please revealLeft&quot;&gt;&quot;No, thank you, I can't.&quot;&lt;/div&gt;<br /> &lt;div id=&quot;change&quot;&gt;His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.&lt;/div&gt;<br /> &lt;div id=&quot;metro&quot;&gt;He walks me to the metro, he pushes again&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;Are you sure?&quot;&lt;/div&gt; <br /> &lt;div id=&quot;sad&quot;&gt;A sad smile. As if I've let him down. &lt;/div&gt; <br /> &lt;div id=&quot;wrong&quot;&gt;as if I've wronged him. &lt;/div&gt; <br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;Goodbye&quot;&lt;/div&gt;<br /> &lt;div id=&quot;voice&quot;&gt;Not my voice&lt;/div&gt;<br /> &lt;div id=&quot;high&quot;&gt;high&lt;/div&gt; <br /> &lt;div id=&quot;horsed&quot;&gt;horsed&lt;/div&gt; <br /> &lt;div id=&quot;scared&quot;&gt;scared&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt; <br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;cry&quot;&gt; Nothing happened and I feel like crying.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;make&quot;&gt;They say it's nothing to make me nothing.&lt;/div&gt; <br /> &lt;div id=&quot;sth&quot;&gt;it's something&lt;/div&gt;<br /> &lt;div id=&quot;liars&quot;&gt;They're liars.&lt;/div&gt;<br /> <br /> <br /> &lt;/body&gt;<br /> <br /> === code JavaScript===<br /> ==== Utilisé pour faire glisser les dialogues dans la page ====<br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3549 2021-12-22T12:59:20Z

<p>Camille.opdebeeck : </p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> === Code HTML ===<br /> ==== Ici on peut voir comment j'ai découpé mon texte====<br /> &lt;!DOCTYPE html&gt;<br /> &lt;html&gt; <br /> &lt;head&gt; <br /> <br /> &lt;meta charset=&quot;utf=8&quot;&gt;<br /> &lt;title&gt; scroll2 &lt;/title&gt;<br /> &lt;link rel=&quot;stylesheet&quot; href=&quot;concerto2.css&quot;&gt;<br /> <br /> &lt;script type=&quot;text/javascript&quot; src=&quot;concerto22.js&quot;&gt;&lt;/script&gt;<br /> <br /> &lt;/head&gt;<br /> &lt;body&gt; <br /> <br /> &lt;p&gt;&quot; Stop shaking stupid, stupid. Breathe.&quot; &lt;/p&gt;<br /> <br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee1&quot;&gt;you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee2&quot;&gt;mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;wine1&quot;&gt;he wants a glass of &lt;/div&gt;<br /> &lt;div class=&quot;container&quot;&gt;<br /> &lt;span&gt;red wine&lt;/span&gt;<br /> &lt;span class=&quot;drop&quot;&gt;&lt;/span&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;svg&gt;<br /> &lt;defs&gt;<br /> &lt;filter id=&quot;gooey&quot;&gt;<br /> &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;5&quot; result=&quot;blur&quot;/&gt;<br /> &lt;feColorMatrix in=&quot;blur&quot; values=&quot;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -20&quot; result=&quot;gooey&quot; /&gt;<br /> &lt;feComposite in=&quot;SourceGraphic&quot; in2=&quot;gooey&quot; operator=&quot;atop&quot; /&gt;<br /> &lt;/filter&gt;<br /> &lt;/defs&gt;<br /> &lt;/svg&gt;<br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;a coffee please&quot;&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;no wine?&quot;&lt;/div&gt;<br /> &lt;div class=&quot;paper&quot;&gt; I tell him I have to write a paper, he doesn't want to hear. Deaf.&lt;/div&gt;<br /> &lt;div class=&quot;music revealLeft&quot;&gt;&quot;One must feel the music reinveted from inside&quot;&lt;/div&gt; <br /> &lt;div class=&quot;breast&quot;&gt;He talks to my breast.&lt;/div&gt; <br /> &lt;div class=&quot;geza revealLeft&quot;&gt;&quot;Géza Anda, 1969, I'll play it for you at my place.&quot;&lt;/div&gt; <br /> &lt;div class=&quot;thank revealRight&quot;&gt;&quot;No, thank you, I really have to work.&quot; &lt;/div&gt;<br /> &lt;div class=&quot;funny&quot;&gt;I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ?&lt;/div&gt; <br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div id=&quot;knowing&quot;&gt;A knowing superior look&lt;/div&gt; <br /> &lt;div id=&quot;guilty&quot;&gt;I felt ashamed, guilty.&lt;/div&gt;<br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;say&quot;&gt;That's what people say, don't they ?&lt;/div&gt; <br /> &lt;div id=&quot;anything&quot;&gt;&quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;&lt;/div&gt;<br /> <br /> &lt;div id=&quot;elbows&quot;&gt;His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. &lt;/div&gt; <br /> <br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> <br /> <br /> &lt;div id=&quot;anda&quot;&gt;The Geza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. &lt;/div&gt;<br /> &lt;div id=&quot;why&quot;&gt;why?&lt;/div&gt;<br /> <br /> &lt;div id=&quot;unreel&quot;&gt;Laughing makes it unreel. It's not happening. &lt;/div&gt; <br /> &lt;div id=&quot;place&quot;&gt;He talks about going to his place again.&lt;/div&gt;<br /> &lt;div class =&quot;please revealLeft&quot;&gt;&quot;No, thank you, I can't.&quot;&lt;/div&gt;<br /> &lt;div id=&quot;change&quot;&gt;His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.&lt;/div&gt;<br /> &lt;div id=&quot;metro&quot;&gt;He walks me to the metro, he pushes again&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;Are you sure?&quot;&lt;/div&gt; <br /> &lt;div id=&quot;sad&quot;&gt;A sad smile. As if I've let him down. &lt;/div&gt; <br /> &lt;div id=&quot;wrong&quot;&gt;as if I've wronged him. &lt;/div&gt; <br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;Goodbye&quot;&lt;/div&gt;<br /> &lt;div id=&quot;voice&quot;&gt;Not my voice&lt;/div&gt;<br /> &lt;div id=&quot;high&quot;&gt;high&lt;/div&gt; <br /> &lt;div id=&quot;horsed&quot;&gt;horsed&lt;/div&gt; <br /> &lt;div id=&quot;scared&quot;&gt;scared&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt; <br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;cry&quot;&gt; Nothing happened and I feel like crying.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;make&quot;&gt;They say it's nothing to make me nothing.&lt;/div&gt; <br /> &lt;div id=&quot;sth&quot;&gt;it's something&lt;/div&gt;<br /> &lt;div id=&quot;liars&quot;&gt;They're liars.&lt;/div&gt;<br /> <br /> <br /> &lt;/body&gt;<br /> <br /> <br /> === code JavaScript===<br /> ==== Utilisé pour faire glisser les dialogues dans la page ====<br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3548 2021-12-22T12:55:23Z

<p>Camille.opdebeeck : </p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> ===Code CSS===<br /> {<br /> body {<br /> background-color: solid black;<br /> <br /> }<br /> .revealLeft{<br /> opacity: 0;<br /> }<br /> .revealLeft.active{<br /> opacity: 1;<br /> animation: 1s slide-right 1s forwards;<br /> transform:translateX(-110%);<br /> }<br /> @keyframes slide-right{<br /> to {<br /> transform:translateX(0);<br /> }<br /> }<br /> <br /> .revealRight{<br /> opacity: 0;<br /> }<br /> .revealRight.active{<br /> opacity: 1;<br /> animation: 1s slide-right 1s forwards;<br /> transform:translateX(110%);<br /> }<br /> @keyframes slide-right{<br /> to {<br /> transform:translateX(0);<br /> }<br /> }<br /> <br /> p {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw;<br /> font-weight: 900;<br /> text-decoration: none;<br /> color: rgb(0, 0, 0);<br /> display: inline-block;<br /> background-size: 120% 100%;<br /> <br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-15deg); }<br /> 15% { transform: skewX(15deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> <br /> #Nothing1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(1px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 300px;<br /> padding-bottom: 50px;<br /> }<br /> <br /> #Nothing2 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(2px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing3 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(3px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing4 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(4px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> <br /> #Nothing5 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(5px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing6 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(6px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing7 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(7px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing8 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(8px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-bottom: 100px;<br /> }<br /> <br /> #coffee1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #coffee2 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> padding-left: 520px;<br /> padding-right: 20px;}<br /> <br /> #wine1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> color: rgb(168, 11, 11);<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> .container {<br /> filter: url('#gooey');<br /> display: flex;<br /> justify-content: center;<br /> align-items: center;<br /> color: rgb(168, 11, 11);<br /> }<br /> <br /> .liquid-1 {<br /> position: relative;<br /> }<br /> <br /> span {<br /> letter-spacing: 10px;<br /> font-size: 8rem;<br /> }<br /> <br /> .drop {<br /> position: absolute;<br /> background: var(--yellow);<br /> width: 22px;<br /> height: 22px;<br /> border-radius: 60% 70% 50% 60% / 65% 66% 60% 65%;<br /> animation: 6s move ease infinite;<br /> }<br /> <br /> .drop:after {<br /> width: 17px;<br /> height: 17px;<br /> content: '';<br /> position: absolute;<br /> background: var(--yellow);<br /> border-radius: 50% 60% 60% 70% / 60% 65% 65% 65%;<br /> left: 25px;<br /> top: 3px;<br /> animation: 6s drop_effect ease infinite;<br /> }<br /> <br /> svg {<br /> position: absolute;<br /> }<br /> <br /> @keyframes move {<br /> 0%, 100% {<br /> transform: translate(370px);<br /> }<br /> <br /> 50% {<br /> transform: translate(-370px);<br /> }<br /> }<br /> <br /> @keyframes drop_effect {<br /> 0% {<br /> left: 0px;<br /> }<br /> 5% {<br /> left: 35px;<br /> }<br /> 45% {<br /> left: 0px;<br /> }<br /> 50% {<br /> left: 0px;<br /> }<br /> 55% {<br /> left: -30px;<br /> }<br /> 95% {<br /> left: 0px;<br /> }<br /> 100% {<br /> left: 0;<br /> }<br /> }<br /> .please {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> .no {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> padding-top: 5px;<br /> }<br /> .paper {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> .music {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> .breast {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> .geza {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> <br /> .thank {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> padding-top: 5px;<br /> }<br /> <br /> .funny {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #knowing {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 28vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> text-decoration: underline red;<br /> <br /> }<br /> <br /> #guilty {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-20deg); }<br /> 15% { transform: skewX(20deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #say {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> #anything { <br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> padding-right: 600px;<br /> }<br /> #elbows {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #stares1 {position: relative;<br /> text-transform: lowercase;<br /> font-size: 8vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> align-items: left;<br /> justify-content: left;<br /> animation: .1s shake1 infinite;<br /> }<br /> @keyframes shake1 {<br /> 30% { transform: skewX(-20deg); }<br /> 10% {transform: skewY(-70deg);}<br /> 30% { transform: skewX(20deg); }<br /> <br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #anda {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> <br /> #why {position: relative;<br /> text-transform: lowercase;<br /> font-size: 15vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> filter: blur(2px);<br /> }<br /> <br /> #unreel {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> <br /> filter: blur(1px);<br /> }<br /> #place { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> <br /> }<br /> <br /> #change {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #metro {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> animation: .1s shake2 infinite;<br /> }<br /> @keyframes shake2 {<br /> 30% { transform: skewX(-20deg); }<br /> 10% {transform: skewY(-70deg);}<br /> 30% { transform: skewX(20deg); }<br /> <br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> <br /> #sad {position: relative;<br /> text-transform: lowercase;<br /> font-size: 8vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #wrong { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-20deg); }<br /> 15% { transform: skewX(20deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #voice {position: relative;<br /> text-transform: uppercase;<br /> font-size: 4vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 10px;<br /> <br /> }<br /> #high {position: relative;<br /> text-transform: uppercase;<br /> font-size: 3vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br /> }<br /> <br /> #horsed {position: relative;<br /> text-transform: uppercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 1Opx;<br /> padding-bottom: 10px;<br /> }<br /> #scared {position: relative;<br /> text-transform: uppercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 1px;<br /> padding-bottom: 1px;<br /> }<br /> #run {position: relative;<br /> text-transform: uppercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-left: 625px;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br /> writing-mode: vertical-lr;<br /> text-orientation: upright;<br /> }<br /> <br /> #cry { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #make {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #sth {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #liars {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> }<br /> <br /> ===code HTML===<br /> <br /> {&lt;!DOCTYPE html&gt;<br /> &lt;html&gt; <br /> &lt;head&gt; <br /> &lt;meta charset=&quot;utf=8&quot;&gt;<br /> &lt;title&gt; scroll2 &lt;/title&gt;<br /> &lt;link rel=&quot;stylesheet&quot; href=&quot;concerto2.css&quot;&gt;<br /> <br /> &lt;script type=&quot;text/javascript&quot; src=&quot;concerto22.js&quot;&gt;&lt;/script&gt;<br /> <br /> &lt;/head&gt;<br /> &lt;body&gt; <br /> <br /> &lt;p&gt;&quot; Stop shaking stupid, stupid. Breathe.&quot; &lt;/p&gt;<br /> <br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee1&quot;&gt;you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee2&quot;&gt;mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;wine1&quot;&gt;he wants a glass of &lt;/div&gt;<br /> &lt;div class=&quot;container&quot;&gt;<br /> &lt;span&gt;red wine&lt;/span&gt;<br /> &lt;span class=&quot;drop&quot;&gt;&lt;/span&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;svg&gt;<br /> &lt;defs&gt;<br /> &lt;filter id=&quot;gooey&quot;&gt;<br /> &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;5&quot; result=&quot;blur&quot;/&gt;<br /> &lt;feColorMatrix in=&quot;blur&quot; values=&quot;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -20&quot; result=&quot;gooey&quot; /&gt;<br /> &lt;feComposite in=&quot;SourceGraphic&quot; in2=&quot;gooey&quot; operator=&quot;atop&quot; /&gt;<br /> &lt;/filter&gt;<br /> &lt;/defs&gt;<br /> &lt;/svg&gt;<br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;a coffee please&quot;&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;no wine?&quot;&lt;/div&gt;<br /> &lt;div class=&quot;paper&quot;&gt; I tell him I have to write a paper, he doesn't want to hear. Deaf.&lt;/div&gt;<br /> &lt;div class=&quot;music revealLeft&quot;&gt;&quot;One must feel the music reinveted from inside&quot;&lt;/div&gt; <br /> &lt;div class=&quot;breast&quot;&gt;He talks to my breast.&lt;/div&gt; <br /> &lt;div class=&quot;geza revealLeft&quot;&gt;&quot;Géza Anda, 1969, I'll play it for you at my place.&quot;&lt;/div&gt; <br /> &lt;div class=&quot;thank revealRight&quot;&gt;&quot;No, thank you, I really have to work.&quot; &lt;/div&gt;<br /> &lt;div class=&quot;funny&quot;&gt;I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ?&lt;/div&gt; <br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div id=&quot;knowing&quot;&gt;A knowing superior look&lt;/div&gt; <br /> &lt;div id=&quot;guilty&quot;&gt;I felt ashamed, guilty.&lt;/div&gt;<br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;say&quot;&gt;That's what people say, don't they ?&lt;/div&gt; <br /> &lt;div id=&quot;anything&quot;&gt;&quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;&lt;/div&gt;<br /> <br /> &lt;div id=&quot;elbows&quot;&gt;His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. &lt;/div&gt; <br /> <br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> <br /> <br /> &lt;div id=&quot;anda&quot;&gt;The Geza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. &lt;/div&gt;<br /> &lt;div id=&quot;why&quot;&gt;why?&lt;/div&gt;<br /> <br /> &lt;div id=&quot;unreel&quot;&gt;Laughing makes it unreel. It's not happening. &lt;/div&gt; <br /> &lt;div id=&quot;place&quot;&gt;He talks about going to his place again.&lt;/div&gt;<br /> &lt;div class =&quot;please revealLeft&quot;&gt;&quot;No, thank you, I can't.&quot;&lt;/div&gt;<br /> &lt;div id=&quot;change&quot;&gt;His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.&lt;/div&gt;<br /> &lt;div id=&quot;metro&quot;&gt;He walks me to the metro, he pushes again&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;Are you sure?&quot;&lt;/div&gt; <br /> &lt;div id=&quot;sad&quot;&gt;A sad smile. As if I've let him down. &lt;/div&gt; <br /> &lt;div id=&quot;wrong&quot;&gt;as if I've wronged him. &lt;/div&gt; <br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;Goodbye&quot;&lt;/div&gt;<br /> &lt;div id=&quot;voice&quot;&gt;Not my voice&lt;/div&gt;<br /> &lt;div id=&quot;high&quot;&gt;high&lt;/div&gt; <br /> &lt;div id=&quot;horsed&quot;&gt;horsed&lt;/div&gt; <br /> &lt;div id=&quot;scared&quot;&gt;scared&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt; <br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;cry&quot;&gt; Nothing happened and I feel like crying.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;make&quot;&gt;They say it's nothing to make me nothing.&lt;/div&gt; <br /> &lt;div id=&quot;sth&quot;&gt;it's something&lt;/div&gt;<br /> &lt;div id=&quot;liars&quot;&gt;They're liars.&lt;/div&gt;<br /> <br /> <br /> &lt;/body&gt;<br /> <br /> &lt;/html&gt;}<br /> <br /> === code JavaScript===<br /> {<br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> }<br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3547 2021-12-22T12:54:10Z

<p>Camille.opdebeeck : </p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> ===Code CSS===<br /> '''<br /> body {<br /> background-color: solid black;<br /> <br /> }<br /> .revealLeft{<br /> opacity: 0;<br /> }<br /> .revealLeft.active{<br /> opacity: 1;<br /> animation: 1s slide-right 1s forwards;<br /> transform:translateX(-110%);<br /> }<br /> @keyframes slide-right{<br /> to {<br /> transform:translateX(0);<br /> }<br /> }<br /> <br /> .revealRight{<br /> opacity: 0;<br /> }<br /> .revealRight.active{<br /> opacity: 1;<br /> animation: 1s slide-right 1s forwards;<br /> transform:translateX(110%);<br /> }<br /> @keyframes slide-right{<br /> to {<br /> transform:translateX(0);<br /> }<br /> }<br /> <br /> p {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw;<br /> font-weight: 900;<br /> text-decoration: none;<br /> color: rgb(0, 0, 0);<br /> display: inline-block;<br /> background-size: 120% 100%;<br /> <br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-15deg); }<br /> 15% { transform: skewX(15deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> <br /> #Nothing1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(1px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 300px;<br /> padding-bottom: 50px;<br /> }<br /> <br /> #Nothing2 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(2px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing3 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(3px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing4 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(4px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> <br /> #Nothing5 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(5px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing6 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(6px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing7 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(7px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing8 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(8px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-bottom: 100px;<br /> }<br /> <br /> #coffee1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #coffee2 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> padding-left: 520px;<br /> padding-right: 20px;}<br /> <br /> #wine1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> color: rgb(168, 11, 11);<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> .container {<br /> filter: url('#gooey');<br /> display: flex;<br /> justify-content: center;<br /> align-items: center;<br /> color: rgb(168, 11, 11);<br /> }<br /> <br /> .liquid-1 {<br /> position: relative;<br /> }<br /> <br /> span {<br /> letter-spacing: 10px;<br /> font-size: 8rem;<br /> }<br /> <br /> .drop {<br /> position: absolute;<br /> background: var(--yellow);<br /> width: 22px;<br /> height: 22px;<br /> border-radius: 60% 70% 50% 60% / 65% 66% 60% 65%;<br /> animation: 6s move ease infinite;<br /> }<br /> <br /> .drop:after {<br /> width: 17px;<br /> height: 17px;<br /> content: '';<br /> position: absolute;<br /> background: var(--yellow);<br /> border-radius: 50% 60% 60% 70% / 60% 65% 65% 65%;<br /> left: 25px;<br /> top: 3px;<br /> animation: 6s drop_effect ease infinite;<br /> }<br /> <br /> svg {<br /> position: absolute;<br /> }<br /> <br /> @keyframes move {<br /> 0%, 100% {<br /> transform: translate(370px);<br /> }<br /> <br /> 50% {<br /> transform: translate(-370px);<br /> }<br /> }<br /> <br /> @keyframes drop_effect {<br /> 0% {<br /> left: 0px;<br /> }<br /> 5% {<br /> left: 35px;<br /> }<br /> 45% {<br /> left: 0px;<br /> }<br /> 50% {<br /> left: 0px;<br /> }<br /> 55% {<br /> left: -30px;<br /> }<br /> 95% {<br /> left: 0px;<br /> }<br /> 100% {<br /> left: 0;<br /> }<br /> }<br /> .please {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> .no {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> padding-top: 5px;<br /> }<br /> .paper {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> .music {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> .breast {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> .geza {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> <br /> .thank {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> padding-top: 5px;<br /> }<br /> <br /> .funny {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #knowing {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 28vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> text-decoration: underline red;<br /> <br /> }<br /> <br /> #guilty {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-20deg); }<br /> 15% { transform: skewX(20deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #say {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> #anything { <br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> padding-right: 600px;<br /> }<br /> #elbows {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #stares1 {position: relative;<br /> text-transform: lowercase;<br /> font-size: 8vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> align-items: left;<br /> justify-content: left;<br /> animation: .1s shake1 infinite;<br /> }<br /> @keyframes shake1 {<br /> 30% { transform: skewX(-20deg); }<br /> 10% {transform: skewY(-70deg);}<br /> 30% { transform: skewX(20deg); }<br /> <br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #anda {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> <br /> #why {position: relative;<br /> text-transform: lowercase;<br /> font-size: 15vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> filter: blur(2px);<br /> }<br /> <br /> #unreel {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> <br /> filter: blur(1px);<br /> }<br /> #place { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> <br /> }<br /> <br /> #change {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #metro {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> animation: .1s shake2 infinite;<br /> }<br /> @keyframes shake2 {<br /> 30% { transform: skewX(-20deg); }<br /> 10% {transform: skewY(-70deg);}<br /> 30% { transform: skewX(20deg); }<br /> <br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> <br /> #sad {position: relative;<br /> text-transform: lowercase;<br /> font-size: 8vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #wrong { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-20deg); }<br /> 15% { transform: skewX(20deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #voice {position: relative;<br /> text-transform: uppercase;<br /> font-size: 4vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 10px;<br /> <br /> }<br /> #high {position: relative;<br /> text-transform: uppercase;<br /> font-size: 3vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br /> }<br /> <br /> #horsed {position: relative;<br /> text-transform: uppercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 1Opx;<br /> padding-bottom: 10px;<br /> }<br /> #scared {position: relative;<br /> text-transform: uppercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 1px;<br /> padding-bottom: 1px;<br /> }<br /> #run {position: relative;<br /> text-transform: uppercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-left: 625px;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br /> writing-mode: vertical-lr;<br /> text-orientation: upright;<br /> }<br /> <br /> #cry { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #make {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #sth {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #liars {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> '''<br /> <br /> ===code HTML===<br /> <br /> '''&lt;!DOCTYPE html&gt;<br /> &lt;html&gt; <br /> &lt;head&gt; <br /> &lt;meta charset=&quot;utf=8&quot;&gt;<br /> &lt;title&gt; scroll2 &lt;/title&gt;<br /> &lt;link rel=&quot;stylesheet&quot; href=&quot;concerto2.css&quot;&gt;<br /> <br /> &lt;script type=&quot;text/javascript&quot; src=&quot;concerto22.js&quot;&gt;&lt;/script&gt;<br /> <br /> &lt;/head&gt;<br /> &lt;body&gt; <br /> <br /> &lt;p&gt;&quot; Stop shaking stupid, stupid. Breathe.&quot; &lt;/p&gt;<br /> <br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee1&quot;&gt;you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee2&quot;&gt;mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;wine1&quot;&gt;he wants a glass of &lt;/div&gt;<br /> &lt;div class=&quot;container&quot;&gt;<br /> &lt;span&gt;red wine&lt;/span&gt;<br /> &lt;span class=&quot;drop&quot;&gt;&lt;/span&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;svg&gt;<br /> &lt;defs&gt;<br /> &lt;filter id=&quot;gooey&quot;&gt;<br /> &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;5&quot; result=&quot;blur&quot;/&gt;<br /> &lt;feColorMatrix in=&quot;blur&quot; values=&quot;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -20&quot; result=&quot;gooey&quot; /&gt;<br /> &lt;feComposite in=&quot;SourceGraphic&quot; in2=&quot;gooey&quot; operator=&quot;atop&quot; /&gt;<br /> &lt;/filter&gt;<br /> &lt;/defs&gt;<br /> &lt;/svg&gt;<br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;a coffee please&quot;&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;no wine?&quot;&lt;/div&gt;<br /> &lt;div class=&quot;paper&quot;&gt; I tell him I have to write a paper, he doesn't want to hear. Deaf.&lt;/div&gt;<br /> &lt;div class=&quot;music revealLeft&quot;&gt;&quot;One must feel the music reinveted from inside&quot;&lt;/div&gt; <br /> &lt;div class=&quot;breast&quot;&gt;He talks to my breast.&lt;/div&gt; <br /> &lt;div class=&quot;geza revealLeft&quot;&gt;&quot;Géza Anda, 1969, I'll play it for you at my place.&quot;&lt;/div&gt; <br /> &lt;div class=&quot;thank revealRight&quot;&gt;&quot;No, thank you, I really have to work.&quot; &lt;/div&gt;<br /> &lt;div class=&quot;funny&quot;&gt;I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ?&lt;/div&gt; <br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div id=&quot;knowing&quot;&gt;A knowing superior look&lt;/div&gt; <br /> &lt;div id=&quot;guilty&quot;&gt;I felt ashamed, guilty.&lt;/div&gt;<br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;say&quot;&gt;That's what people say, don't they ?&lt;/div&gt; <br /> &lt;div id=&quot;anything&quot;&gt;&quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;&lt;/div&gt;<br /> <br /> &lt;div id=&quot;elbows&quot;&gt;His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. &lt;/div&gt; <br /> <br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> <br /> <br /> &lt;div id=&quot;anda&quot;&gt;The Geza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. &lt;/div&gt;<br /> &lt;div id=&quot;why&quot;&gt;why?&lt;/div&gt;<br /> <br /> &lt;div id=&quot;unreel&quot;&gt;Laughing makes it unreel. It's not happening. &lt;/div&gt; <br /> &lt;div id=&quot;place&quot;&gt;He talks about going to his place again.&lt;/div&gt;<br /> &lt;div class =&quot;please revealLeft&quot;&gt;&quot;No, thank you, I can't.&quot;&lt;/div&gt;<br /> &lt;div id=&quot;change&quot;&gt;His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.&lt;/div&gt;<br /> &lt;div id=&quot;metro&quot;&gt;He walks me to the metro, he pushes again&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;Are you sure?&quot;&lt;/div&gt; <br /> &lt;div id=&quot;sad&quot;&gt;A sad smile. As if I've let him down. &lt;/div&gt; <br /> &lt;div id=&quot;wrong&quot;&gt;as if I've wronged him. &lt;/div&gt; <br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;Goodbye&quot;&lt;/div&gt;<br /> &lt;div id=&quot;voice&quot;&gt;Not my voice&lt;/div&gt;<br /> &lt;div id=&quot;high&quot;&gt;high&lt;/div&gt; <br /> &lt;div id=&quot;horsed&quot;&gt;horsed&lt;/div&gt; <br /> &lt;div id=&quot;scared&quot;&gt;scared&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt; <br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;cry&quot;&gt; Nothing happened and I feel like crying.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;make&quot;&gt;They say it's nothing to make me nothing.&lt;/div&gt; <br /> &lt;div id=&quot;sth&quot;&gt;it's something&lt;/div&gt;<br /> &lt;div id=&quot;liars&quot;&gt;They're liars.&lt;/div&gt;<br /> <br /> <br /> &lt;/body&gt;<br /> <br /> &lt;/html&gt;'''<br /> <br /> === code JavaScript===<br /> '''<br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> '''<br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3546 2021-12-22T12:53:07Z

<p>Camille.opdebeeck : </p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> ===Code CSS===<br /> <br /> body {<br /> background-color: solid black;<br /> <br /> }<br /> .revealLeft{<br /> opacity: 0;<br /> }<br /> .revealLeft.active{<br /> opacity: 1;<br /> animation: 1s slide-right 1s forwards;<br /> transform:translateX(-110%);<br /> }<br /> @keyframes slide-right{<br /> to {<br /> transform:translateX(0);<br /> }<br /> }<br /> <br /> .revealRight{<br /> opacity: 0;<br /> }<br /> .revealRight.active{<br /> opacity: 1;<br /> animation: 1s slide-right 1s forwards;<br /> transform:translateX(110%);<br /> }<br /> @keyframes slide-right{<br /> to {<br /> transform:translateX(0);<br /> }<br /> }<br /> <br /> p {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw;<br /> font-weight: 900;<br /> text-decoration: none;<br /> color: rgb(0, 0, 0);<br /> display: inline-block;<br /> background-size: 120% 100%;<br /> <br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-15deg); }<br /> 15% { transform: skewX(15deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> <br /> #Nothing1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(1px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 300px;<br /> padding-bottom: 50px;<br /> }<br /> <br /> #Nothing2 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(2px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing3 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(3px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing4 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(4px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> <br /> #Nothing5 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(5px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing6 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(6px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing7 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(7px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing8 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(8px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-bottom: 100px;<br /> }<br /> <br /> #coffee1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #coffee2 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> padding-left: 520px;<br /> padding-right: 20px;}<br /> <br /> #wine1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> color: rgb(168, 11, 11);<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> .container {<br /> filter: url('#gooey');<br /> display: flex;<br /> justify-content: center;<br /> align-items: center;<br /> color: rgb(168, 11, 11);<br /> }<br /> <br /> .liquid-1 {<br /> position: relative;<br /> }<br /> <br /> span {<br /> letter-spacing: 10px;<br /> font-size: 8rem;<br /> }<br /> <br /> .drop {<br /> position: absolute;<br /> background: var(--yellow);<br /> width: 22px;<br /> height: 22px;<br /> border-radius: 60% 70% 50% 60% / 65% 66% 60% 65%;<br /> animation: 6s move ease infinite;<br /> }<br /> <br /> .drop:after {<br /> width: 17px;<br /> height: 17px;<br /> content: '';<br /> position: absolute;<br /> background: var(--yellow);<br /> border-radius: 50% 60% 60% 70% / 60% 65% 65% 65%;<br /> left: 25px;<br /> top: 3px;<br /> animation: 6s drop_effect ease infinite;<br /> }<br /> <br /> svg {<br /> position: absolute;<br /> }<br /> <br /> @keyframes move {<br /> 0%, 100% {<br /> transform: translate(370px);<br /> }<br /> <br /> 50% {<br /> transform: translate(-370px);<br /> }<br /> }<br /> <br /> @keyframes drop_effect {<br /> 0% {<br /> left: 0px;<br /> }<br /> 5% {<br /> left: 35px;<br /> }<br /> 45% {<br /> left: 0px;<br /> }<br /> 50% {<br /> left: 0px;<br /> }<br /> 55% {<br /> left: -30px;<br /> }<br /> 95% {<br /> left: 0px;<br /> }<br /> 100% {<br /> left: 0;<br /> }<br /> }<br /> .please {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> .no {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> padding-top: 5px;<br /> }<br /> .paper {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> .music {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> .breast {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> .geza {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> <br /> .thank {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> padding-top: 5px;<br /> }<br /> <br /> .funny {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #knowing {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 28vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> text-decoration: underline red;<br /> <br /> }<br /> <br /> #guilty {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-20deg); }<br /> 15% { transform: skewX(20deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #say {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> #anything { <br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> padding-right: 600px;<br /> }<br /> #elbows {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #stares1 {position: relative;<br /> text-transform: lowercase;<br /> font-size: 8vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> align-items: left;<br /> justify-content: left;<br /> animation: .1s shake1 infinite;<br /> }<br /> @keyframes shake1 {<br /> 30% { transform: skewX(-20deg); }<br /> 10% {transform: skewY(-70deg);}<br /> 30% { transform: skewX(20deg); }<br /> <br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #anda {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> <br /> #why {position: relative;<br /> text-transform: lowercase;<br /> font-size: 15vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> filter: blur(2px);<br /> }<br /> <br /> #unreel {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> <br /> filter: blur(1px);<br /> }<br /> #place { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> <br /> }<br /> <br /> #change {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #metro {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> animation: .1s shake2 infinite;<br /> }<br /> @keyframes shake2 {<br /> 30% { transform: skewX(-20deg); }<br /> 10% {transform: skewY(-70deg);}<br /> 30% { transform: skewX(20deg); }<br /> <br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> <br /> #sad {position: relative;<br /> text-transform: lowercase;<br /> font-size: 8vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #wrong { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-20deg); }<br /> 15% { transform: skewX(20deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #voice {position: relative;<br /> text-transform: uppercase;<br /> font-size: 4vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 10px;<br /> <br /> }<br /> #high {position: relative;<br /> text-transform: uppercase;<br /> font-size: 3vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br /> }<br /> <br /> #horsed {position: relative;<br /> text-transform: uppercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 1Opx;<br /> padding-bottom: 10px;<br /> }<br /> #scared {position: relative;<br /> text-transform: uppercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 1px;<br /> padding-bottom: 1px;<br /> }<br /> #run {position: relative;<br /> text-transform: uppercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-left: 625px;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br /> writing-mode: vertical-lr;<br /> text-orientation: upright;<br /> }<br /> <br /> #cry { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #make {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #sth {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #liars {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> <br /> <br /> ===code HTML===<br /> <br /> &lt;!DOCTYPE html&gt;<br /> &lt;html&gt; <br /> &lt;head&gt; <br /> &lt;meta charset=&quot;utf=8&quot;&gt;<br /> &lt;title&gt; scroll2 &lt;/title&gt;<br /> &lt;link rel=&quot;stylesheet&quot; href=&quot;concerto2.css&quot;&gt;<br /> <br /> &lt;script type=&quot;text/javascript&quot; src=&quot;concerto22.js&quot;&gt;&lt;/script&gt;<br /> <br /> &lt;/head&gt;<br /> &lt;body&gt; <br /> <br /> &lt;p&gt;&quot; Stop shaking stupid, stupid. Breathe.&quot; &lt;/p&gt;<br /> <br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee1&quot;&gt;you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee2&quot;&gt;mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;wine1&quot;&gt;he wants a glass of &lt;/div&gt;<br /> &lt;div class=&quot;container&quot;&gt;<br /> &lt;span&gt;red wine&lt;/span&gt;<br /> &lt;span class=&quot;drop&quot;&gt;&lt;/span&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;svg&gt;<br /> &lt;defs&gt;<br /> &lt;filter id=&quot;gooey&quot;&gt;<br /> &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;5&quot; result=&quot;blur&quot;/&gt;<br /> &lt;feColorMatrix in=&quot;blur&quot; values=&quot;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -20&quot; result=&quot;gooey&quot; /&gt;<br /> &lt;feComposite in=&quot;SourceGraphic&quot; in2=&quot;gooey&quot; operator=&quot;atop&quot; /&gt;<br /> &lt;/filter&gt;<br /> &lt;/defs&gt;<br /> &lt;/svg&gt;<br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;a coffee please&quot;&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;no wine?&quot;&lt;/div&gt;<br /> &lt;div class=&quot;paper&quot;&gt; I tell him I have to write a paper, he doesn't want to hear. Deaf.&lt;/div&gt;<br /> &lt;div class=&quot;music revealLeft&quot;&gt;&quot;One must feel the music reinveted from inside&quot;&lt;/div&gt; <br /> &lt;div class=&quot;breast&quot;&gt;He talks to my breast.&lt;/div&gt; <br /> &lt;div class=&quot;geza revealLeft&quot;&gt;&quot;Géza Anda, 1969, I'll play it for you at my place.&quot;&lt;/div&gt; <br /> &lt;div class=&quot;thank revealRight&quot;&gt;&quot;No, thank you, I really have to work.&quot; &lt;/div&gt;<br /> &lt;div class=&quot;funny&quot;&gt;I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ?&lt;/div&gt; <br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div id=&quot;knowing&quot;&gt;A knowing superior look&lt;/div&gt; <br /> &lt;div id=&quot;guilty&quot;&gt;I felt ashamed, guilty.&lt;/div&gt;<br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;say&quot;&gt;That's what people say, don't they ?&lt;/div&gt; <br /> &lt;div id=&quot;anything&quot;&gt;&quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;&lt;/div&gt;<br /> <br /> &lt;div id=&quot;elbows&quot;&gt;His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. &lt;/div&gt; <br /> <br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> <br /> <br /> &lt;div id=&quot;anda&quot;&gt;The Geza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. &lt;/div&gt;<br /> &lt;div id=&quot;why&quot;&gt;why?&lt;/div&gt;<br /> <br /> &lt;div id=&quot;unreel&quot;&gt;Laughing makes it unreel. It's not happening. &lt;/div&gt; <br /> &lt;div id=&quot;place&quot;&gt;He talks about going to his place again.&lt;/div&gt;<br /> &lt;div class =&quot;please revealLeft&quot;&gt;&quot;No, thank you, I can't.&quot;&lt;/div&gt;<br /> &lt;div id=&quot;change&quot;&gt;His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.&lt;/div&gt;<br /> &lt;div id=&quot;metro&quot;&gt;He walks me to the metro, he pushes again&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;Are you sure?&quot;&lt;/div&gt; <br /> &lt;div id=&quot;sad&quot;&gt;A sad smile. As if I've let him down. &lt;/div&gt; <br /> &lt;div id=&quot;wrong&quot;&gt;as if I've wronged him. &lt;/div&gt; <br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;Goodbye&quot;&lt;/div&gt;<br /> &lt;div id=&quot;voice&quot;&gt;Not my voice&lt;/div&gt;<br /> &lt;div id=&quot;high&quot;&gt;high&lt;/div&gt; <br /> &lt;div id=&quot;horsed&quot;&gt;horsed&lt;/div&gt; <br /> &lt;div id=&quot;scared&quot;&gt;scared&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt; <br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;cry&quot;&gt; Nothing happened and I feel like crying.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;make&quot;&gt;They say it's nothing to make me nothing.&lt;/div&gt; <br /> &lt;div id=&quot;sth&quot;&gt;it's something&lt;/div&gt;<br /> &lt;div id=&quot;liars&quot;&gt;They're liars.&lt;/div&gt;<br /> <br /> <br /> &lt;/body&gt;<br /> <br /> &lt;/html&gt;<br /> <br /> === code JavaScript===<br /> '''<br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> '''<br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3545 2021-12-22T12:50:04Z

<p>Camille.opdebeeck : </p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> ===Code CSS===<br /> &lt;nowiki&gt;<br /> body {<br /> background-color: solid black;<br /> <br /> }<br /> .revealLeft{<br /> opacity: 0;<br /> }<br /> .revealLeft.active{<br /> opacity: 1;<br /> animation: 1s slide-right 1s forwards;<br /> transform:translateX(-110%);<br /> }<br /> @keyframes slide-right{<br /> to {<br /> transform:translateX(0);<br /> }<br /> }<br /> <br /> .revealRight{<br /> opacity: 0;<br /> }<br /> .revealRight.active{<br /> opacity: 1;<br /> animation: 1s slide-right 1s forwards;<br /> transform:translateX(110%);<br /> }<br /> @keyframes slide-right{<br /> to {<br /> transform:translateX(0);<br /> }<br /> }<br /> <br /> p {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw;<br /> font-weight: 900;<br /> text-decoration: none;<br /> color: rgb(0, 0, 0);<br /> display: inline-block;<br /> background-size: 120% 100%;<br /> <br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-15deg); }<br /> 15% { transform: skewX(15deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> <br /> #Nothing1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(1px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 300px;<br /> padding-bottom: 50px;<br /> }<br /> <br /> #Nothing2 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(2px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing3 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(3px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing4 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(4px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> <br /> #Nothing5 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(5px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing6 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(6px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing7 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(7px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing8 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(8px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-bottom: 100px;<br /> }<br /> <br /> #coffee1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #coffee2 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> padding-left: 520px;<br /> padding-right: 20px;}<br /> <br /> #wine1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> color: rgb(168, 11, 11);<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> .container {<br /> filter: url('#gooey');<br /> display: flex;<br /> justify-content: center;<br /> align-items: center;<br /> color: rgb(168, 11, 11);<br /> }<br /> <br /> .liquid-1 {<br /> position: relative;<br /> }<br /> <br /> span {<br /> letter-spacing: 10px;<br /> font-size: 8rem;<br /> }<br /> <br /> .drop {<br /> position: absolute;<br /> background: var(--yellow);<br /> width: 22px;<br /> height: 22px;<br /> border-radius: 60% 70% 50% 60% / 65% 66% 60% 65%;<br /> animation: 6s move ease infinite;<br /> }<br /> <br /> .drop:after {<br /> width: 17px;<br /> height: 17px;<br /> content: '';<br /> position: absolute;<br /> background: var(--yellow);<br /> border-radius: 50% 60% 60% 70% / 60% 65% 65% 65%;<br /> left: 25px;<br /> top: 3px;<br /> animation: 6s drop_effect ease infinite;<br /> }<br /> <br /> svg {<br /> position: absolute;<br /> }<br /> <br /> @keyframes move {<br /> 0%, 100% {<br /> transform: translate(370px);<br /> }<br /> <br /> 50% {<br /> transform: translate(-370px);<br /> }<br /> }<br /> <br /> @keyframes drop_effect {<br /> 0% {<br /> left: 0px;<br /> }<br /> 5% {<br /> left: 35px;<br /> }<br /> 45% {<br /> left: 0px;<br /> }<br /> 50% {<br /> left: 0px;<br /> }<br /> 55% {<br /> left: -30px;<br /> }<br /> 95% {<br /> left: 0px;<br /> }<br /> 100% {<br /> left: 0;<br /> }<br /> }<br /> .please {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> .no {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> padding-top: 5px;<br /> }<br /> .paper {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> .music {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> .breast {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> .geza {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> <br /> .thank {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> padding-top: 5px;<br /> }<br /> <br /> .funny {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #knowing {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 28vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> text-decoration: underline red;<br /> <br /> }<br /> <br /> #guilty {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-20deg); }<br /> 15% { transform: skewX(20deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #say {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> #anything { <br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> padding-right: 600px;<br /> }<br /> #elbows {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #stares1 {position: relative;<br /> text-transform: lowercase;<br /> font-size: 8vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> align-items: left;<br /> justify-content: left;<br /> animation: .1s shake1 infinite;<br /> }<br /> @keyframes shake1 {<br /> 30% { transform: skewX(-20deg); }<br /> 10% {transform: skewY(-70deg);}<br /> 30% { transform: skewX(20deg); }<br /> <br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #anda {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> <br /> #why {position: relative;<br /> text-transform: lowercase;<br /> font-size: 15vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> filter: blur(2px);<br /> }<br /> <br /> #unreel {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> <br /> filter: blur(1px);<br /> }<br /> #place { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> <br /> }<br /> <br /> #change {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #metro {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> animation: .1s shake2 infinite;<br /> }<br /> @keyframes shake2 {<br /> 30% { transform: skewX(-20deg); }<br /> 10% {transform: skewY(-70deg);}<br /> 30% { transform: skewX(20deg); }<br /> <br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> <br /> #sad {position: relative;<br /> text-transform: lowercase;<br /> font-size: 8vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #wrong { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-20deg); }<br /> 15% { transform: skewX(20deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #voice {position: relative;<br /> text-transform: uppercase;<br /> font-size: 4vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 10px;<br /> <br /> }<br /> #high {position: relative;<br /> text-transform: uppercase;<br /> font-size: 3vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br /> }<br /> <br /> #horsed {position: relative;<br /> text-transform: uppercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 1Opx;<br /> padding-bottom: 10px;<br /> }<br /> #scared {position: relative;<br /> text-transform: uppercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 1px;<br /> padding-bottom: 1px;<br /> }<br /> #run {position: relative;<br /> text-transform: uppercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-left: 625px;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br /> writing-mode: vertical-lr;<br /> text-orientation: upright;<br /> }<br /> <br /> #cry { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #make {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #sth {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #liars {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> &lt;/nowiki&gt;<br /> <br /> ===code HTML===<br /> &lt;!DOCTYPE html&gt;<br /> &lt;html&gt; <br /> &lt;head&gt; <br /> <br /> &lt;meta charset=&quot;utf=8&quot;&gt;<br /> &lt;title&gt; scroll2 &lt;/title&gt;<br /> &lt;link rel=&quot;stylesheet&quot; href=&quot;concerto2.css&quot;&gt;<br /> <br /> &lt;script type=&quot;text/javascript&quot; src=&quot;concerto22.js&quot;&gt;&lt;/script&gt;<br /> <br /> &lt;/head&gt;<br /> &lt;body&gt; <br /> <br /> &lt;p&gt;&quot; Stop shaking stupid, stupid. Breathe.&quot; &lt;/p&gt;<br /> <br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee1&quot;&gt;you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee2&quot;&gt;mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;wine1&quot;&gt;he wants a glass of &lt;/div&gt;<br /> &lt;div class=&quot;container&quot;&gt;<br /> &lt;span&gt;red wine&lt;/span&gt;<br /> &lt;span class=&quot;drop&quot;&gt;&lt;/span&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;svg&gt;<br /> &lt;defs&gt;<br /> &lt;filter id=&quot;gooey&quot;&gt;<br /> &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;5&quot; result=&quot;blur&quot;/&gt;<br /> &lt;feColorMatrix in=&quot;blur&quot; values=&quot;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -20&quot; result=&quot;gooey&quot; /&gt;<br /> &lt;feComposite in=&quot;SourceGraphic&quot; in2=&quot;gooey&quot; operator=&quot;atop&quot; /&gt;<br /> &lt;/filter&gt;<br /> &lt;/defs&gt;<br /> &lt;/svg&gt;<br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;a coffee please&quot;&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;no wine?&quot;&lt;/div&gt;<br /> &lt;div class=&quot;paper&quot;&gt; I tell him I have to write a paper, he doesn't want to hear. Deaf.&lt;/div&gt;<br /> &lt;div class=&quot;music revealLeft&quot;&gt;&quot;One must feel the music reinveted from inside&quot;&lt;/div&gt; <br /> &lt;div class=&quot;breast&quot;&gt;He talks to my breast.&lt;/div&gt; <br /> &lt;div class=&quot;geza revealLeft&quot;&gt;&quot;Géza Anda, 1969, I'll play it for you at my place.&quot;&lt;/div&gt; <br /> &lt;div class=&quot;thank revealRight&quot;&gt;&quot;No, thank you, I really have to work.&quot; &lt;/div&gt;<br /> &lt;div class=&quot;funny&quot;&gt;I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ?&lt;/div&gt; <br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div id=&quot;knowing&quot;&gt;A knowing superior look&lt;/div&gt; <br /> &lt;div id=&quot;guilty&quot;&gt;I felt ashamed, guilty.&lt;/div&gt;<br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;say&quot;&gt;That's what people say, don't they ?&lt;/div&gt; <br /> &lt;div id=&quot;anything&quot;&gt;&quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;&lt;/div&gt;<br /> <br /> &lt;div id=&quot;elbows&quot;&gt;His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. &lt;/div&gt; <br /> <br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> <br /> <br /> &lt;div id=&quot;anda&quot;&gt;The Geza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. &lt;/div&gt;<br /> &lt;div id=&quot;why&quot;&gt;why?&lt;/div&gt;<br /> <br /> &lt;div id=&quot;unreel&quot;&gt;Laughing makes it unreel. It's not happening. &lt;/div&gt; <br /> &lt;div id=&quot;place&quot;&gt;He talks about going to his place again.&lt;/div&gt;<br /> &lt;div class =&quot;please revealLeft&quot;&gt;&quot;No, thank you, I can't.&quot;&lt;/div&gt;<br /> &lt;div id=&quot;change&quot;&gt;His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.&lt;/div&gt;<br /> &lt;div id=&quot;metro&quot;&gt;He walks me to the metro, he pushes again&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;Are you sure?&quot;&lt;/div&gt; <br /> &lt;div id=&quot;sad&quot;&gt;A sad smile. As if I've let him down. &lt;/div&gt; <br /> &lt;div id=&quot;wrong&quot;&gt;as if I've wronged him. &lt;/div&gt; <br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;Goodbye&quot;&lt;/div&gt;<br /> &lt;div id=&quot;voice&quot;&gt;Not my voice&lt;/div&gt;<br /> &lt;div id=&quot;high&quot;&gt;high&lt;/div&gt; <br /> &lt;div id=&quot;horsed&quot;&gt;horsed&lt;/div&gt; <br /> &lt;div id=&quot;scared&quot;&gt;scared&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt; <br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;cry&quot;&gt; Nothing happened and I feel like crying.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;make&quot;&gt;They say it's nothing to make me nothing.&lt;/div&gt; <br /> &lt;div id=&quot;sth&quot;&gt;it's something&lt;/div&gt;<br /> &lt;div id=&quot;liars&quot;&gt;They're liars.&lt;/div&gt;<br /> <br /> <br /> &lt;/body&gt;<br /> <br /> &lt;/html&gt;<br /> <br /> === code JavaScript===<br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3544 2021-12-22T12:47:11Z

<p>Camille.opdebeeck : </p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===Étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> ===Code CSS===<br /> body {<br /> background-color: solid black;<br /> <br /> }<br /> .revealLeft{<br /> opacity: 0;<br /> }<br /> .revealLeft.active{<br /> opacity: 1;<br /> animation: 1s slide-right 1s forwards;<br /> transform:translateX(-110%);<br /> }<br /> @keyframes slide-right{<br /> to {<br /> transform:translateX(0);<br /> }<br /> }<br /> <br /> .revealRight{<br /> opacity: 0;<br /> }<br /> .revealRight.active{<br /> opacity: 1;<br /> animation: 1s slide-right 1s forwards;<br /> transform:translateX(110%);<br /> }<br /> @keyframes slide-right{<br /> to {<br /> transform:translateX(0);<br /> }<br /> }<br /> <br /> p {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw;<br /> font-weight: 900;<br /> text-decoration: none;<br /> color: rgb(0, 0, 0);<br /> display: inline-block;<br /> background-size: 120% 100%;<br /> <br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-15deg); }<br /> 15% { transform: skewX(15deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> <br /> #Nothing1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(1px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 300px;<br /> padding-bottom: 50px;<br /> }<br /> <br /> #Nothing2 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(2px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing3 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(3px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing4 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(4px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> <br /> #Nothing5 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(5px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing6 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(6px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing7 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(7px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> }<br /> #Nothing8 {<br /> position: relative;<br /> text-transform: lowercase;<br /> letter-spacing: 6px;<br /> font-size: 2vw; <br /> filter: blur(8px);<br /> transition: 2s;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-bottom: 100px;<br /> }<br /> <br /> #coffee1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #coffee2 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> padding-left: 520px;<br /> padding-right: 20px;}<br /> <br /> #wine1 {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> color: rgb(168, 11, 11);<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> .container {<br /> filter: url('#gooey');<br /> display: flex;<br /> justify-content: center;<br /> align-items: center;<br /> color: rgb(168, 11, 11);<br /> }<br /> <br /> .liquid-1 {<br /> position: relative;<br /> }<br /> <br /> span {<br /> letter-spacing: 10px;<br /> font-size: 8rem;<br /> }<br /> <br /> .drop {<br /> position: absolute;<br /> background: var(--yellow);<br /> width: 22px;<br /> height: 22px;<br /> border-radius: 60% 70% 50% 60% / 65% 66% 60% 65%;<br /> animation: 6s move ease infinite;<br /> }<br /> <br /> .drop:after {<br /> width: 17px;<br /> height: 17px;<br /> content: '';<br /> position: absolute;<br /> background: var(--yellow);<br /> border-radius: 50% 60% 60% 70% / 60% 65% 65% 65%;<br /> left: 25px;<br /> top: 3px;<br /> animation: 6s drop_effect ease infinite;<br /> }<br /> <br /> svg {<br /> position: absolute;<br /> }<br /> <br /> @keyframes move {<br /> 0%, 100% {<br /> transform: translate(370px);<br /> }<br /> <br /> 50% {<br /> transform: translate(-370px);<br /> }<br /> }<br /> <br /> @keyframes drop_effect {<br /> 0% {<br /> left: 0px;<br /> }<br /> 5% {<br /> left: 35px;<br /> }<br /> 45% {<br /> left: 0px;<br /> }<br /> 50% {<br /> left: 0px;<br /> }<br /> 55% {<br /> left: -30px;<br /> }<br /> 95% {<br /> left: 0px;<br /> }<br /> 100% {<br /> left: 0;<br /> }<br /> }<br /> .please {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> .no {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> padding-top: 5px;<br /> }<br /> .paper {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> .music {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> .breast {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> .geza {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> }<br /> <br /> .thank {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> padding-top: 5px;<br /> }<br /> <br /> .funny {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #knowing {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 28vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> text-decoration: underline red;<br /> <br /> }<br /> <br /> #guilty {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-20deg); }<br /> 15% { transform: skewX(20deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #say {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> }<br /> #anything { <br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 5px;<br /> padding-right: 600px;<br /> }<br /> #elbows {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #stares1 {position: relative;<br /> text-transform: lowercase;<br /> font-size: 8vw; <br /> display: flex;<br /> align-items: right;<br /> justify-content: right;<br /> align-items: left;<br /> justify-content: left;<br /> animation: .1s shake1 infinite;<br /> }<br /> @keyframes shake1 {<br /> 30% { transform: skewX(-20deg); }<br /> 10% {transform: skewY(-70deg);}<br /> 30% { transform: skewX(20deg); }<br /> <br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #anda {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> <br /> #why {position: relative;<br /> text-transform: lowercase;<br /> font-size: 15vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> filter: blur(2px);<br /> }<br /> <br /> #unreel {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> <br /> filter: blur(1px);<br /> }<br /> #place { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> <br /> }<br /> <br /> #change {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #metro {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> animation: .1s shake2 infinite;<br /> }<br /> @keyframes shake2 {<br /> 30% { transform: skewX(-20deg); }<br /> 10% {transform: skewY(-70deg);}<br /> 30% { transform: skewX(20deg); }<br /> <br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> <br /> #sad {position: relative;<br /> text-transform: lowercase;<br /> font-size: 8vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> padding-left: 450px;<br /> padding-right: 445px;<br /> }<br /> #wrong { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 50px;<br /> animation: .1s shake infinite;<br /> }<br /> @keyframes shake {<br /> 0% { transform: skewX(-20deg); }<br /> 5% { transform: skewX(20deg); }<br /> 10% { transform: skewX(-20deg); }<br /> 15% { transform: skewX(20deg); }<br /> 20% { transform: skewX(0deg); }<br /> 100% { transform: skewX(0deg); } <br /> }<br /> <br /> #voice {position: relative;<br /> text-transform: uppercase;<br /> font-size: 4vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 50px;<br /> padding-bottom: 10px;<br /> <br /> }<br /> #high {position: relative;<br /> text-transform: uppercase;<br /> font-size: 3vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br /> }<br /> <br /> #horsed {position: relative;<br /> text-transform: uppercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 1Opx;<br /> padding-bottom: 10px;<br /> }<br /> #scared {position: relative;<br /> text-transform: uppercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> padding-top: 1px;<br /> padding-bottom: 1px;<br /> }<br /> #run {position: relative;<br /> text-transform: uppercase;<br /> font-size: 1vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-left: 625px;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br /> writing-mode: vertical-lr;<br /> text-orientation: upright;<br /> }<br /> <br /> #cry { position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #make {position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #sth {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> #liars {<br /> position: relative;<br /> text-transform: lowercase;<br /> font-size: 2vw; <br /> display: flex;<br /> align-items: left;<br /> justify-content: left;<br /> padding-top: 40px;<br /> padding-left: 80px;<br /> padding-right: 80px;<br /> }<br /> <br /> <br /> ===code HTML===<br /> &lt;!DOCTYPE html&gt;<br /> &lt;html&gt; <br /> &lt;head&gt; <br /> <br /> &lt;meta charset=&quot;utf=8&quot;&gt;<br /> &lt;title&gt; scroll2 &lt;/title&gt;<br /> &lt;link rel=&quot;stylesheet&quot; href=&quot;concerto2.css&quot;&gt;<br /> <br /> &lt;script type=&quot;text/javascript&quot; src=&quot;concerto22.js&quot;&gt;&lt;/script&gt;<br /> <br /> &lt;/head&gt;<br /> &lt;body&gt; <br /> <br /> &lt;p&gt;&quot; Stop shaking stupid, stupid. Breathe.&quot; &lt;/p&gt;<br /> <br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. Think. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee1&quot;&gt;you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to &lt;/div&gt;<br /> <br /> &lt;div id=&quot;coffee2&quot;&gt;mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;wine1&quot;&gt;he wants a glass of &lt;/div&gt;<br /> &lt;div class=&quot;container&quot;&gt;<br /> &lt;span&gt;red wine&lt;/span&gt;<br /> &lt;span class=&quot;drop&quot;&gt;&lt;/span&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;svg&gt;<br /> &lt;defs&gt;<br /> &lt;filter id=&quot;gooey&quot;&gt;<br /> &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;5&quot; result=&quot;blur&quot;/&gt;<br /> &lt;feColorMatrix in=&quot;blur&quot; values=&quot;1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -20&quot; result=&quot;gooey&quot; /&gt;<br /> &lt;feComposite in=&quot;SourceGraphic&quot; in2=&quot;gooey&quot; operator=&quot;atop&quot; /&gt;<br /> &lt;/filter&gt;<br /> &lt;/defs&gt;<br /> &lt;/svg&gt;<br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;a coffee please&quot;&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;no wine?&quot;&lt;/div&gt;<br /> &lt;div class=&quot;paper&quot;&gt; I tell him I have to write a paper, he doesn't want to hear. Deaf.&lt;/div&gt;<br /> &lt;div class=&quot;music revealLeft&quot;&gt;&quot;One must feel the music reinveted from inside&quot;&lt;/div&gt; <br /> &lt;div class=&quot;breast&quot;&gt;He talks to my breast.&lt;/div&gt; <br /> &lt;div class=&quot;geza revealLeft&quot;&gt;&quot;Géza Anda, 1969, I'll play it for you at my place.&quot;&lt;/div&gt; <br /> &lt;div class=&quot;thank revealRight&quot;&gt;&quot;No, thank you, I really have to work.&quot; &lt;/div&gt;<br /> &lt;div class=&quot;funny&quot;&gt;I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ?&lt;/div&gt; <br /> <br /> &lt;!--Start Discussion--&gt;<br /> &lt;div id=&quot;knowing&quot;&gt;A knowing superior look&lt;/div&gt; <br /> &lt;div id=&quot;guilty&quot;&gt;I felt ashamed, guilty.&lt;/div&gt;<br /> &lt;div id=&quot;Nothing1&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing2&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing3&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing4&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing5&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing6&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing7&quot;&gt;Nothing happened. &lt;/div&gt;<br /> &lt;div id=&quot;Nothing8&quot;&gt;Nothing happened. &lt;/div&gt;<br /> <br /> &lt;div id=&quot;say&quot;&gt;That's what people say, don't they ?&lt;/div&gt; <br /> &lt;div id=&quot;anything&quot;&gt;&quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;&lt;/div&gt;<br /> <br /> &lt;div id=&quot;elbows&quot;&gt;His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. &lt;/div&gt; <br /> <br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> &lt;div id=&quot;stares1&quot;&gt;Stares. Rubbes. Talks and talks.&lt;/div&gt;<br /> <br /> <br /> &lt;div id=&quot;anda&quot;&gt;The Geza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. &lt;/div&gt;<br /> &lt;div id=&quot;why&quot;&gt;why?&lt;/div&gt;<br /> <br /> &lt;div id=&quot;unreel&quot;&gt;Laughing makes it unreel. It's not happening. &lt;/div&gt; <br /> &lt;div id=&quot;place&quot;&gt;He talks about going to his place again.&lt;/div&gt;<br /> &lt;div class =&quot;please revealLeft&quot;&gt;&quot;No, thank you, I can't.&quot;&lt;/div&gt;<br /> &lt;div id=&quot;change&quot;&gt;His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.&lt;/div&gt;<br /> &lt;div id=&quot;metro&quot;&gt;He walks me to the metro, he pushes again&lt;/div&gt;<br /> &lt;div class=&quot;no revealRight&quot;&gt;&quot;Are you sure?&quot;&lt;/div&gt; <br /> &lt;div id=&quot;sad&quot;&gt;A sad smile. As if I've let him down. &lt;/div&gt; <br /> &lt;div id=&quot;wrong&quot;&gt;as if I've wronged him. &lt;/div&gt; <br /> &lt;div class=&quot;please revealLeft&quot;&gt;&quot;Goodbye&quot;&lt;/div&gt;<br /> &lt;div id=&quot;voice&quot;&gt;Not my voice&lt;/div&gt;<br /> &lt;div id=&quot;high&quot;&gt;high&lt;/div&gt; <br /> &lt;div id=&quot;horsed&quot;&gt;horsed&lt;/div&gt; <br /> &lt;div id=&quot;scared&quot;&gt;scared&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt; <br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;run&quot;&gt;I run&lt;/div&gt;<br /> &lt;div id=&quot;cry&quot;&gt; Nothing happened and I feel like crying.&lt;/div&gt;<br /> <br /> &lt;div id=&quot;make&quot;&gt;They say it's nothing to make me nothing.&lt;/div&gt; <br /> &lt;div id=&quot;sth&quot;&gt;it's something&lt;/div&gt;<br /> &lt;div id=&quot;liars&quot;&gt;They're liars.&lt;/div&gt;<br /> <br /> <br /> &lt;/body&gt;<br /> <br /> &lt;/html&gt;<br /> <br /> === code JavaScript===<br /> <br /> function revealLeft() {<br /> var reveals = document.querySelectorAll(&quot;.revealLeft&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> <br /> function revealRight() {<br /> var reveals = document.querySelectorAll(&quot;.revealRight&quot;);<br /> for (var i = 0; i &lt; reveals.length; i++) {<br /> var windowHeight = window.innerHeight;<br /> var elementTop = reveals[i].getBoundingClientRect().top;<br /> var elementVisible = 150;<br /> if (elementTop &lt; windowHeight - elementVisible) {<br /> reveals[i].classList.add(&quot;active&quot;);<br /> } else {<br /> reveals[i].classList.remove(&quot;active&quot;);<br /> }<br /> }<br /> }<br /> window.addEventListener(&quot;scroll&quot;, revealLeft);<br /> window.addEventListener(&quot;scroll&quot;, revealRight);<br /> <br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3543 2021-12-22T12:10:24Z

<p>Camille.opdebeeck : </p> <hr /> <div>==exercice de fin de quadrimestre 2021==<br /> ===texte choisi===<br /> retranscription de l'audio de la vidéo &quot;concerto&quot; Arte dans la série H24<br /> <br /> &quot; Stop shaking stupid, stupid. Breathe.&quot;<br /> Nothing happened. Think. you didn't want to go. &quot;a Coffee&quot; ? <br /> you said &quot;OK&quot;, polite, polite because he's old, older than you father. A teacher.<br /> Rinkles in his faces deep from nose to mouth. Old. A cut over his lip, dried blood. <br /> I kept looking at it. <br /> <br /> he wants a glass of red wine, &quot;a coffee please&quot;, &quot;no wine?&quot;<br /> I tell him I have to write a paper, he doesn't want to hear. Deaf.<br /> &quot;One must feel the music reinveted from inside&quot;. He talks to my breast. <br /> &quot;Géza Anda, 1969, I'll play it for you at my place.&quot; &quot;No, thank you, I really have to work.&quot;<br /> I laughed then, why did I laugh ? It wasn't funny. He wasn't funny. <br /> The waiter gave me a look, remember ? A knowing superior look. I felt ashamed, guilty.<br /> <br /> Nothing happened. That's what people say, don't they ?<br /> &quot;You didn't do anything ? that's what man are like, they do that all the time but it's nothing.&quot;<br /> His elbows on the table, glass in both hands, the thumb. He rubbes it against the glass. Hard, over and over. <br /> Does he know he's doing it? He isn't blinking enough. <br /> Stares. Rubbes. Talks and Talks. <br /> The Géza Anda recording at his place. He uses the word &quot;sublime&quot;. I hate that word. Especially for music.<br /> I hate it but I laugh. <br /> Why ? <br /> <br /> Laughing makes it unreel. It's not happening. <br /> He talks about going to his place again. &quot;No, thank you, I can't.&quot;<br /> His expression changes. His face looks just like the waiter, superior.<br /> As if he really knows me, knows what I want, he knows. I don't.<br /> He walks me to the metro, he pushes again, &quot;Are you sure?&quot;. A sad smile. As if I've let him down. <br /> As if I've wronged him. <br /> &quot;Goodbye&quot;<br /> Not my voice, high, horsed, scared, I run.<br /> I run.<br /> Nothing happened and I feel like crying.<br /> They say it's nothing to make me nothing.<br /> It's something. <br /> They're liars.<br /> <br /> ===étapes===<br /> <br /> Le but est d'adapter la mise en page et le mouvement de certains passages du texte pour renforcer ce qui est écrit. <br /> Je voulais simplement jouer avec des manipulations sur le texte (le rendre flou, tremblant, ou apparaissant comme un message pour renforcer le caractère du dialogue). <br /> <br /> <br /> 1. découper le texte en plusieurs parties au fur et a mesure de la construction de la page css en fonction des mots et des phrases sur lesquels je veux mettre des effets.<br /> 2. création d'un dossier javascript pour réussir à faire glisser les phrases de dialogues.<br /> <br /> <br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3328 2021-10-15T10:50:26Z

<p>Camille.opdebeeck : </p> <hr /> <div><br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer.<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code<br /> <br /> === lien vers la page ===<br /> <br /> file:///Users/christineopdebeeck/Documents/CAMILLE/DESIGN%20NUM/exercice2-scroll/essai%231.html</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3314 2021-10-15T08:46:22Z

<p>Camille.opdebeeck : </p> <hr /> <div><br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer.<br /> <br /> 1. Découper l'image en plusieurs parties <br /> 2. les placer de la manière que je veux dans ma page de code</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=Camille&diff=3311 2021-10-15T08:43:12Z

<p>Camille.opdebeeck : Page créée avec « == exercice scroll == Déformer une image en scrollant, la faire se décomposer. »</p> <hr /> <div><br /> == exercice scroll == <br /> <br /> Déformer une image en scrollant, la faire se décomposer.</div>

Camille.opdebeeck https://designnumerique.be/w/index.php?title=B2-B3_2021-2022&diff=3305 2021-10-15T08:36:47Z

<p>Camille.opdebeeck : </p> <hr /> <div>= Pages des étudiant.e.s =<br /> [[ Camille]] &lt;br&gt;<br /> [[Mondher]]&lt;br&gt;<br /> [[La page d'Audrey]]<br /> <br /> = Sessions =<br /> <br /> == 15 octobre 2021 ==<br /> <br /> == 8 octobre 2021 ==<br /> <br /> Début de développement de prototypes de pages web.<br /> <br /> === Ressources ===<br /> <br /> [http://designnumerique.be/b2b3/20211008scrolljs.zip Structure html/css/js]<br /> <br /> == 1er octobre 2021 ==<br /> <br /> 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.<br /> Lancement d'un premier exercice autour du scroll; comment détourner / utiliser le scroll au sein d'une expérimentation sur une page web.<br /> <br /> === Ressources ===<br /> <br /> https://scrollbars.matoseb.com/<br /> <br /> https://www.theverge.com/2019/11/1/20943552/scroll-bar-visual-history-30-years<br /> <br /> https://www.youtube.com/watch?v=NqKyHEJe9_w (smalltalk)<br /> <br /> [http://designnumerique.be/b2b3/20211008scroll2.zip Structure html/css]<br /> <br /> == 24 septembre 2021 ==<br /> <br /> Introduction générale au cours et au sujet de ce début d'année. Nous abordons le web et les interfaces numériques par le biais d'un élément très spécifique: Le scroll.<br /> Rappel/introduction sur un langage de structuration de données fondamental; l'HTML, et sur un langage de mise en forme; le CSS.<br /> <br /> === Ressources ===<br /> <br /> https://www.newrafael.com/websites/<br /> <br /> https://evasive.tech/<br /> <br /> http://simon-bouvier.xyz/projets/multiple-stories/index.html<br /> <br /> [http://designnumerique.be/b2b3/scroll.zip Structure de base html]</div>

Camille.opdebeeck