About
Explore
Events & Classes
Support Us
Join
Sign In
speedcoder99
View Project Page
Run
Fullscreen
My vid intro
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,shrink-to-fit=no,width=device-width"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <!-- your name --> <h1>speedcoder99</h1> <!-- your pfp/image (replace src with your img source) --> <img src="https://justcodaborate.org/pfps/zaydor%20is%20cooooool%20(2).png" alt="profile pic"> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Sigmar+One&display=swap'); body { font-family: Sigmar One; font-weight: bold; background-color: #177591; background: linear-gradient(27deg, #18ed00, #13bd00, #0f9100, #0d7301); background-size: 800% 800%; animation: background 2s 15; } h1 { display: block; color: white; font-size: 15px; text-align: center; white-space: nowrap; overflow: hidden; position: absolute; top: 50%; left: 50%; animation-name: first-spin, second-spin, grow-shrink, middle-up-down; animation-duration: 0.3s, 0.3s, 1s, 1s; animation-iteration-count: 5, 5, 2, 2; animation-delay: 0s, 2s, 4s, 6s; transform: translate(-50%,-75%); text-shadow: -2px 2px 0 #45cf36,2px 2px 0 #45cf36,2px -2px 0 #45cf36,-2px -2px 0 #45cf36; } img { display: none; width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%,-75%); filter: grayscale(0%) sepia(0%) contrast(100%) saturate(100%); animation-name: grayscale-sepia, contrast, saturate; animation-duration: 2s, 2s, 2s; animation-iteration-count: 2, 2, 2; animation-delay: 0s, 4s, 8s; animation-play-state: paused; } @keyframes background { 0% { background-position: 0% 43%; } 50% { background-position: 100% 58%; } 100% { background-position: 0% 43%; } } @keyframes first-spin { 0% { transform: rotate(0deg) translate(-50%,-75%); left: 50%; } 15% { transform: rotate(45deg) translate(-50%,-75%); left: 50%; } 30% { transform: rotate(135deg) translate(-50%,-75%); left: 50%; } 45% { transform: rotate(180deg) translate(-50%,-75%); left: 50%; } 60% { transform: rotate(225deg) translate(-50%,-75%); left: 50%; } 75% { transform: rotate(270deg) translate(-50%,-75%); left: 50%; } 90% { transform: rotate(315deg) translate(-50%,-75%); left: 50%; } 105% { transform: rotate(360deg) translate(-50%,-75%); left: 50%; } } @keyframes second-spin { 0% { transform: rotate(-0deg) translate(-50%,-75%); left: 50%; } 15% { transform: rotate(-45deg) translate(-50%,-75%); left: 50%; } 30% { transform: rotate(-135deg) translate(-50%,-75%); left: 50%; } 45% { transform: rotate(-180deg) translate(-50%,-75%); left: 50%; } 60% { transform: rotate(-225deg) translate(-50%,-75%); left: 50%; } 75% { transform: rotate(-270deg) translate(-50%,-75%); left: 50%; } 90% { transform: rotate(-315deg) translate(-50%,-75%); left: 50%; } 105% { transform: rotate(-360deg) translate(-50%,-75%); left: 50%; } } @keyframes grow-shrink { from { font-size: 15px; } to { font-size: 34.5px; } } @keyframes middle-up-down { 0% { top: 50%; translateY(-75%); } 50% { top: 0%; translateY(-75%); } 100% { top: 90%; translateY(-75%); } } @keyframes grayscale-sepia { 0% { filter: grayscale(0%); } 25% { filter: grayscale(100%); } 50% { filter: sepia(0%); } 100% { filter: sepia(150%); } } @keyframes contrast { 0% { filter: contrast(100%); } 25% { filter: contrast(200%); } 50% { filter: contrast(300%); } 75% { filter: contrast(400%); } } @keyframes saturate { 0% { filter: saturate(100%); } 12% { filter: saturate(400%); } 24% { filter: saturate(600%); } 36% { filter: saturate(800%); } 48% { filter: saturate(1000%); } 60% { filter: saturate(1200%); } 72% { filter: saturate(1400%); } 84% { filter: saturate(1600%); } 96% { filter: saturate(1800%); } 100% { filter: saturate(2000%); } }
$('h1').on('animationend webkitAnimationEnd', function(event) { if(event.originalEvent.animationName === "middle-up-down") { $('h1').css("display","none"); $('img').css("display","block"); $('img').css("animation-play-state", "running"); } });