From fd7e12b60df6ab138234a0e37edf235b3a54a539 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Mon, 1 May 2023 13:59:37 +0000 Subject: [PATCH 1/8] Setting up GitHub Classroom Feedback From 2518567ef6ec3982f443c0855c32c9f326f92dc3 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Mon, 1 May 2023 15:01:24 +0000 Subject: [PATCH 2/8] Add assignment deadline url --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 97aafea..41e4231 100644 --- a/README.md +++ b/README.md @@ -1 +1,2 @@ +[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/E1TYCvbT) [![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=11035023&assignment_repo_type=AssignmentRepo) From d9fccedc4d8b7688e3f021fd591ac9b0bcee2a09 Mon Sep 17 00:00:00 2001 From: Vegard Madsen Date: Tue, 2 May 2023 01:05:05 +0200 Subject: [PATCH 3/8] first commit --- images/bird.svg | 27 ++++++++ index.html | 61 ++++++++++++++++ styles/_animation.scss | 58 ++++++++++++++++ styles/_clear.scss | 4 ++ styles/_fonts.scss | 28 ++++++++ styles/_layout.scss | 8 +++ styles/_variables.scss | 14 ++++ styles/frames/_frame1.scss | 59 ++++++++++++++++ styles/frames/_frame2.scss | 3 + styles/index.css | 138 +++++++++++++++++++++++++++++++++++++ styles/index.css.map | 1 + styles/index.scss | 9 +++ 12 files changed, 410 insertions(+) create mode 100644 images/bird.svg create mode 100644 index.html create mode 100644 styles/_animation.scss create mode 100644 styles/_clear.scss create mode 100644 styles/_fonts.scss create mode 100644 styles/_layout.scss create mode 100644 styles/_variables.scss create mode 100644 styles/frames/_frame1.scss create mode 100644 styles/frames/_frame2.scss create mode 100644 styles/index.css create mode 100644 styles/index.css.map create mode 100644 styles/index.scss diff --git a/images/bird.svg b/images/bird.svg new file mode 100644 index 0000000..28bc95a --- /dev/null +++ b/images/bird.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..a9a9a1e --- /dev/null +++ b/index.html @@ -0,0 +1,61 @@ + + + + + + + Document + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Pleas for

+

Global peace

+

Grow louder

+

World is witnessing largest
number of violent confilcts

+

Since 1946

+

and

+

a quarter of the
+ global population +

+

Lives in affected countries

+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/styles/_animation.scss b/styles/_animation.scss new file mode 100644 index 0000000..5393eba --- /dev/null +++ b/styles/_animation.scss @@ -0,0 +1,58 @@ +@keyframes slide-in { + 0% { + transform: translateX(-1300px); + } + 100% { + transform: translateX(-60%); + } +} + +@keyframes wing-fly { + 0% { + transform: rotate(0deg); + } + 10% { + transform: rotate(-20deg) skew(-10deg); + } + 20% { + transform: rotate(0deg); + } + 30% { + transform: rotate(-20deg) skew(-10deg); + } + 40% { + transform: rotate(0deg); + } + 50% { + transform: rotate(-20deg) skew(-10deg); + } + 60% { + transform: rotate(0deg); + } + 70% { + transform: rotate(-20deg) skew(-10deg); + } + 80% { + transform: rotate(0deg); + } + 90% { + transform: rotate(-20deg) skew(-10deg); + } + 100% { + transform: rotate(0deg); + } + } + + + + @keyframes eyelid-blink { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(5px); + } + 100% { + transform: translateY(0); + } + } \ No newline at end of file diff --git a/styles/_clear.scss b/styles/_clear.scss new file mode 100644 index 0000000..693ce29 --- /dev/null +++ b/styles/_clear.scss @@ -0,0 +1,4 @@ +*, body { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/styles/_fonts.scss b/styles/_fonts.scss new file mode 100644 index 0000000..60d1fc3 --- /dev/null +++ b/styles/_fonts.scss @@ -0,0 +1,28 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); +$dynaPuffFont: 'Roboto', sans-serif; + +* { + font-family: $dynaPuffFont; + text-transform: uppercase; +} + +h1 { + font-weight: 500; + +} + +h2 { + font-weight: 500; +} + +h3 { + font-weight: 500; +} + +h4 { + font-weight: 500; +} + +p { + font-weight: 400; +} diff --git a/styles/_layout.scss b/styles/_layout.scss new file mode 100644 index 0000000..a71e321 --- /dev/null +++ b/styles/_layout.scss @@ -0,0 +1,8 @@ +section { + height: 100vh; + width: 100%; + position: relative; +} +@import 'frames/frame1'; + +@import 'frames/frame2'; \ No newline at end of file diff --git a/styles/_variables.scss b/styles/_variables.scss new file mode 100644 index 0000000..969b976 --- /dev/null +++ b/styles/_variables.scss @@ -0,0 +1,14 @@ +// spacing +$full-height: 100vh; + + + +//colors +$primary-blue: #b8dbff; +$secondary-blue: #0000ff; + + + + +//animation + diff --git a/styles/frames/_frame1.scss b/styles/frames/_frame1.scss new file mode 100644 index 0000000..5074161 --- /dev/null +++ b/styles/frames/_frame1.scss @@ -0,0 +1,59 @@ +.frame1 { + background-color: $primary-blue; + + + &__bird { + position: absolute; + top: 3em; + left: 51%; + animation: slide-in 2.3s ease-out forwards; + + + #wing { + transform-origin: 70% 50%; + animation: wing-fly 2.5s forwards; + } + + #eyelid { + animation: eyelid-blink 1.3s ease-in-out forwards; + animation-delay: 2.7s; + } + } + + &__text { + position: relative; + text-align: center; + width: 418px; + margin: 0 auto; + top: 16em; + + h1 { + font-size: 3.7em; + } + + h2 { + + font-size: 2.5em; + } + + h3 { + + font-size: 2em; + } + + h4 { + + font-size: 1.5em; + } + + p { + + font-size: 1.7em; + } + &-highlight { + background-color: $secondary-blue; + color: white; + } + } +} + diff --git a/styles/frames/_frame2.scss b/styles/frames/_frame2.scss new file mode 100644 index 0000000..91ad57c --- /dev/null +++ b/styles/frames/_frame2.scss @@ -0,0 +1,3 @@ +.frame2 { + background-color: $primary-blue; +} \ No newline at end of file diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..3ca4798 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,138 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"); +*, body { + margin: 0; + padding: 0; +} + +* { + font-family: "Roboto", sans-serif; + text-transform: uppercase; +} + +h1 { + font-weight: 500; +} + +h2 { + font-weight: 500; +} + +h3 { + font-weight: 500; +} + +h4 { + font-weight: 500; +} + +p { + font-weight: 400; +} + +@keyframes slide-in { + 0% { + transform: translateX(-1300px); + } + 100% { + transform: translateX(-60%); + } +} +@keyframes wing-fly { + 0% { + transform: rotate(0deg); + } + 10% { + transform: rotate(-20deg) skew(-10deg); + } + 20% { + transform: rotate(0deg); + } + 30% { + transform: rotate(-20deg) skew(-10deg); + } + 40% { + transform: rotate(0deg); + } + 50% { + transform: rotate(-20deg) skew(-10deg); + } + 60% { + transform: rotate(0deg); + } + 70% { + transform: rotate(-20deg) skew(-10deg); + } + 80% { + transform: rotate(0deg); + } + 90% { + transform: rotate(-20deg) skew(-10deg); + } + 100% { + transform: rotate(0deg); + } +} +@keyframes eyelid-blink { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(5px); + } + 100% { + transform: translateY(0); + } +} +section { + height: 100vh; + width: 100%; + position: relative; +} + +.frame1 { + background-color: #b8dbff; +} +.frame1__bird { + position: absolute; + top: 3em; + left: 51%; + animation: slide-in 2.3s ease-out forwards; +} +.frame1__bird #wing { + transform-origin: 70% 50%; + animation: wing-fly 2.5s forwards; +} +.frame1__bird #eyelid { + animation: eyelid-blink 1.3s ease-in-out forwards; + animation-delay: 2.7s; +} +.frame1__text { + position: relative; + text-align: center; + width: 418px; + margin: 0 auto; + top: 16em; +} +.frame1__text h1 { + font-size: 3.7em; +} +.frame1__text h2 { + font-size: 2.5em; +} +.frame1__text h3 { + font-size: 2em; +} +.frame1__text h4 { + font-size: 1.5em; +} +.frame1__text p { + font-size: 1.7em; +} +.frame1__text-highlight { + background-color: #0000ff; + color: white; +} + +.frame2 { + background-color: #b8dbff; +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/styles/index.css.map b/styles/index.css.map new file mode 100644 index 0000000..4b5be6a --- /dev/null +++ b/styles/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_layout.scss","frames/_frame1.scss","_variables.scss","frames/_frame2.scss"],"names":[],"mappings":"AAAQ,wFAAA;ACAR;EACI,SAAA;EACA,UAAA;ACEJ;;AFDA;EACE,iCAHa;EAIb,yBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFAA;EACE,gBAAA;AEGF;;AFAA;EACE,gBAAA;AEGF;;AFAA;EACE,gBAAA;AEGF;;AFAA;EACE,gBAAA;AEGF;;AC7BA;EACI;IACE,8BAAA;EDgCJ;EC9BE;IACE,2BAAA;EDgCJ;AACF;AC7BA;EACI;IACI,uBAAA;ED+BN;EC7BI;IACE,sCAAA;ED+BN;EC7BI;IACE,uBAAA;ED+BN;EC7BI;IACE,sCAAA;ED+BN;EC7BI;IACE,uBAAA;ED+BN;EC7BI;IACE,sCAAA;ED+BN;EC7BI;IACE,uBAAA;ED+BN;EC7BI;IACE,sCAAA;ED+BN;EC7BI;IACE,uBAAA;ED+BN;EC7BI;IACE,sCAAA;ED+BN;EC7BI;IACE,uBAAA;ED+BN;AACF;AC1BE;EACE;IACE,wBAAA;ED4BJ;EC1BE;IACE,0BAAA;ED4BJ;EC1BE;IACE,wBAAA;ED4BJ;AACF;AEpFA;EACI,aAAA;EACA,WAAA;EACA,kBAAA;AFsFJ;;AGzFA;EACI,yBCKW;AJuFf;AGzFI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,0CAAA;AH2FR;AGxFQ;EACI,yBAAA;EACA,iCAAA;AH0FZ;AGvFQ;EACI,iDAAA;EACA,qBAAA;AHyFZ;AGrFI;EACI,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,cAAA;EACA,SAAA;AHuFR;AGrFQ;EACI,gBAAA;AHuFZ;AGpFQ;EAEI,gBAAA;AHqFZ;AGlFQ;EAEI,cAAA;AHmFZ;AGhFQ;EAEI,gBAAA;AHiFZ;AG9EQ;EAEI,gBAAA;AH+EZ;AG7EQ;EACI,yBC9CK;ED+CL,YAAA;AH+EZ;;AKrIA;EACI,yBDKW;AJmIf","file":"index.css"} \ No newline at end of file diff --git a/styles/index.scss b/styles/index.scss new file mode 100644 index 0000000..fecddc6 --- /dev/null +++ b/styles/index.scss @@ -0,0 +1,9 @@ +@import 'clear'; + +@import 'fonts'; + +@import 'variables'; + +@import 'animation'; + +@import 'layout'; From 0fb554a9676e7084ea288800966e05685712ad4d Mon Sep 17 00:00:00 2001 From: Vegard Madsen Date: Tue, 2 May 2023 21:13:50 +0200 Subject: [PATCH 4/8] some interection stuff --- index.html | 12 +++++- script.js | 27 ++++++++++++ styles/_animation.scss | 85 +++++++++++++++++++------------------- styles/_fonts.scss | 1 - styles/frames/_frame1.scss | 16 ++++++- styles/frames/_frame2.scss | 40 ++++++++++++++++++ styles/index.css | 54 ++++++++++++++++++++---- styles/index.css.map | 2 +- 8 files changed, 183 insertions(+), 54 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index a9a9a1e..22f3519 100644 --- a/index.html +++ b/index.html @@ -52,10 +52,20 @@

