Everyone, just calm down...
How do I make an everyone, just calm down...?
I wanted to try out some SVG animation libraries. In this pen, I used the Velocity.js library. I wanted to combine standard element transitions with SVG animation to see if I could get away with using one library and no jQuery.. What is a everyone, just calm down...? How do you make a everyone, just calm down...? This script and codes were developed by Bryan on 29 November 2022, Tuesday.
Everyone, just calm down... - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Everyone, just calm down...</title> <script src="//cdn.jsdelivr.net/velocity/1.5/velocity.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="circle-wrapper"> <div class="outter-circle-background"> <div class="outter-circle" id="the-circle"> <span class="task-name"> Relax </span> <span class="inner-text">Breath</span> <div class="inner-fill"> </div> </div> </div> <svg id="svg"> <g> <circle cx="200" cy="190" r="120" class="main-circle"></circle> </g> </svg>
</div> <script src="js/index.js"></script>
</body>
</html>
Everyone, just calm down... - Script Codes CSS Codes
body { background: #FA5455; font-family: 'Roboto', sans-serif;
}
.circle-wrapper { margin: 50px auto 0 auto; padding: 20px; position: relative; width: 200px; height: 300px;
}
.outter-circle-background { cursor: pointer; margin: 0 auto; border: 10px solid rgba(255, 255, 255, 0); width: 240px; height: 240px; overflow: hidden; float: left; border-radius: 50%; position: absolute; transform-origin: 50% 50%; box-sizing: border-box;
}
.task-name,
.inner-text { display: block; color: white; text-align: center; top: 90px; margin: 0 auto; opacity: 0; font-weight: 300; font-size: 30px; position: absolute; left: 0; width: 100%;
}
.task-name { opacity: 1;
}
.outter-circle { cursor: pointer; margin: 0 auto; width: 200px; height: 200px; overflow: hidden; border-radius: 50%;
}
.outter-circle .inner-fill { background: rgba(255, 255, 255, 0.4); width: 400px; left: -100px; height: 0; position: absolute; bottom: 0; margin: 0 auto;
}
form { max-width: 300px; margin: 0 auto;
}
form input { text-align: center; color: white; background: none; border: none; border-bottom: 3px solid rgba(255, 255, 255, 0.4); width: 100%; margin-bottom: 20px; outline: none;
}
form input:first-child { margin-top: 30px;
}
#svg { position: absolute; z-index: -1; top: -50px; left: -60px; height: 400px; width: 400px;
}
.main-circle { fill: rgba(255, 255, 255, 0.1); stroke: rgba(255, 255, 255, 0); stroke-width: 10;
}
Everyone, just calm down... - Script Codes JS Codes
var toggle = true, theCircle = document.getElementById('the-circle'), theCircleBackground = document.getElementsByClassName('outter-circle-background'), theCircleWrapper = document.getElementsByClassName('circle-wrapper'), thefill = document.getElementsByClassName('inner-fill'), thetext = document.getElementsByClassName('inner-text'), svgCircle = document.getElementsByClassName('main-circle'), taskname = document.getElementsByClassName('task-name');
toggleTo = function() { Velocity( svgCircle, { x: 210, r: 150 }, { duration: 2000, easing: "easeInSine", reset: {opacity: 1, r: 100}, loop: true } ); Velocity( thefill, { height: 300 }, { duration: 1000, easing: "ease", complete: function() { Velocity(taskname, { opacity: 0 }, 300); Velocity(thetext, { opacity: 1 }, {delay: 300}, 300); } });
}
toggleFrom = function() { Velocity(svgCircle, { loop: false }); Velocity(thetext, { opacity: 0 }, { duration: 300, complete: function() { Velocity(taskname, { opacity: 1 }, 300); Velocity(thefill, { height: 0 }, {easing: "easeInSine", delay: 300}, 1000); } });
}
theCircle.addEventListener('click', function(e) { if (toggle) { toggleTo(); toggle = false; } else { toggleFrom(); toggle = true; }
});
Developer | Bryan |
Username | Brydave |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 3,704 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Contact Card | 6,033 Kb |
A Pen by Bryan | 2,286 Kb |
Dollar Amount Input UI Test | 3,298 Kb |
Dollar Amount Input UI Test - Firefox Compatibility | 3,337 Kb |
Window Blinds Dropdown | 5,327 Kb |
JQuery Slider Practice | 2,848 Kb |
CSS Animated Hamburger Icon | 2,657 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Rotate Demo | Agelber | 3,061 Kb |
Incremental game | Eprouver | 5,868 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Loading animation - freedom purchase | Rocbear | 2,567 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Typefaces with descriptions | Megandoty | 2,944 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!