diff --git a/Art/al3shan33-animatedText/index.html b/Art/al3shan33-animatedText/index.html new file mode 100644 index 000000000..5a66ebc26 --- /dev/null +++ b/Art/al3shan33-animatedText/index.html @@ -0,0 +1,26 @@ + + + + + + Animated Text + + + +
+
+ +
+
+ + \ No newline at end of file diff --git a/Art/al3shan33-animatedText/meta.json b/Art/al3shan33-animatedText/meta.json new file mode 100644 index 000000000..067f08427 --- /dev/null +++ b/Art/al3shan33-animatedText/meta.json @@ -0,0 +1,4 @@ +{ + "artName": "Animated Text", + "githubHandle": "al3shan33" +} \ No newline at end of file diff --git a/Art/al3shan33-animatedText/styles.css b/Art/al3shan33-animatedText/styles.css new file mode 100644 index 000000000..1298b72c2 --- /dev/null +++ b/Art/al3shan33-animatedText/styles.css @@ -0,0 +1,100 @@ +@import url("https://fonts.googleapis.com/css2?family=Carrois+Gothic&family=Oswald:wght@300;400&family=Raleway:wght@300;400;500;700&display=swap"); +* { + padding: 0; + margin: 0; +} +body { + font-size: 16px; + font-weight: 400; + color: #333; + font-family: "Raleway", sans-serif; +} +.container { + position: relative; + width: 100dvw; + height: 100dvh; + background-color: #00000098; +} +.text_wrapper { + position: fixed; + width: 100vw; + top: 47vh; + overflow: hidden; +} +.text_list { + list-style-type: none; + position: relative; + height: 60px; + overflow: hidden; +} +.text_list li { + position: absolute; + top: 0; + left: 0; + opacity: 0; + animation: slideFromBottom 9s linear infinite; + animation-fill-mode: forwards; + width: 100%; + text-align: center; +} + +.text_list li:nth-child(1) { + animation-delay: 0s; +} +.text_list li:nth-child(2) { + animation-delay: 3s; +} +.text_list li:nth-child(3) { + animation-delay: 6s; +} +.text_list p { + color: #fff; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); + font-size: 36px; + margin: 10px 0 0 10px; + white-space: nowrap; + width: 100%; + text-align: center; + margin: 0; +} +.text_list p span { + color: #d72e22; + font-weight: 500; +} +@keyframes slideFromBottom { + 0% { + opacity: 0; + transform: translateY(100%); + } + 10% { + opacity: 1; + transform: translateY(0); + } + 30% { + opacity: 1; + transform: translateY(0); + } + 40% { + opacity: 0; + transform: translateY(-100%); + } + 100% { + opacity: 0; + transform: translateY(-100%); + } +} +@media screen and (max-width: 992px) { + .text_wrapper { + top: 20dvh; + padding: 0; + } + .text_list p { + font-size: 48px; + } +} + +@media screen and (max-width: 767px) { + .text_list p { + font-size: 24px; + } +} \ No newline at end of file