diff --git a/Parallax Sunset/Sunset-Screenshot.png b/Parallax Sunset/Sunset-Screenshot.png new file mode 100644 index 0000000..addbc21 Binary files /dev/null and b/Parallax Sunset/Sunset-Screenshot.png differ diff --git a/Parallax Sunset/images/sun.svg b/Parallax Sunset/images/sun.svg new file mode 100644 index 0000000..448b04b --- /dev/null +++ b/Parallax Sunset/images/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Parallax Sunset/images/wave.svg b/Parallax Sunset/images/wave.svg new file mode 100644 index 0000000..be078db --- /dev/null +++ b/Parallax Sunset/images/wave.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Parallax Sunset/parallax-sunset.html b/Parallax Sunset/parallax-sunset.html new file mode 100644 index 0000000..afb2e08 --- /dev/null +++ b/Parallax Sunset/parallax-sunset.html @@ -0,0 +1,41 @@ + + + + + + + + + + Parallax Waves + + + + + + +
+ + +
+
+
+ + + +
+ +
+
+ +
+
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/Parallax Sunset/readme.md b/Parallax Sunset/readme.md new file mode 100644 index 0000000..5d7b7fd --- /dev/null +++ b/Parallax Sunset/readme.md @@ -0,0 +1,3 @@ +# Parallax Sunset + +Scrollable sunset with animated waves created by sinc0115 \ No newline at end of file diff --git a/Parallax Sunset/style.css b/Parallax Sunset/style.css new file mode 100644 index 0000000..8341d2f --- /dev/null +++ b/Parallax Sunset/style.css @@ -0,0 +1,68 @@ +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; +} + +#container { + background-image: linear-gradient(#ff9e61, #ff7620); + width: 100vw; + height: 100vh; + overflow-x: hidden; + overflow-y: auto; + perspective: 1px; + perspective-origin: center; +} + +#parallax { + position: relative; + height: 100vh; + transform-style: preserve-3d; + transform: scale(0.9); + transition: transform 250ms ease-out; +} + +.sun { + background-image: url(images/sun.svg); + width: 100vw; + height: 100%; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} + +img.wave { + width: 100vw; + display: block; + position: absolute; + top: 40vh; +} + +.wave.one { + transform: translateY(1vh); + animation: animateZ 5s infinite ease-in-out; +} +.wave.two { + transform: translateY(1vh); + animation: animateZ 7s infinite ease-in-out; +} +.wave.three { + transform: translateY(1vh); + animation: animateZ 4s infinite ease-in-out; +} + +@keyframes animateZ { + 0% { + transform: translateY(1vh); + } + 50% { + transform: translateY(10vh); + } + 100% { + transform: translateY(1vh); + } +} diff --git a/README.md b/README.md index 310a3f9..9004321 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,7 @@ | Card Flip on Hold | https://gabrielgomeso.github.io/card_flip.html | | Credit Cards | https://iqbalutomo.github.io/credit-cards/ | | Loader Glowing | https://jonathanallisson.github.io/loader/ | +| Parallax Sunset | https://sinc0115.github.io/parallax-sunset/ | | Captain America Animation | https://jonathanallisson.github.io/Captain/ | ---