Clock
How do I make an clock?
A functional clock forked from my original experiment which shows off a weird use for Greensock's new "cycle" feature. http://codepen.io/pyrografix/pen/zvxJpr?editors=001. What is a clock? How do you make a clock? This script and codes were developed by Elliot Geno on 11 September 2022, Sunday.
Clock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clock</title>
</head>
<body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <path stroke="#000" stroke-width="30" d="M30 500h100m740 0h100M500 30v100m0 740v100M30 500h100m740 0h100M500 30v100m0 740v100M93 735l87-50m640-370l87-50M265 93l50 87m370 640l50 87M180 315l-87-50m814 470l-87-50M265 907l50-87m370-640l50-87" /> <path id="minutes" stroke="#D4145A" stroke-width="30" d="M500 500V160" /> <path id="hours" stroke="#D4145A" stroke-width="30" d="M500 500V300" /> <path id="seconds" stroke="#D4145A" stroke-width="10" d="M500 500V170" /> <circle cx="500" cy="500" r="30"/>
</svg> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js?r=31 '></script> <script src="js/index.js"></script>
</body>
</html>
Clock - Script Codes JS Codes
var timeline=new TimelineMax();
var duration = 60*60*24;
timeline.add(TweenMax.allTo(["#hours", "#minutes", "#seconds"], duration, {cycle: {rotation: [720, 8640, 518400],ease:[Linear.easeNone, Linear.easeNone, SteppedEase.config(518400/6)]}, transformOrigin: "50% 100%", ease: Linear.easeNone}));
var date = new Date();
timeline.progress(((date.getHours()*60*60)+(date.getMinutes()*60)+date.getSeconds())/duration);
Developer | Elliot Geno |
Username | pyrografix |
Uploaded | September 11, 2022 |
Rating | 3 |
Size | 1,978 Kb |
Views | 46,552 |
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 |
Alternate Tween Properties - TweenMax | 2,215 Kb |
A Pen by Elliot Geno | 2,114 Kb |
Eye Bee M | 4,047 Kb |
Swarm | 2,384 Kb |
Clock | 1,978 Kb |
Crash Loader | 2,615 Kb |
Cat Silhouette | 4,447 Kb |
One Percent | 2,919 Kb |
Purple Nurple | 5,008 Kb |
Stained Glass | 2,127 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 |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
This in constructor context | _shree33 | 1,718 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
Rotate Demo | Agelber | 3,061 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
Android Play Store With Slick Carousel | -J0hn- | 4,982 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!