a quarter of the

Lives in affected countries

-
+
+
+
+

1/3

+

of the

+
+

world population

+
+
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..3ecb404 --- /dev/null +++ b/script.js @@ -0,0 +1,27 @@ +// Get the element to observe +const stat1 = document.querySelector('.frame1__text-highlight'); + +const observer1 = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + stat1.classList.add('live'); + } + }); +}); +observer1.observe(stat1); + + +const stat2 = document.querySelector('.stat2'); + +const observer2 = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + stat2.classList.add('live'); + } + }); +}); +observer2.observe(stat2); + + + + diff --git a/styles/_animation.scss b/styles/_animation.scss index 5393eba..76d8e56 100644 --- a/styles/_animation.scss +++ b/styles/_animation.scss @@ -9,50 +9,51 @@ @keyframes wing-fly { 0% { - transform: rotate(0deg); - } - 10% { - transform: rotate(-20deg) skew(-10deg); - } - 20% { - transform: rotate(0deg); - } - 30% { - transform: rotate(-20deg) skew(-10deg); - } - 40% { - transform: rotate(0deg); - } - 50% { - transform: rotate(-20deg) skew(-10deg); - } - 60% { - transform: rotate(0deg); - } - 70% { - transform: rotate(-20deg) skew(-10deg); - } - 80% { - transform: rotate(0deg); - } - 90% { - transform: rotate(-20deg) skew(-10deg); - } - 100% { - transform: rotate(0deg); - } - } - - - - @keyframes eyelid-blink { - 0% { - transform: translateY(0); + transform: rotate(0deg); + } + 10% { + transform: rotate(-20deg) skew(-30deg); + } + 20% { + transform: rotate(0deg); + } + 30% { + transform: rotate(-20deg) skew(-30deg); + } + 40% { + transform: rotate(0deg); } 50% { - transform: translateY(5px); + transform: rotate(-20deg) skew(-30deg); + } + 60% { + transform: rotate(0deg); + } + 70% { + transform: rotate(-20deg) skew(-30deg); + } + 80% { + transform: rotate(0deg); + } + 90% { + transform: rotate(-20deg) skew(-30deg); } 100% { - transform: translateY(0); + transform: rotate(0deg); } - } \ No newline at end of file +} + + + +@keyframes eyelid-blink { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(5px); + } + 100% { + transform: translateY(0); + } +} + diff --git a/styles/_fonts.scss b/styles/_fonts.scss index 60d1fc3..6ff498c 100644 --- a/styles/_fonts.scss +++ b/styles/_fonts.scss @@ -8,7 +8,6 @@ $dynaPuffFont: 'Roboto', sans-serif; h1 { font-weight: 500; - } h2 { diff --git a/styles/frames/_frame1.scss b/styles/frames/_frame1.scss index 5074161..138dd8a 100644 --- a/styles/frames/_frame1.scss +++ b/styles/frames/_frame1.scss @@ -51,8 +51,20 @@ font-size: 1.7em; } &-highlight { - background-color: $secondary-blue; - color: white; + height: 100%; + width: 100%; + background: linear-gradient(to right,$primary-blue 50%,$secondary-blue 50%); + background-size: 200% 100%; + background-position:left bottom; + color: rgba(255, 255, 255, 0); + transition: all 1.2s ease-in-out; + } + .live { + background: linear-gradient(to right, $primary-blue 50%, $secondary-blue 50%); + background-size: 200% 100%; + background-position:right bottom; + color: rgb(255, 255, 255); + } } } diff --git a/styles/frames/_frame2.scss b/styles/frames/_frame2.scss index 91ad57c..53ba404 100644 --- a/styles/frames/_frame2.scss +++ b/styles/frames/_frame2.scss @@ -1,3 +1,43 @@ .frame2 { background-color: $primary-blue; + + &__text { + position: relative; + text-align: center; + width: 418px; + margin: 0 auto; + top: 16em; + + h1 { + font-size: 3.7em; + padding: 0.1em 0.4em; + background-color: blue; + } + + h2 { + + font-size: 2.5em; + } + + h3 { + + font-size: 2em; + } + + h4 { + + font-size: 1.5em; + } + + p { + + font-size: 1.7em; + } + + &-firstline { + display: flex; + justify-content: space-around; + align-items: center; + } + } } \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index 3ca4798..d230bb1 100644 --- a/styles/index.css +++ b/styles/index.css @@ -42,31 +42,31 @@ p { transform: rotate(0deg); } 10% { - transform: rotate(-20deg) skew(-10deg); + transform: rotate(-20deg) skew(-30deg); } 20% { transform: rotate(0deg); } 30% { - transform: rotate(-20deg) skew(-10deg); + transform: rotate(-20deg) skew(-30deg); } 40% { transform: rotate(0deg); } 50% { - transform: rotate(-20deg) skew(-10deg); + transform: rotate(-20deg) skew(-30deg); } 60% { transform: rotate(0deg); } 70% { - transform: rotate(-20deg) skew(-10deg); + transform: rotate(-20deg) skew(-30deg); } 80% { transform: rotate(0deg); } 90% { - transform: rotate(-20deg) skew(-10deg); + transform: rotate(-20deg) skew(-30deg); } 100% { transform: rotate(0deg); @@ -129,10 +129,50 @@ section { font-size: 1.7em; } .frame1__text-highlight { - background-color: #0000ff; - color: white; + height: 100%; + width: 100%; + background: linear-gradient(to right, #b8dbff 50%, #0000ff 50%); + background-size: 200% 100%; + background-position: left bottom; + color: rgba(255, 255, 255, 0); + transition: all 1.2s ease-in-out; +} +.frame1__text .live { + background: linear-gradient(to right, #b8dbff 50%, #0000ff 50%); + background-size: 200% 100%; + background-position: right bottom; + color: rgb(255, 255, 255); } .frame2 { background-color: #b8dbff; +} +.frame2__text { + position: relative; + text-align: center; + width: 418px; + margin: 0 auto; + top: 16em; +} +.frame2__text h1 { + font-size: 3.7em; + padding: 0.1em 0.4em; + background-color: blue; +} +.frame2__text h2 { + font-size: 2.5em; +} +.frame2__text h3 { + font-size: 2em; +} +.frame2__text h4 { + font-size: 1.5em; +} +.frame2__text p { + font-size: 1.7em; +} +.frame2__text-firstline { + display: flex; + justify-content: space-around; + align-items: center; }/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/styles/index.css.map b/styles/index.css.map index 4b5be6a..087a4a2 100644 --- a/styles/index.css.map +++ b/styles/index.css.map @@ -1 +1 @@ -{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_layout.scss","frames/_frame1.scss","_variables.scss","frames/_frame2.scss"],"names":[],"mappings":"AAAQ,wFAAA;ACAR;EACI,SAAA;EACA,UAAA;ACEJ;;AFDA;EACE,iCAHa;EAIb,yBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFAA;EACE,gBAAA;AEGF;;AFAA;EACE,gBAAA;AEGF;;AFAA;EACE,gBAAA;AEGF;;AFAA;EACE,gBAAA;AEGF;;AC7BA;EACI;IACE,8BAAA;EDgCJ;EC9BE;IACE,2BAAA;EDgCJ;AACF;AC7BA;EACI;IACI,uBAAA;ED+BN;EC7BI;IACE,sCAAA;ED+BN;EC7BI;IACE,uBAAA;ED+BN;EC7BI;IACE,sCAAA;ED+BN;EC7BI;IACE,uBAAA;ED+BN;EC7BI;IACE,sCAAA;ED+BN;EC7BI;IACE,uBAAA;ED+BN;EC7BI;IACE,sCAAA;ED+BN;EC7BI;IACE,uBAAA;ED+BN;EC7BI;IACE,sCAAA;ED+BN;EC7BI;IACE,uBAAA;ED+BN;AACF;AC1BE;EACE;IACE,wBAAA;ED4BJ;EC1BE;IACE,0BAAA;ED4BJ;EC1BE;IACE,wBAAA;ED4BJ;AACF;AEpFA;EACI,aAAA;EACA,WAAA;EACA,kBAAA;AFsFJ;;AGzFA;EACI,yBCKW;AJuFf;AGzFI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,0CAAA;AH2FR;AGxFQ;EACI,yBAAA;EACA,iCAAA;AH0FZ;AGvFQ;EACI,iDAAA;EACA,qBAAA;AHyFZ;AGrFI;EACI,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,cAAA;EACA,SAAA;AHuFR;AGrFQ;EACI,gBAAA;AHuFZ;AGpFQ;EAEI,gBAAA;AHqFZ;AGlFQ;EAEI,cAAA;AHmFZ;AGhFQ;EAEI,gBAAA;AHiFZ;AG9EQ;EAEI,gBAAA;AH+EZ;AG7EQ;EACI,yBC9CK;ED+CL,YAAA;AH+EZ;;AKrIA;EACI,yBDKW;AJmIf","file":"index.css"} \ No newline at end of file +{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_layout.scss","frames/_frame1.scss","_variables.scss","frames/_frame2.scss"],"names":[],"mappings":"AAAQ,wFAAA;ACAR;EACI,SAAA;EACA,UAAA;ACEJ;;AFDA;EACE,iCAHa;EAIb,yBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AC7BA;EACI;IACE,8BAAA;EDgCJ;EC9BE;IACE,2BAAA;EDgCJ;AACF;AC7BA;EACI;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;AACF;AC1BA;EACE;IACE,wBAAA;ED4BF;EC1BA;IACE,0BAAA;ED4BF;EC1BA;IACE,wBAAA;ED4BF;AACF;AEpFA;EACI,aAAA;EACA,WAAA;EACA,kBAAA;AFsFJ;;AGzFA;EACI,yBCKW;AJuFf;AGzFI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,0CAAA;AH2FR;AGxFQ;EACI,yBAAA;EACA,iCAAA;AH0FZ;AGvFQ;EACI,iDAAA;EACA,qBAAA;AHyFZ;AGrFI;EACI,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,cAAA;EACA,SAAA;AHuFR;AGrFQ;EACI,gBAAA;AHuFZ;AGpFQ;EAEI,gBAAA;AHqFZ;AGlFQ;EAEI,cAAA;AHmFZ;AGhFQ;EAEI,gBAAA;AHiFZ;AG9EQ;EAEI,gBAAA;AH+EZ;AG7EQ;EACI,YAAA;EACA,WAAA;EACA,+DAAA;EACA,0BAAA;EACA,gCAAA;EACA,6BAAA;EACA,gCAAA;AH+EZ;AG7EQ;EACI,+DAAA;EACA,0BAAA;EACA,iCAAA;EACA,yBAAA;AH+EZ;;AKhJA;EACI,yBDKW;AJ8If;AKjJI;EACI,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,cAAA;EACA,SAAA;ALmJR;AKjJQ;EACI,gBAAA;EACA,oBAAA;EACA,sBAAA;ALmJZ;AKhJQ;EAEI,gBAAA;ALiJZ;AK9IQ;EAEI,cAAA;AL+IZ;AK5IQ;EAEI,gBAAA;AL6IZ;AK1IQ;EAEI,gBAAA;AL2IZ;AKxIQ;EACI,aAAA;EACA,6BAAA;EACA,mBAAA;AL0IZ","file":"index.css"} \ No newline at end of file From 04d84b2d9b97d4d02371b573fcfaa3e298ac236e Mon Sep 17 00:00:00 2001 From: Vegard Madsen Date: Wed, 3 May 2023 03:53:45 +0200 Subject: [PATCH 5/8] frame 2 stuff --- images/light.svg | 25 +++++++++++++++++++++++++ index.html | 31 +++++++++++++++++++++++++++++++ script.js | 20 +++++++++++++++++++- styles/_layout.scss | 19 +++++++++++++++---- styles/_variables.scss | 2 +- styles/frames/_frame2.scss | 30 +++++++++++++++++++++++++----- styles/index.css | 35 +++++++++++++++++++++++++++-------- styles/index.css.map | 2 +- 8 files changed, 144 insertions(+), 20 deletions(-) create mode 100644 images/light.svg diff --git a/images/light.svg b/images/light.svg new file mode 100644 index 0000000..43a5189 --- /dev/null +++ b/images/light.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 22f3519..43b5118 100644 --- a/index.html +++ b/index.html @@ -59,6 +59,37 @@

