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