Icon Orb
How do I make an icon orb?
Font Awesome icons displayed randomly, endlessly, and bouncily.. What is a icon orb? How do you make a icon orb? This script and codes were developed by Chris Wachtman on 17 October 2022, Monday.
Icon Orb - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Icon Orb</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>
Icon Orb - Script Codes CSS Codes
@font-face { font-family: 'FontAwesome'; src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.eot?v=3.2.1'); src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
}
body{ background: #f59f00;
}
div{ font-family: FontAwesome; font-size:4em; padding: 0;margin: 0; text-align: center; font-style: normal; position: absolute; transition: left 2s; -webkit-transition:all 2s ease-out; font-smooth: always; color:#207b91; opacity:0.7;
}
Icon Orb - Script Codes JS Codes
var t=setInterval(function(){newIcon();},50);
function newIcon(){ var btn=document.createElement("div"); var n=Math.floor(Math.random()*395)+61440; btn.innerHTML="&#x"+n.toString(16)+";"; var x=600*Math.random(); var y=400*Math.random(); btn.setAttribute("style","left:"+x+"px;top:"+y+"px;");
document.body.appendChild(btn); //St Interval 0s is used to start the translation setInterval(function(){ btn.setAttribute("style","left:300px;top:200px;"); },0); //St Interval 1s is used to remove the element setInterval(function(){ document.body.removeChild(btn); },1500);
}
Developer | Chris Wachtman |
Username | cwacht |
Uploaded | October 17, 2022 |
Rating | 3 |
Size | 2,128 Kb |
Views | 20,240 |
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 |
Responsive Grid for Dynamic Layouts | 3,689 Kb |
Angular-HAML | 2,022 Kb |
Dragonboat App | 2,832 Kb |
Font Awesome Forever | 1,844 Kb |
A Pen by Chris Wachtman | 5,171 Kb |
Destiny Weapon Inventory | 3,794 Kb |
Minimal Menu | 3,308 Kb |
What Does the Fox Say Soundboard | 2,133 Kb |
Music Bookmarklet | 2,995 Kb |
NASA Concept | 6,304 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 |
Loading... | Adamjacob | 2,384 Kb |
Intake Form Page 2 | Ijantje | 4,983 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
Headroom.js demo | WickyNilliams | 3,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!