1/3

of the

world population

+

fear walking in

+

in their neighbourhoods
+ at night

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/script.js b/script.js index 3ecb404..af808ef 100644 --- a/script.js +++ b/script.js @@ -17,11 +17,29 @@ const observer2 = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { stat2.classList.add('live'); - } + } else { + stat2.classList.remove('live'); + } }); }); observer2.observe(stat2); +const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + console.log("Element is intersecting"); + document.getElementById("light-beam").setAttribute("id", "newID"); + } + }); +}, { threshold: 0.5 }); + +var svgObject = document.getElementById('light'); +svgObject.addEventListener('load', function() { + var svgDoc = svgObject.contentDocument; + var element = svgDoc.getElementById('guy'); + observer.observe(element); +}); + diff --git a/styles/_layout.scss b/styles/_layout.scss index a71e321..f93c941 100644 --- a/styles/_layout.scss +++ b/styles/_layout.scss @@ -1,8 +1,19 @@ -section { + + + +body { height: 100vh; - width: 100%; - position: relative; -} + + section { + height: 100vh; + width: 100%; + position: relative; + } + } + + + + @import 'frames/frame1'; @import 'frames/frame2'; \ No newline at end of file diff --git a/styles/_variables.scss b/styles/_variables.scss index 969b976..8ed6112 100644 --- a/styles/_variables.scss +++ b/styles/_variables.scss @@ -5,7 +5,7 @@ $full-height: 100vh; //colors $primary-blue: #b8dbff; -$secondary-blue: #0000ff; +$secondary-blue: #2C3D94; diff --git a/styles/frames/_frame2.scss b/styles/frames/_frame2.scss index 53ba404..cf0ab30 100644 --- a/styles/frames/_frame2.scss +++ b/styles/frames/_frame2.scss @@ -1,17 +1,37 @@ .frame2 { background-color: $primary-blue; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + + &__lamp { + height: 100%; + transform: translatey(25%); + } + &__text { position: relative; text-align: center; - width: 418px; - margin: 0 auto; - top: 16em; + line-height: 1.5; h1 { font-size: 3.7em; - padding: 0.1em 0.4em; - background-color: blue; + padding: 0.05em 0.6em; + background: linear-gradient(to right,$primary-blue 50%,$secondary-blue 50%); + background-size: 200% 100%; + background-position:left bottom; + color: rgba(255, 255, 255, 0); + transition: all 1.2s ease-in-out; + } + + .live { + background: linear-gradient(to right, $primary-blue 50%, $secondary-blue 50%); + background-size: 200% 100%; + background-position:right bottom; + color: rgb(255, 255, 255); } h2 { diff --git a/styles/index.css b/styles/index.css index d230bb1..77ee9f4 100644 --- a/styles/index.css +++ b/styles/index.css @@ -83,7 +83,10 @@ p { transform: translateY(0); } } -section { +body { + height: 100vh; +} +body section { height: 100vh; width: 100%; position: relative; @@ -131,14 +134,14 @@ section { .frame1__text-highlight { height: 100%; width: 100%; - background: linear-gradient(to right, #b8dbff 50%, #0000ff 50%); + background: linear-gradient(to right, #b8dbff 50%, #2C3D94 50%); background-size: 200% 100%; background-position: left bottom; color: rgba(255, 255, 255, 0); transition: all 1.2s ease-in-out; } .frame1__text .live { - background: linear-gradient(to right, #b8dbff 50%, #0000ff 50%); + background: linear-gradient(to right, #b8dbff 50%, #2C3D94 50%); background-size: 200% 100%; background-position: right bottom; color: rgb(255, 255, 255); @@ -146,18 +149,34 @@ section { .frame2 { background-color: #b8dbff; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} +.frame2__lamp { + height: 100%; + transform: translatey(25%); } .frame2__text { position: relative; text-align: center; - width: 418px; - margin: 0 auto; - top: 16em; + line-height: 1.5; } .frame2__text h1 { font-size: 3.7em; - padding: 0.1em 0.4em; - background-color: blue; + padding: 0.05em 0.6em; + background: linear-gradient(to right, #b8dbff 50%, #2C3D94 50%); + background-size: 200% 100%; + background-position: left bottom; + color: rgba(255, 255, 255, 0); + transition: all 1.2s ease-in-out; +} +.frame2__text .live { + background: linear-gradient(to right, #b8dbff 50%, #2C3D94 50%); + background-size: 200% 100%; + background-position: right bottom; + color: rgb(255, 255, 255); } .frame2__text h2 { font-size: 2.5em; diff --git a/styles/index.css.map b/styles/index.css.map index 087a4a2..b773c89 100644 --- a/styles/index.css.map +++ b/styles/index.css.map @@ -1 +1 @@ -{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_layout.scss","frames/_frame1.scss","_variables.scss","frames/_frame2.scss"],"names":[],"mappings":"AAAQ,wFAAA;ACAR;EACI,SAAA;EACA,UAAA;ACEJ;;AFDA;EACE,iCAHa;EAIb,yBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AC7BA;EACI;IACE,8BAAA;EDgCJ;EC9BE;IACE,2BAAA;EDgCJ;AACF;AC7BA;EACI;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;AACF;AC1BA;EACE;IACE,wBAAA;ED4BF;EC1BA;IACE,0BAAA;ED4BF;EC1BA;IACE,wBAAA;ED4BF;AACF;AEpFA;EACI,aAAA;EACA,WAAA;EACA,kBAAA;AFsFJ;;AGzFA;EACI,yBCKW;AJuFf;AGzFI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,0CAAA;AH2FR;AGxFQ;EACI,yBAAA;EACA,iCAAA;AH0FZ;AGvFQ;EACI,iDAAA;EACA,qBAAA;AHyFZ;AGrFI;EACI,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,cAAA;EACA,SAAA;AHuFR;AGrFQ;EACI,gBAAA;AHuFZ;AGpFQ;EAEI,gBAAA;AHqFZ;AGlFQ;EAEI,cAAA;AHmFZ;AGhFQ;EAEI,gBAAA;AHiFZ;AG9EQ;EAEI,gBAAA;AH+EZ;AG7EQ;EACI,YAAA;EACA,WAAA;EACA,+DAAA;EACA,0BAAA;EACA,gCAAA;EACA,6BAAA;EACA,gCAAA;AH+EZ;AG7EQ;EACI,+DAAA;EACA,0BAAA;EACA,iCAAA;EACA,yBAAA;AH+EZ;;AKhJA;EACI,yBDKW;AJ8If;AKjJI;EACI,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,cAAA;EACA,SAAA;ALmJR;AKjJQ;EACI,gBAAA;EACA,oBAAA;EACA,sBAAA;ALmJZ;AKhJQ;EAEI,gBAAA;ALiJZ;AK9IQ;EAEI,cAAA;AL+IZ;AK5IQ;EAEI,gBAAA;AL6IZ;AK1IQ;EAEI,gBAAA;AL2IZ;AKxIQ;EACI,aAAA;EACA,6BAAA;EACA,mBAAA;AL0IZ","file":"index.css"} \ No newline at end of file +{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_layout.scss","frames/_frame1.scss","_variables.scss","frames/_frame2.scss"],"names":[],"mappings":"AAAQ,wFAAA;ACAR;EACI,SAAA;EACA,UAAA;ACEJ;;AFDA;EACE,iCAHa;EAIb,yBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AC7BA;EACI;IACE,8BAAA;EDgCJ;EC9BE;IACE,2BAAA;EDgCJ;AACF;AC7BA;EACI;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;AACF;AC1BA;EACE;IACE,wBAAA;ED4BF;EC1BA;IACE,0BAAA;ED4BF;EC1BA;IACE,wBAAA;ED4BF;AACF;AEjFA;EACI,aAAA;AFmFJ;AEjFI;EACE,aAAA;EACA,WAAA;EACA,kBAAA;AFmFN;;AG5FA;EACI,yBCKW;AJ0Ff;AG5FI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,0CAAA;AH8FR;AG3FQ;EACI,yBAAA;EACA,iCAAA;AH6FZ;AG1FQ;EACI,iDAAA;EACA,qBAAA;AH4FZ;AGxFI;EACI,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,cAAA;EACA,SAAA;AH0FR;AGxFQ;EACI,gBAAA;AH0FZ;AGvFQ;EAEI,gBAAA;AHwFZ;AGrFQ;EAEI,cAAA;AHsFZ;AGnFQ;EAEI,gBAAA;AHoFZ;AGjFQ;EAEI,gBAAA;AHkFZ;AGhFQ;EACI,YAAA;EACA,WAAA;EACA,+DAAA;EACA,0BAAA;EACA,gCAAA;EACA,6BAAA;EACA,gCAAA;AHkFZ;AGhFQ;EACI,+DAAA;EACA,0BAAA;EACA,iCAAA;EACA,yBAAA;AHkFZ;;AKnJA;EACI,yBDKW;ECJX,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;ALsJJ;AKnJI;EACI,YAAA;EACA,0BAAA;ALqJR;AKjJI;EACI,kBAAA;EACA,kBAAA;EACA,gBAAA;ALmJR;AKjJQ;EACI,gBAAA;EACA,qBAAA;EACA,+DAAA;EACA,0BAAA;EACA,gCAAA;EACA,6BAAA;EACA,gCAAA;ALmJZ;AKhJQ;EACI,+DAAA;EACA,0BAAA;EACA,iCAAA;EACA,yBAAA;ALkJZ;AK/IQ;EAEI,gBAAA;ALgJZ;AK7IQ;EAEI,cAAA;AL8IZ;AK3IQ;EAEI,gBAAA;AL4IZ;AKzIQ;EAEI,gBAAA;AL0IZ;AKvIQ;EACI,aAAA;EACA,6BAAA;EACA,mBAAA;ALyIZ","file":"index.css"} \ No newline at end of file From 809914c67bf30356b8fcbb8b076a59d651accbab Mon Sep 17 00:00:00 2001 From: Vegard Madsen Date: Wed, 3 May 2023 18:45:52 +0200 Subject: [PATCH 6/8] new frame progress --- images/light (3).svg | 25 +++++++++++ images/trip.svg | 22 ++++++++++ index.html | 52 +++++++++++++++++------ script.js | 33 +++++++++------ styles/_animation.scss | 12 ++++++ styles/_layout.scss | 17 ++++---- styles/_variables.scss | 1 + styles/frames/_frame2.scss | 38 ++++++++++++++--- styles/frames/_frame3.scss | 41 ++++++++++++++++++ styles/index.css | 85 ++++++++++++++++++++++++++++++++++---- styles/index.css.map | 2 +- 11 files changed, 281 insertions(+), 47 deletions(-) create mode 100644 images/light (3).svg create mode 100644 images/trip.svg create mode 100644 styles/frames/_frame3.scss diff --git a/images/light (3).svg b/images/light (3).svg new file mode 100644 index 0000000..abd14c4 --- /dev/null +++ b/images/light (3).svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/trip.svg b/images/trip.svg new file mode 100644 index 0000000..fe8ca7f --- /dev/null +++ b/images/trip.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 43b5118..18df6ee 100644 --- a/index.html +++ b/index.html @@ -76,23 +76,51 @@

