Welcome to Transcriptic
How do I make an welcome to transcriptic?
What is a welcome to transcriptic? How do you make a welcome to transcriptic? This script and codes were developed by Alexander Hadik on 08 September 2022, Thursday.
Welcome to Transcriptic - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Welcome to Transcriptic</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container" class=container> <div id="canary" class="circle"></div> <div class="circle"></div> <div class="circle circle--nucleus"></div>
</div>
<svg> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="12, 12" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 24 -9" result="goo" /> <feBlend in="SourceGraphic" in2="goo" /> </filter>
</svg> <script src="js/index.js"></script>
</body>
</html>
Welcome to Transcriptic - Script Codes CSS Codes
html, body { width: 100%; height: 100%;
}
body { background-color: #0E202E;
}
button { border: 1px solid #FFC40C; color: #FFC40C; padding: 5px 10px; border-radius: 5px; background: none; outline: none;
}
.container { width: 100%; height: 100%; filter: url("#goo");
}
.circle { box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: #FFC40C; width: 50px; height: 50px;
}
.circle:nth-child(1) { animation-name: pop-in, split-down, split-down-out, pop-out; animation-duration: 0.5s, 1s, 1s, 0.5s; animation-timing-function: ease-in, cubic-bezier(0.87, 0.01, 0.88, 1.02); animation-delay: 0s, .5s, 3.5s, 4s; animation-fill-mode: forwards; animation-play-state: running;
}
.circle:nth-child(2) { animation-name: pop-in, split-up, split-left, split-left-out, split-up-out, pop-out; animation-duration: 0.5s, 1s, 1s, 1s, 1s, 0.5s; animation-timing-function: ease-in, cubic-bezier(0.87, 0.01, 0.88, 1.02), cubic-bezier(0.87, 0.01, 0.88, 1.02); animation-delay: 0s, .5s, .7s, 2.3s, 3.3s, 4s; animation-fill-mode: forwards; animation-play-state: running;
}
.circle:nth-child(3) { animation-name: pop-in, split-up, split-right, split-right-out, split-up-out, pop-out; animation-duration: 0.5s, 1s, 1s, 1s, 1s, 0.5s; animation-timing-function: ease-in, cubic-bezier(0.87, 0.01, 0.88, 1.02), cubic-bezier(0.87, 0.01, 0.88, 1.02); animation-delay: 0s, .5s, .7s, 2.3s, 3.3s, 4s; animation-fill-mode: forwards; animation-play-state: running;
}
.circle--nucleus { background-color: #0E202E; border: 18px solid #FFC40C;
}
@keyframes pop-in { 0% { transform: scale(0); transform: scale(0); } 80% { transform: scale(1.3); transform: scale(1.3); } 100% { transform: scale(1); transform: scale(1); }
}
@keyframes pop-out { 0% { transform: scale(1); transform: scale(1); } 20% { transform: scale(1.3); transform: scale(1.3); } 100% { transform: scale(0); transform: scale(0); }
}
@keyframes split-up { 0%, 20% { top: 50%; } 80%, 100% { top: calc(50% - 35px); }
}
@keyframes split-up-out { 0%, 20% { top: calc(50% - 35px); } 80%, 100% { top: 50%; }
}
@keyframes split-down { 0%, 20% { top: 50%; } 80%, 100% { top: calc(50% + 35px); }
}
@keyframes split-down-out { 0%, 20% { top: calc(50% + 35px); } 80%, 100% { top: 50%; }
}
@keyframes split-left { 0%, 20% { left: 50%; } 80%, 100% { left: calc(50% - 28px); }
}
@keyframes split-left-out { 0%, 20% { left: calc(50% - 28px); } 80%, 100% { left: 50%; }
}
@keyframes split-right { 0%, 20% { left: 50%; } 80%, 100% { left: calc(50% + 28px); }
}
@keyframes split-right-out { 0%, 20% { left: calc(50% + 28px); } 80%, 100% { left: 50%; }
}
Welcome to Transcriptic - Script Codes JS Codes
'use strict';
// Replay the animation
var iter = 0;
function callback() { if (iter == 0) { var circle = document.querySelector('#canary'); circle.addEventListener('animationend', callback); } iter += 1; if (iter === 5) { iter = 0; var elm = document.querySelector("#container"); var newone = elm.cloneNode(true); elm.parentNode.replaceChild(newone, elm); callback(); }
}
callback();
Developer | Alexander Hadik |
Username | ahadik |
Uploaded | September 08, 2022 |
Rating | 3 |
Size | 3,846 Kb |
Views | 26,312 |
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 |
Red Pill or Blue Pill But Only CSS | 3,455 Kb |
Pricing Table | 4,023 Kb |
HSL SVG Gradient | 1,809 Kb |
Transcriptic Pricing Cards | 11,150 Kb |
Pricing Cards V2 | 6,308 Kb |
SVG in a Button Tag | 2,884 Kb |
D3 Learnings | 1,618 Kb |
Pricing View with Map | 3,869 Kb |
A Pen by Alexander Hadik | 2,792 Kb |
Pricing Cards V3 | 6,584 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 |
Svg penguin | _massimo | 2,990 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Twitch | SarahDunlap | 2,937 Kb |
React Template | Isac | 1,241 Kb |
Responsive scrolling text | Ashdurham | 2,259 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Responsive Advert | James_zedd | 2,354 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 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!