Square Friends Dropping By
How do I make an square friends dropping by?
Playing with randoms. What is a square friends dropping by? How do you make a square friends dropping by? This script and codes were developed by Eprouver on 15 September 2022, Thursday.
Square Friends Dropping By - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Square Friends Dropping By</title> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="holder">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Square Friends Dropping By - Script Codes CSS Codes
*{ margin: 0; padding: 0;
}
html{ font-size: 5vmin;
}
body{ background: #FFDC00; overflow:hidden;
}
.animated{ -webkit-animation-duration: 3s !important;
}
.step{ height: 12rem; width: 6rem; border: 0.6rem solid white; position:absolute; margin-top: -6vh; margin-left: -3vw; border-top-right-radius: 2rem;
}
.step:before{ content: '⊙‿⊙'; font-size: 2.5rem; font-weight: bold; color:white; position:relative; top: 1rem;
}
.holder{ height: 100vh; width: 100vw; overflow:hidden; position:absolute; transform-style: preserve3d; perspective: 200px;
}
Square Friends Dropping By - Script Codes JS Codes
var x = window.innerWidth / 2;
var y = window.innerHeight / 2;
var colors = ['#0074D9', '#01FF70','#B10DC9', '#FF851B', '#39CCCC'];
var classes= [ 'bounceInLeft', 'bounceInRight', 'bounceIn', 'bounceInUp', 'bounceInDown'
];
function add(){ for(var i = 0; i < 0.85; i = Math.random()){ $('.holder').append($('<div class="step animated">').addClass( classes[~~(Math.random() * classes.length)]).css({ top: y, left: x, background: colors[~~(Math.random() * colors.length)] }).one('webkitAnimationEnd animationend', function(){ var self = $(this); self.attr('class', 'step'); setTimeout(function(){ self.addClass('animated zoomOut').one('webkitAnimationEnd animationend', function(){ self.remove(); self = null; }); }, 1) })); x = Math.random() * window.innerWidth; y = Math.random() * window.innerHeight; }
}
add();
setInterval(add,3000)
Developer | Eprouver |
Username | eprouver |
Uploaded | September 15, 2022 |
Rating | 3.5 |
Size | 2,337 Kb |
Views | 24,288 |
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 |
Incremental game | 5,868 Kb |
Exploding Squares | 2,770 Kb |
Toki Pona Boggle | 3,874 Kb |
Sort the Knowlege | 3,915 Kb |
Spinning Cubes | 2,315 Kb |
Google Speech | 26,860 Kb |
Spaceship Battle | 5,012 Kb |
A Pen by eprouver | 1,599 Kb |
American Icons | 6,093 Kb |
TP Reader | 2,402 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 |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
Hmmm... | Rk007 | 4,848 Kb |
Spilled Paint | Darrylhuffman | 3,894 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Savemedia1.1 | EdsonAlcala | 2,148 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 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!