fear walking in

- - - - - - - - - - + + + + + + + + + + - +
-
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
diff --git a/script.js b/script.js index af808ef..e02bdac 100644 --- a/script.js +++ b/script.js @@ -24,22 +24,29 @@ const observer2 = new IntersectionObserver(entries => { }); observer2.observe(stat2); - -const observer = new IntersectionObserver((entries) => { +const lightBeam = document.getElementById("light-beam"); +const observer3 = new IntersectionObserver((entries) => { entries.forEach((entry) => { - if (entry.isIntersecting) { - console.log("Element is intersecting"); - document.getElementById("light-beam").setAttribute("id", "newID"); - } + if(lightBeam.style.fill != "#b8dbff"){ + if (entry.isIntersecting) { + console.log("Element is intersecting"); + lightBeam.style.fill = "#b8dbff"; + + setTimeout(function() { + lightBeam.style.fill = ""; + }, 800); + + setTimeout(function() { + lightBeam.style.fill = "#b8dbff"; + }, 1400); + + } + } }); }, { threshold: 0.5 }); - -var svgObject = document.getElementById('light'); -svgObject.addEventListener('load', function() { - var svgDoc = svgObject.contentDocument; - var element = svgDoc.getElementById('guy'); - observer.observe(element); -}); + +const lampObs = document.querySelector('.observe'); +observer3.observe(lampObs); diff --git a/styles/_animation.scss b/styles/_animation.scss index 76d8e56..d969f46 100644 --- a/styles/_animation.scss +++ b/styles/_animation.scss @@ -57,3 +57,15 @@ } } + +@keyframes move-down-and-left { + 0% { + transform: translateY(0) translateX(0); + } + 20% { + transform: translateY(40%) translateX(-19%); + } + 100% { + transform: translateY(40%) translateX(-100%); + } +} diff --git a/styles/_layout.scss b/styles/_layout.scss index f93c941..86e2e0f 100644 --- a/styles/_layout.scss +++ b/styles/_layout.scss @@ -1,19 +1,20 @@ -body { - height: 100vh; - +body { section { - height: 100vh; - width: 100%; - position: relative; + height: auto; + min-height: 100vh; + width: 100%; + position: relative; } - } +} @import 'frames/frame1'; -@import 'frames/frame2'; \ No newline at end of file +@import 'frames/frame2'; + +@import 'frames/frame3'; \ No newline at end of file diff --git a/styles/_variables.scss b/styles/_variables.scss index 8ed6112..fd37b65 100644 --- a/styles/_variables.scss +++ b/styles/_variables.scss @@ -6,6 +6,7 @@ $full-height: 100vh; //colors $primary-blue: #b8dbff; $secondary-blue: #2C3D94; +$night-color: #161f4d; diff --git a/styles/frames/_frame2.scss b/styles/frames/_frame2.scss index cf0ab30..c8eb53a 100644 --- a/styles/frames/_frame2.scss +++ b/styles/frames/_frame2.scss @@ -1,14 +1,35 @@ .frame2 { - background-color: $primary-blue; + background-color: $night-color; display: flex; flex-direction: row; align-items: center; justify-content: center; + padding: 4em 0; + width: 100%; + min-height: 100vh; &__lamp { height: 100%; - transform: translatey(25%); + position: relative; + display: flex; + justify-content: center; + align-items: center; + + + svg { + max-width: 80%; + + } + + #light-beam { + fill: $night-color; + } + + .observe { + position: absolute; + bottom: 0; + } } @@ -16,11 +37,12 @@ position: relative; text-align: center; line-height: 1.5; + color: white; h1 { font-size: 3.7em; padding: 0.05em 0.6em; - background: linear-gradient(to right,$primary-blue 50%,$secondary-blue 50%); + background: linear-gradient(to right,$night-color 50%,$primary-blue 50%); background-size: 200% 100%; background-position:left bottom; color: rgba(255, 255, 255, 0); @@ -28,10 +50,10 @@ } .live { - background: linear-gradient(to right, $primary-blue 50%, $secondary-blue 50%); + background: linear-gradient(to right, $night-color 50%, $primary-blue 50%); background-size: 200% 100%; background-position:right bottom; - color: rgb(255, 255, 255); + color: black; } h2 { @@ -60,4 +82,10 @@ align-items: center; } } +} + +@media screen and (max-width: 900px) { + .frame2 { + flex-direction: column; + } } \ No newline at end of file diff --git a/styles/frames/_frame3.scss b/styles/frames/_frame3.scss new file mode 100644 index 0000000..ec1a09a --- /dev/null +++ b/styles/frames/_frame3.scss @@ -0,0 +1,41 @@ +.frame3 { + background-color: $primary-blue; + display: flex; + justify-content: center; + align-items: center; + + &__trip { + width: auto; + height: auto; + position: relative; + max-width: 90%; + display: flex; + justify-content: center; + + + svg { + max-width: 90%; + z-index: 20; + } + &-blocker { + width: 100%; + height: 100%; + position: absolute; + background-color: $primary-blue; + top: 0; + animation-name: move-down-and-left; + animation-duration: 5s; + animation-fill-mode: forwards; + z-index: 40; + } + + &-observe { + position: absolute; + background-color: black; + height: 50px; + width: 50px; + bottom: 0; + z-index: 999; + } + } +} \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index 77ee9f4..6b0ced5 100644 --- a/styles/index.css +++ b/styles/index.css @@ -83,11 +83,20 @@ p { transform: translateY(0); } } -body { - height: 100vh; +@keyframes move-down-and-left { + 0% { + transform: translateY(0) translateX(0); + } + 20% { + transform: translateY(40%) translateX(-19%); + } + 100% { + transform: translateY(40%) translateX(-100%); + } } body section { - height: 100vh; + height: auto; + min-height: 100vh; width: 100%; position: relative; } @@ -148,35 +157,52 @@ body section { } .frame2 { - background-color: #b8dbff; + background-color: #161f4d; display: flex; flex-direction: row; align-items: center; justify-content: center; + padding: 4em 0; + width: 100%; + min-height: 100vh; } .frame2__lamp { height: 100%; - transform: translatey(25%); + position: relative; + display: flex; + justify-content: center; + align-items: center; +} +.frame2__lamp svg { + max-width: 80%; +} +.frame2__lamp #light-beam { + fill: #161f4d; +} +.frame2__lamp .observe { + position: absolute; + bottom: 0; } .frame2__text { position: relative; text-align: center; line-height: 1.5; + color: white; } .frame2__text h1 { font-size: 3.7em; padding: 0.05em 0.6em; - background: linear-gradient(to right, #b8dbff 50%, #2C3D94 50%); + background: linear-gradient(to right, #161f4d 50%, #b8dbff 50%); background-size: 200% 100%; background-position: left bottom; color: rgba(255, 255, 255, 0); transition: all 1.2s ease-in-out; } .frame2__text .live { - background: linear-gradient(to right, #b8dbff 50%, #2C3D94 50%); + background: linear-gradient(to right, #161f4d 50%, #b8dbff 50%); background-size: 200% 100%; background-position: right bottom; - color: rgb(255, 255, 255); + color: black; } .frame2__text h2 { font-size: 2.5em; @@ -194,4 +220,47 @@ body section { display: flex; justify-content: space-around; align-items: center; +} + +@media screen and (max-width: 900px) { + .frame2 { + flex-direction: column; + } +} +.frame3 { + background-color: #b8dbff; + display: flex; + justify-content: center; + align-items: center; +} +.frame3__trip { + width: auto; + height: auto; + position: relative; + max-width: 90%; + display: flex; + justify-content: center; +} +.frame3__trip svg { + max-width: 90%; + z-index: 20; +} +.frame3__trip-blocker { + width: 100%; + height: 100%; + position: absolute; + background-color: #b8dbff; + top: 0; + animation-name: move-down-and-left; + animation-duration: 5s; + animation-fill-mode: forwards; + z-index: 40; +} +.frame3__trip-observe { + position: absolute; + background-color: black; + height: 50px; + width: 50px; + bottom: 0; + z-index: 999; }/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/styles/index.css.map b/styles/index.css.map index b773c89..fd1e5b0 100644 --- a/styles/index.css.map +++ b/styles/index.css.map @@ -1 +1 @@ -{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_layout.scss","frames/_frame1.scss","_variables.scss","frames/_frame2.scss"],"names":[],"mappings":"AAAQ,wFAAA;ACAR;EACI,SAAA;EACA,UAAA;ACEJ;;AFDA;EACE,iCAHa;EAIb,yBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AFDA;EACE,gBAAA;AEIF;;AC7BA;EACI;IACE,8BAAA;EDgCJ;EC9BE;IACE,2BAAA;EDgCJ;AACF;AC7BA;EACI;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;EC7BE;IACE,sCAAA;ED+BJ;EC7BE;IACE,uBAAA;ED+BJ;AACF;AC1BA;EACE;IACE,wBAAA;ED4BF;EC1BA;IACE,0BAAA;ED4BF;EC1BA;IACE,wBAAA;ED4BF;AACF;AEjFA;EACI,aAAA;AFmFJ;AEjFI;EACE,aAAA;EACA,WAAA;EACA,kBAAA;AFmFN;;AG5FA;EACI,yBCKW;AJ0Ff;AG5FI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,0CAAA;AH8FR;AG3FQ;EACI,yBAAA;EACA,iCAAA;AH6FZ;AG1FQ;EACI,iDAAA;EACA,qBAAA;AH4FZ;AGxFI;EACI,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,cAAA;EACA,SAAA;AH0FR;AGxFQ;EACI,gBAAA;AH0FZ;AGvFQ;EAEI,gBAAA;AHwFZ;AGrFQ;EAEI,cAAA;AHsFZ;AGnFQ;EAEI,gBAAA;AHoFZ;AGjFQ;EAEI,gBAAA;AHkFZ;AGhFQ;EACI,YAAA;EACA,WAAA;EACA,+DAAA;EACA,0BAAA;EACA,gCAAA;EACA,6BAAA;EACA,gCAAA;AHkFZ;AGhFQ;EACI,+DAAA;EACA,0BAAA;EACA,iCAAA;EACA,yBAAA;AHkFZ;;AKnJA;EACI,yBDKW;ECJX,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;ALsJJ;AKnJI;EACI,YAAA;EACA,0BAAA;ALqJR;AKjJI;EACI,kBAAA;EACA,kBAAA;EACA,gBAAA;ALmJR;AKjJQ;EACI,gBAAA;EACA,qBAAA;EACA,+DAAA;EACA,0BAAA;EACA,gCAAA;EACA,6BAAA;EACA,gCAAA;ALmJZ;AKhJQ;EACI,+DAAA;EACA,0BAAA;EACA,iCAAA;EACA,yBAAA;ALkJZ;AK/IQ;EAEI,gBAAA;ALgJZ;AK7IQ;EAEI,cAAA;AL8IZ;AK3IQ;EAEI,gBAAA;AL4IZ;AKzIQ;EAEI,gBAAA;AL0IZ;AKvIQ;EACI,aAAA;EACA,6BAAA;EACA,mBAAA;ALyIZ","file":"index.css"} \ No newline at end of file +{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_layout.scss","frames/_frame1.scss","_variables.scss","frames/_frame2.scss","frames/_frame3.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file From 86e39f1b2451ec45723a2b17673d77432a2f4300 Mon Sep 17 00:00:00 2001 From: Vegard Madsen Date: Wed, 3 May 2023 21:12:59 +0200 Subject: [PATCH 7/8] frame 3 done --- index.html | 9 +++++-- script.js | 25 +++++++++++++++++- styles/_animation.scss | 2 +- styles/frames/_frame2.scss | 1 + styles/frames/_frame3.scss | 53 ++++++++++++++++++++++++++++++-------- styles/index.css | 48 ++++++++++++++++++++++++++-------- styles/index.css.map | 2 +- 7 files changed, 113 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 18df6ee..7d1ef6f 100644 --- a/index.html +++ b/index.html @@ -93,8 +93,13 @@

