Fireflies

Developer
Dave Alger
Size
2,940 Kb
Views
54,648
  1. Fireflies Previews
  2. Fireflies HTML Codes
  3. Fireflies CSS Codes
  4. Fireflies JS Codes

How do I make an fireflies?

CSS only firefly effect which scales to fit any viewport!. What is a fireflies? How do you make a fireflies? This script and codes were developed by Dave Alger on 11 August 2022, Thursday.

Fireflies Previews
IQ Test

Fireflies - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fireflies</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="jar"> <div class="firefly r"></div> <div class="firefly y"></div> <div class="firefly g"></div> <div class="firefly b"></div>
</div>
<div class="word centered noselect" onclick="document.getElementById('city').play()">fireflies</div>
<audio id="city"><source src="https://dl.dropboxusercontent.com/u/288111417/fireflies.mp3" type="audio/mpeg"></audio> <script src="js/index.js"></script>
</body>
</html>

Fireflies - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Butterfly+Kids');
body { margin: 0; padding: 0; min-height: 100vh; background-color: #1d1f20; background-image: radial-gradient( circle at top center, #323236, #111111 ); text-align: center; font-family: 'Butterfly Kids', sans-serif; color: #fff; overflow: hidden;
}
.jar { margin: 10vh auto; height: 80vh; width: 80vw; -webkit-animation: breathe 270s infinite ease-in-out; animation: breathe 270s infinite ease-in-out;
}
.firefly { display: inline-block; position: absolute; top: 40vh; left: 20vw; margin: -4vh -4vw; padding: 2vh; width: 8vh; height: 8vh; background: #ff0; border: 6vh solid #000; box-shadow: 0 0 20vh #fff, 0 0 3vh #000, 0 0 3vh #000, 0 0 3vh #000, 0 0 4vh #444, 0 0 4vh #444, 0 0 4vh #444, 0 0 5vh #fff, 0 0 5vh #fff, 0 0 5vh #fff, 0 0 6vh #fff, 0 0 6vh #fff, 0 0 6vh #fff, 0 0 4vh #000, 0 0 4vh #000, 0 0 4vh #000 ; border-radius: 50%; border-bottom-color: rgba(0,0,0,0.5); border-left-color: rgba(0,0,0,0.6); border-right-color: rgba(0,0,0,0.6); border-top-color: rgba(0,0,0,0.4); opacity: 0.6; filter: blur(5vh); -webkit-transition: filter 300ms; transition: filter 300ms; -webkit-animation: fly 17s infinite cubic-bezier(0.91, 3.08, 0.71, -0.68); animation: fly 17s infinite cubic-bezier(0.91, 3.08, 0.71, -0.68);
}
.firefly:hover { filter: blur(24vh);
}
.r { background: #f55; padding: 3vh; -webkit-animation-delay: 1s; animation-delay: 1s; margin: -27vh 14vw 0 6vh; transform: rotate(90deg) scale(1.05); transform-origin: 30%;
}
.y { background: #ff6; padding: 4vh; -webkit-animation-delay: 2s; animation-delay: 2s; margin: 3vh 11vw -7vh 0; transform: rotate(145deg) scale(1.10); transform-origin: 0%;
}
.g { background: #6ED671; padding: 5vh; -webkit-animation-delay: 3s; animation-delay: 3s; margin: -46vh 0 0 13vw; transform: rotate(247deg) scale(1.15); transform-origin: 100%;
}
.b { background: #6090C0; padding: 6vh; margin: -7vh 0 0 7vw; transform: rotate(170deg) scale(1.20); transform-origin: 60%;
}
.word { display: inline-block; font-size: 40vh; color: rgba(255, 255, 255, 0.5); transition: all 600ms; -webkit-transition: all 600ms; cursor: pointer; z-index: 42;
}
.word:hover { color: #222; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2); text-stroke: 1px rgba(255, 255, 255, 0.2); text-shadow: 1px 1px 20px rgba(255, 255, 255, 0.2), -1px -1px 20px rgba(255, 255, 255, 0.2), 1px -1px 20px rgba(255, 255, 255, 0.2), -1px 1px 20px rgba(255, 255, 255, 0.2), 1px 1px 20px rgba(255, 255, 255, 0.2);
}
.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -60%);
}
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
@-webkit-keyframes fly { 25% { -webkit-animation-timing-function: cubic-bezier(0.91, 3.08, 0.71, -0.68); -webkit-transform: translateX(17vw) scale(0.9); opacity: 0.3; } 50% { -webkit-animation-timing-function: cubic-bezier(0.91, 3.08, 0.71, -0.68); -webkit-transform: translateX(37vw) scale(1.2); opacity: 0.7; } 75% { -webkit-animation-timing-function: cubic-bezier(0.91, 3.08, 0.71, -0.68); -webkit-transform: translateX(27vw) scale(0.7); opacity: 0.4; }
}
@keyframes fly { 25% { animation-timing-function: cubic-bezier(0.91, 3.08, 0.71, -0.68); transform: translateX(7vw) scale(0.9); opacity: 0.3; } 50% { animation-timing-function: cubic-bezier(0.91, 3.08, 0.71, -0.68); transform: translateX(4vw) scale(1.2); opacity: 0.7; } 75% { animation-timing-function: cubic-bezier(0.91, 3.08, 0.71, -0.68); transform: translateX(12vw) scale(0.7); opacity: 0.4; }
}
@keyframes breathe { 0% { transform: rotate(0deg) scale(1.0); width: 80vw; height: 80vh; } 25% { transform: rotate(360deg) scale(0.8); width: 60vh; height: 60vh; } 50% { transform: rotate(0deg) scale(1.0); width: 60vw; height: 60vw; } 75% { transform: rotate(-360deg) scale(0.8); width: 40vh; height: 40vw; } 100% { transform: rotate(0deg) scale(1.0); width: 80vw; height: 80vh; }
}
@-webkit-keyframes breathe { 0% { -webkit-transform: rotate(0deg) scale(1.0); width: 80vw; height: 80vh; } 25% { -webkit-transform: rotate(360deg) scale(0.8); width: 60vh; height: 60vh; } 50% { -webkit-transform:rotate(0deg) scale(1.0); width: 60vw; height: 60vw; } 75% { -webkit-transform:rotate(-360deg) scale(0.8); width: 40vh; height: 40vw; } 100% { -webkit-transform:rotate(0deg) scale(1.0); width: 80vw; height: 80vh; }
}

Fireflies - Script Codes JS Codes

//////////////////////////////////////////
// http://davealger.info
//////////////////////////////////////////
//
// some things to try...
// 1. resize the window
// 2. catch a firefly with the cursor
// 3. click around
//
//////////////////////////////////////////
Fireflies - Script Codes
Fireflies - Script Codes
Home Page Home
Developer Dave Alger
Username run-time
Uploaded August 11, 2022
Rating 3.5
Size 2,940 Kb
Views 54,648
Do you need developer help for Fireflies?

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!

Dave Alger (run-time) Script Codes
Name
Download Speed Calculator
Pink Slime
Slow Motion Shatter
A Pen by Dave Alger
Phone Input Field
JavaScript Fingerprint
Rainbow Spider
The Ultimate Canvas Compression
Chat Room Demo
Basic FAQ
Create amazing web content with AI!

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!