From 0a210385b1ff7cc3900a28f42e3447cadcc68e64 Mon Sep 17 00:00:00 2001 From: Aryan Sharma <128162387+Aryan741x@users.noreply.github.com> Date: Mon, 23 Oct 2023 23:33:58 +0530 Subject: [PATCH] Animation added to art directory (#2287) Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com> --- Art/Aryan741x/animation-1.png | Bin 0 -> 7044 bytes Art/Aryan741x/index.html | 16 +++++++ Art/Aryan741x/style.css | 84 ++++++++++++++++++++++++++++++++++ include.js | 7 +++ 4 files changed, 107 insertions(+) create mode 100644 Art/Aryan741x/animation-1.png create mode 100644 Art/Aryan741x/index.html create mode 100644 Art/Aryan741x/style.css diff --git a/Art/Aryan741x/animation-1.png b/Art/Aryan741x/animation-1.png new file mode 100644 index 0000000000000000000000000000000000000000..d0b2caa0b422b39d48a337013c4496e0a2a69741 GIT binary patch literal 7044 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 literal 0 HcmV?d00001 diff --git a/Art/Aryan741x/index.html b/Art/Aryan741x/index.html new file mode 100644 index 000000000..5a552a615 --- /dev/null +++ b/Art/Aryan741x/index.html @@ -0,0 +1,16 @@ + + + + + + DAY 2 Challenge + + + +
+
+
+
+
+ + diff --git a/Art/Aryan741x/style.css b/Art/Aryan741x/style.css new file mode 100644 index 000000000..10a8cdf02 --- /dev/null +++ b/Art/Aryan741x/style.css @@ -0,0 +1,84 @@ +*{ + margin:0; + padding:0; + box-sizing: border-box; + background-color: #3faf82 +} +body{ + min-height:100vh; + display:flex; + justify-content: center; + align-items: center; +} +.menu{ + position: relative; + display: flex; + flex-direction:column; + row-gap:16px; + cursor: pointer; +} +.menu div{ + width:100px; + height:10px; + background-color: white; + box-shadow:0 4px 20px #00000030; + border-radius: 2px; + transition:all 0.3s; +} +.menu.active div:nth-child(2){ + transform:scale(0); + opacity:0; +} +.menu.active div:nth-child(1){ + animation:bar1Anim 0.3s ease-in-out forwards; +} +@keyframes bar1Anim{ + 50%{ + transform:translateY(24px); + } + 100%{ + transform:translateY(24px) rotateZ(45deg); + } +} +.menu.active div:nth-child(3){ + animation:bar2Anim 0.3s ease-in-out forwards; +} +@keyframes bar2Anim{ + 50%{ + transform:translateY(-24px); + } + 100%{ + transform:translateY(-24px) rotateZ(135deg); + } +} +.menu div:nth-child(1){ + animation: bar1revAnim 0.3s ease-in-out; +} +@keyframes bar1revAnim{ + 0%{ + transform:translateY(24px) rotateZ(45deg); + } + 50%{ + transform:translateY(24px) rotateZ(0deg); + } + 100%{ + transform: translateY(0px); + } +} +.menu div:nth-child(3){ + animation: bar3revAnim 0.3s ease-in-out; +} +@keyframes bar3revAnim{ + 0%{ + transform:translateY(-24px) rotateZ(135deg); + } + 50%{ + transform:translateY(-24px) rotateZ(0deg); + } + 100%{ + transform: translateY(0px); + } +} +.menu.no-animation div{ + animation: none; +} \ No newline at end of file diff --git a/include.js b/include.js index 9581b7e36..b1901ed6f 100644 --- a/include.js +++ b/include.js @@ -2229,6 +2229,13 @@ let cards = [ githubLink: 'https://github.com/vkumar786' }, { + artName: 'Menu Bar', + pageLink: './Art/Aryan741x/index.html', + imageLink: './Art/Aryan741x/animation-1.png', + author: 'Aryan741x', + githubLink: 'https://github.com/Aryan741x' + }, + { artName: 'Rotating Box', pageLink: './Art/Dhairya-Mehra/animation.html', imageLink: './Art/Dhairya-Mehra/animation.gif',