fear walking in

+
+

a record

+

100 million people

+

had been forcibly
displaced worldwide
(may 2022)

+
- + @@ -118,7 +123,7 @@

fear walking in

-
+
diff --git a/script.js b/script.js index e02bdac..7fe631e 100644 --- a/script.js +++ b/script.js @@ -34,7 +34,7 @@ const observer3 = new IntersectionObserver((entries) => { setTimeout(function() { lightBeam.style.fill = ""; - }, 800); + }, 500); setTimeout(function() { lightBeam.style.fill = "#b8dbff"; @@ -50,3 +50,26 @@ observer3.observe(lampObs); +const observer4 = new IntersectionObserver(entries => { + if (entries[0].isIntersecting) { + document.querySelector('.frame3__trip-blocker').classList.add('animate'); + } +}); + +const tripObs = document.querySelector('.frame3__trip-observe'); +observer4.observe(tripObs); + + + +const stat3 = document.querySelector('.stat3'); + +const observer5 = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + stat3.classList.add('live'); + } else { + stat3.classList.remove('live'); + } + }); +}); +observer5.observe(stat3); diff --git a/styles/_animation.scss b/styles/_animation.scss index d969f46..2fa890f 100644 --- a/styles/_animation.scss +++ b/styles/_animation.scss @@ -63,7 +63,7 @@ transform: translateY(0) translateX(0); } 20% { - transform: translateY(40%) translateX(-19%); + transform: translateY(40%) translateX(0); } 100% { transform: translateY(40%) translateX(-100%); diff --git a/styles/frames/_frame2.scss b/styles/frames/_frame2.scss index c8eb53a..cf09d5f 100644 --- a/styles/frames/_frame2.scss +++ b/styles/frames/_frame2.scss @@ -40,6 +40,7 @@ color: white; h1 { + text-align: center; font-size: 3.7em; padding: 0.05em 0.6em; background: linear-gradient(to right,$night-color 50%,$primary-blue 50%); diff --git a/styles/frames/_frame3.scss b/styles/frames/_frame3.scss index ec1a09a..c05132c 100644 --- a/styles/frames/_frame3.scss +++ b/styles/frames/_frame3.scss @@ -1,40 +1,71 @@ .frame3 { background-color: $primary-blue; display: flex; + flex-direction: column; justify-content: center; align-items: center; + &__text { + z-index: 999; + position: relative; + bottom: -8em; + + h1 { + font-size: clamp(2em, 3.7em, 7vw); /* add min and max font sizes */ + height: 100%; + width: 100%; + background: linear-gradient(to right,$primary-blue 50%,$secondary-blue 50%); + background-size: 200% 100%; + background-position:left bottom; + color: rgba(255, 255, 255, 0); + transition: all 1.2s ease-in-out; + padding: 0.2em 0.4em; + } + + .live { + background: linear-gradient(to right, $primary-blue 50%, $secondary-blue 50%); + background-size: 200% 100%; + background-position:right bottom; + color: rgb(255, 255, 255); + } + + h2 { + font-size: clamp(1.5em, 2em, 4vw); /* add min and max font sizes */ + } + + } + &__trip { - width: auto; - height: auto; + position: relative; max-width: 90%; display: flex; justify-content: center; + overflow: hidden; svg { - max-width: 90%; z-index: 20; + position: relative; } &-blocker { width: 100%; height: 100%; position: absolute; background-color: $primary-blue; - top: 0; - animation-name: move-down-and-left; - animation-duration: 5s; - animation-fill-mode: forwards; + transform: translateY(0) translateX(0); z-index: 40; + border-radius: 0 300px 0 0; } + &-blocker.animate { + animation-name: move-down-and-left; + animation-duration: 6s; + animation-fill-mode: forwards; + } &-observe { position: absolute; - background-color: black; - height: 50px; - width: 50px; - bottom: 0; + bottom: 10%; z-index: 999; } } diff --git a/styles/index.css b/styles/index.css index 6b0ced5..dd0d9b6 100644 --- a/styles/index.css +++ b/styles/index.css @@ -88,7 +88,7 @@ p { transform: translateY(0) translateX(0); } 20% { - transform: translateY(40%) translateX(-19%); + transform: translateY(40%) translateX(0); } 100% { transform: translateY(40%) translateX(-100%); @@ -190,6 +190,7 @@ body section { color: white; } .frame2__text h1 { + text-align: center; font-size: 3.7em; padding: 0.05em 0.6em; background: linear-gradient(to right, #161f4d 50%, #b8dbff 50%); @@ -230,37 +231,62 @@ body section { .frame3 { background-color: #b8dbff; display: flex; + flex-direction: column; justify-content: center; align-items: center; } +.frame3__text { + z-index: 999; + position: relative; + bottom: -8em; +} +.frame3__text h1 { + font-size: clamp(2em, 3.7em, 7vw); /* add min and max font sizes */ + height: 100%; + width: 100%; + background: linear-gradient(to right, #b8dbff 50%, #2C3D94 50%); + background-size: 200% 100%; + background-position: left bottom; + color: rgba(255, 255, 255, 0); + transition: all 1.2s ease-in-out; + padding: 0.2em 0.4em; +} +.frame3__text .live { + background: linear-gradient(to right, #b8dbff 50%, #2C3D94 50%); + background-size: 200% 100%; + background-position: right bottom; + color: rgb(255, 255, 255); +} +.frame3__text h2 { + font-size: clamp(1.5em, 2em, 4vw); /* add min and max font sizes */ +} .frame3__trip { - width: auto; - height: auto; position: relative; max-width: 90%; display: flex; justify-content: center; + overflow: hidden; } .frame3__trip svg { - max-width: 90%; z-index: 20; + position: relative; } .frame3__trip-blocker { width: 100%; height: 100%; position: absolute; background-color: #b8dbff; - top: 0; + transform: translateY(0) translateX(0); + z-index: 40; + border-radius: 0 300px 0 0; +} +.frame3__trip-blocker.animate { animation-name: move-down-and-left; - animation-duration: 5s; + animation-duration: 6s; animation-fill-mode: forwards; - z-index: 40; } .frame3__trip-observe { position: absolute; - background-color: black; - height: 50px; - width: 50px; - bottom: 0; + bottom: 10%; z-index: 999; }/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/styles/index.css.map b/styles/index.css.map index fd1e5b0..7297351 100644 --- a/styles/index.css.map +++ b/styles/index.css.map @@ -1 +1 @@ -{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_layout.scss","frames/_frame1.scss","_variables.scss","frames/_frame2.scss","frames/_frame3.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file +{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_layout.scss","frames/_frame1.scss","_variables.scss","frames/_frame2.scss","frames/_frame3.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file From 93af7b2ce81f0af44c0c335de5d56f150c66568e Mon Sep 17 00:00:00 2001 From: Vegard Madsen Date: Thu, 4 May 2023 04:01:58 +0200 Subject: [PATCH 8/8] Wrote some on readme and finished frame 4 --- README.md | 22 +++++++++ images/family-with-balloons.svg | 88 +++++++++++++++++++++++++++++++++ images/frame.svg | 8 +++ index.html | 28 ++++++++++- script.js | 39 ++++++++++++++- styles/_layout.scss | 4 +- styles/frames/_frame4.scss | 42 ++++++++++++++++ styles/index.css | 41 +++++++++++++++ styles/index.css.map | 2 +- 9 files changed, 269 insertions(+), 5 deletions(-) create mode 100644 images/family-with-balloons.svg create mode 100644 images/frame.svg create mode 100644 styles/frames/_frame4.scss diff --git a/README.md b/README.md index 41e4231..a862e01 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,24 @@ [![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/E1TYCvbT) [![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=11035023&assignment_repo_type=AssignmentRepo) + + + +What the project does: +This project educates the user about conflicts and progress about the world. It does this with interesting and captivating animations. + +Why the project is useful: +It gives user a fun and interactive way of taking in the imprtant content that is extracted from https://sdgs.un.org/goals/goal16. + +How users can get started with the project: +Users can get started by navigating to the page where it's hosted +-->https://advancedcss2023.github.io/assignment-3--scrollytelling-group_13/ + + +Where users can get help with your project: +Users can clone the repository to their computer and and tweak the code, if they want to. But they need to make a request that need to get allowed by a admin to push new content. + + +Which technology is used: +html, scss and javascript +Who maintains and contributes to the project: +Vegard \ No newline at end of file diff --git a/images/family-with-balloons.svg b/images/family-with-balloons.svg new file mode 100644 index 0000000..2e9da86 --- /dev/null +++ b/images/family-with-balloons.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/frame.svg b/images/frame.svg new file mode 100644 index 0000000..a811649 --- /dev/null +++ b/images/frame.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/index.html b/index.html index 7d1ef6f..f33033d 100644 --- a/index.html +++ b/index.html @@ -126,8 +126,32 @@

had been forcibly
displaced worldwide
(may 2022)

-
-
+
+
+ +

+ 135 countries has adapted access to information laws, with at least 30 since 2015. This is a positive indication of the growing recognition of transparency and accountability in governance. +

+
+ + +
+
+
+
+
+
+
+
+
+
+ + +
+ +
+ + diff --git a/script.js b/script.js index 7fe631e..38a7e32 100644 --- a/script.js +++ b/script.js @@ -29,7 +29,7 @@ const observer3 = new IntersectionObserver((entries) => { entries.forEach((entry) => { if(lightBeam.style.fill != "#b8dbff"){ if (entry.isIntersecting) { - console.log("Element is intersecting"); + lightBeam.style.fill = "#b8dbff"; setTimeout(function() { @@ -73,3 +73,40 @@ const observer5 = new IntersectionObserver(entries => { }); }); observer5.observe(stat3); + + + +const animatedBlinds = document.querySelectorAll(".blind"); + +function animateBlind(blind) { + blind.animate( + { + transform: ["rotateX(0deg)", "rotateX(90deg)"], + backgroundColor: ["#161f4d", "lightblue"] + }, + { + duration: 3000, + easing: "ease-in-out", + fill: "both" + } + ); +} + +animatedBlinds.forEach(blind => { + let once = false; + const observer = new IntersectionObserver( + entries => { + entries.forEach(entry => { + if (entry.isIntersecting && !once) { + animateBlind(entry.target); + once = true; + } + }); + }, + { + rootMargin: "-50px 0px", + threshold: 1.0 + } + ); + observer.observe(blind); +}); diff --git a/styles/_layout.scss b/styles/_layout.scss index 86e2e0f..1ac3f30 100644 --- a/styles/_layout.scss +++ b/styles/_layout.scss @@ -17,4 +17,6 @@ body { @import 'frames/frame2'; -@import 'frames/frame3'; \ No newline at end of file +@import 'frames/frame3'; + +@import 'frames/frame4'; \ No newline at end of file diff --git a/styles/frames/_frame4.scss b/styles/frames/_frame4.scss new file mode 100644 index 0000000..0301e3a --- /dev/null +++ b/styles/frames/_frame4.scss @@ -0,0 +1,42 @@ +.frame4 { + background-color: $primary-blue; + display: flex; + align-items: center; + justify-content: center; + padding-top: 15em; + + &__text { + position: absolute; + width: 700px; + max-width: 80%; + z-index: 1; + h2 { + font-size: clamp(2em, 2.7em, 4vw); + color: $night-color; + text-transform: none; + } + img { + height: 300px; + float: right; + } + } + &__window-blinds { + width: 100%; + overflow: hidden; + height: 100vh; + z-index: 10; + .blind { + width: 100%; + height: 10%; + background-color: $night-color; + transform-origin: center; + z-index: 999; + } + .roof { + width: 100%; + height: 2%; + background-color: $night-color; + } + } + +} \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index dd0d9b6..5118423 100644 --- a/styles/index.css +++ b/styles/index.css @@ -289,4 +289,45 @@ body section { position: absolute; bottom: 10%; z-index: 999; +} + +.frame4 { + background-color: #b8dbff; + display: flex; + align-items: center; + justify-content: center; + padding-top: 15em; +} +.frame4__text { + position: absolute; + width: 700px; + max-width: 80%; + z-index: 1; +} +.frame4__text h2 { + font-size: clamp(2em, 2.7em, 4vw); + color: #161f4d; + text-transform: none; +} +.frame4__text img { + height: 300px; + float: right; +} +.frame4__window-blinds { + width: 100%; + overflow: hidden; + height: 100vh; + z-index: 10; +} +.frame4__window-blinds .blind { + width: 100%; + height: 10%; + background-color: #161f4d; + transform-origin: center; + z-index: 999; +} +.frame4__window-blinds .roof { + width: 100%; + height: 2%; + background-color: #161f4d; }/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/styles/index.css.map b/styles/index.css.map index 7297351..e5d8af2 100644 --- a/styles/index.css.map +++ b/styles/index.css.map @@ -1 +1 @@ -{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_layout.scss","frames/_frame1.scss","_variables.scss","frames/_frame2.scss","frames/_frame3.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file +{"version":3,"sources":["_fonts.scss","_clear.scss","index.css","_animation.scss","_layout.scss","frames/_frame1.scss","_variables.scss","frames/_frame2.scss","frames/_frame3.scss","frames/_frame4.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file