diff --git a/README.md b/README.md index 97aafea..a862e01 100644 --- a/README.md +++ b/README.md @@ -1 +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/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/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/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/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/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 new file mode 100644 index 0000000..f33033d --- /dev/null +++ b/index.html @@ -0,0 +1,159 @@ + + + + + + + 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

+
+
+
+
+
+

1/3

+

of the

+
+

world population

+

fear walking in

+

in their neighbourhoods
+ at night

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+

a record

+

100 million people

+

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. +

+
+ + +
+
+
+
+
+
+
+
+
+
+ + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..38a7e32 --- /dev/null +++ b/script.js @@ -0,0 +1,112 @@ +// 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'); + } else { + stat2.classList.remove('live'); + } + }); +}); +observer2.observe(stat2); + +const lightBeam = document.getElementById("light-beam"); +const observer3 = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if(lightBeam.style.fill != "#b8dbff"){ + if (entry.isIntersecting) { + + lightBeam.style.fill = "#b8dbff"; + + setTimeout(function() { + lightBeam.style.fill = ""; + }, 500); + + setTimeout(function() { + lightBeam.style.fill = "#b8dbff"; + }, 1400); + + } + } + }); +}, { threshold: 0.5 }); + +const lampObs = document.querySelector('.observe'); +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); + + + +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/_animation.scss b/styles/_animation.scss new file mode 100644 index 0000000..2fa890f --- /dev/null +++ b/styles/_animation.scss @@ -0,0 +1,71 @@ +@keyframes slide-in { + 0% { + transform: translateX(-1300px); + } + 100% { + transform: translateX(-60%); + } +} + +@keyframes wing-fly { + 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: 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: rotate(0deg); + } +} + + + +@keyframes eyelid-blink { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(5px); + } + 100% { + transform: translateY(0); + } +} + + +@keyframes move-down-and-left { + 0% { + transform: translateY(0) translateX(0); + } + 20% { + transform: translateY(40%) translateX(0); + } + 100% { + transform: translateY(40%) translateX(-100%); + } +} 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..6ff498c --- /dev/null +++ b/styles/_fonts.scss @@ -0,0 +1,27 @@ +@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..1ac3f30 --- /dev/null +++ b/styles/_layout.scss @@ -0,0 +1,22 @@ + + + +body { + section { + height: auto; + min-height: 100vh; + width: 100%; + position: relative; + } +} + + + + +@import 'frames/frame1'; + +@import 'frames/frame2'; + +@import 'frames/frame3'; + +@import 'frames/frame4'; \ No newline at end of file diff --git a/styles/_variables.scss b/styles/_variables.scss new file mode 100644 index 0000000..fd37b65 --- /dev/null +++ b/styles/_variables.scss @@ -0,0 +1,15 @@ +// spacing +$full-height: 100vh; + + + +//colors +$primary-blue: #b8dbff; +$secondary-blue: #2C3D94; +$night-color: #161f4d; + + + + +//animation + diff --git a/styles/frames/_frame1.scss b/styles/frames/_frame1.scss new file mode 100644 index 0000000..138dd8a --- /dev/null +++ b/styles/frames/_frame1.scss @@ -0,0 +1,71 @@ +.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 { + 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 new file mode 100644 index 0000000..cf09d5f --- /dev/null +++ b/styles/frames/_frame2.scss @@ -0,0 +1,92 @@ +.frame2 { + 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%; + position: relative; + display: flex; + justify-content: center; + align-items: center; + + + svg { + max-width: 80%; + + } + + #light-beam { + fill: $night-color; + } + + .observe { + position: absolute; + bottom: 0; + } + } + + + &__text { + position: relative; + text-align: center; + line-height: 1.5; + 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%); + 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, $night-color 50%, $primary-blue 50%); + background-size: 200% 100%; + background-position:right bottom; + color: black; + } + + 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; + } + } +} + +@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..c05132c --- /dev/null +++ b/styles/frames/_frame3.scss @@ -0,0 +1,72 @@ +.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 { + + position: relative; + max-width: 90%; + display: flex; + justify-content: center; + overflow: hidden; + + + svg { + z-index: 20; + position: relative; + } + &-blocker { + width: 100%; + height: 100%; + position: absolute; + background-color: $primary-blue; + 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; + bottom: 10%; + z-index: 999; + } + } +} \ 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 new file mode 100644 index 0000000..5118423 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,333 @@ +@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(-30deg); + } + 20% { + transform: rotate(0deg); + } + 30% { + transform: rotate(-20deg) skew(-30deg); + } + 40% { + transform: rotate(0deg); + } + 50% { + 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: rotate(0deg); + } +} +@keyframes eyelid-blink { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(5px); + } + 100% { + transform: translateY(0); + } +} +@keyframes move-down-and-left { + 0% { + transform: translateY(0) translateX(0); + } + 20% { + transform: translateY(40%) translateX(0); + } + 100% { + transform: translateY(40%) translateX(-100%); + } +} +body section { + height: auto; + min-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 { + 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; +} +.frame1__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 { + 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%; + 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 { + text-align: center; + font-size: 3.7em; + padding: 0.05em 0.6em; + 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, #161f4d 50%, #b8dbff 50%); + background-size: 200% 100%; + background-position: right bottom; + color: black; +} +.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; +} + +@media screen and (max-width: 900px) { + .frame2 { + flex-direction: column; + } +} +.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 { + position: relative; + max-width: 90%; + display: flex; + justify-content: center; + overflow: hidden; +} +.frame3__trip svg { + z-index: 20; + position: relative; +} +.frame3__trip-blocker { + width: 100%; + height: 100%; + position: absolute; + background-color: #b8dbff; + 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: 6s; + animation-fill-mode: forwards; +} +.frame3__trip-observe { + 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 new file mode 100644 index 0000000..e5d8af2 --- /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","frames/_frame3.scss","frames/_frame4.scss"],"names":[],"mappings":"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","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';