CSS Fireflies

css-fireflies.markdown

CSS Fireflies

An elegant HTML/CSS only solution for adding a tranquil fireflies effect to you page. CSS only.

A Pen by Mike Golus on CodePen.

License.

index.pug

// Quantity should be the same in Sass
- var quantity = 15

- for (var i = 1; i <= quantity; i++)
  .firefly

script.js

// ¯\_(ツ)_/¯

style.sass

// Quantity should be the same in PUG
$quantity: 15

html, body
  height: 100%

body
  background: url(https://i.pinimg.com/originals/44/6e/3b/446e3b79395a287ca32f7977dd83b290.jpg)
  background-size: cover
    
.firefly
  position: fixed
  left: 50%
  top: 50%
  width: 0.4vw
  height: 0.4vw
  margin: -0.2vw 0 0 9.8vw
  animation: ease 200s alternate infinite
  pointer-events: none

  &::before,
  &::after
    content: ''
    position: absolute
    width: 100%
    height: 100%
    border-radius: 50%
    transform-origin: -10vw
  
  &::before
    background: black
    opacity: 0.4
    animation: drift ease alternate infinite
  
  &::after
    background: white
    opacity: 0
    box-shadow: 0 0 0vw 0vw yellow
    animation: drift ease alternate infinite, flash ease infinite

  
// Randomize Fireflies Motion
@for $i from 1 through $quantity
  
  $steps: random(12) + 16
  $rotationSpeed: random(10) + 8s
  
  .firefly:nth-child(#{$i})
    animation-name: move#{$i}

    &::before
      animation-duration: #{$rotationSpeed}

    &::after
      animation-duration: #{$rotationSpeed}, random(6000) + 5000ms
      animation-delay: 0ms, random(8000) + 500ms

  @keyframes move#{$i}
    @for $step from 0 through $steps
      #{$step * (100 / $steps)}%
        transform: translateX(random(100) - 50vw) translateY(random(100) - 50vh) scale(random(75) / 100 + .25)

@keyframes drift
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

@keyframes flash
  0%, 30%, 100%
    opacity: 0
    box-shadow: 0 0 0vw 0vw yellow
  5%
    opacity: 1
    box-shadow: 0 0 2vw 0.4vw yellow