JSFiddle - React, Tailwind, and code Playground

by kkdaily

HTML

<div class="sky-box">
  <h3>Shooting Stars</h3>
<!--   <div class="overlay">
      <div class="line"></div>
  </div> -->
</div>

CSS

.sky-box {
  display: flex;
  flex: 1;
  min-height: 80vh;
  background-color: #363636;
  background-image: url('https://images.pexels.com/photos/691668/pexels-photo-691668.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-size: cover;
  background-position: center center;
}

.ugh {
  animation: grow 1s ease-out forwards;
}

#blah {
  height: 50px;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
}

/* .overlay {
  position: absolute;
  display: flex;
  flex: 1;
  background-color: rgba(0, 0, 0, 0);
  height: 100%;
  width: 100%;
} */

/* .line {
  position: relative;
  height: 1px;
  width: 0;
  top: 20%;
  left: 20%;
  background: grey;
  transform: rotate(45deg);
  transform-origin: left;
  animation: grow 0.5s linear forwards;
} */

/* @keyframes grow{
    0% {
        opacity: 0;
        width: 0%;
        height: 1px;
        background: red;
    }

    50% {
        opacity: 1;
        width: 25%;
        height: 2px;
        background: orange;
    }

    51% {
        opacity: 1;
        width: 25%;
        height: 1px;
        background: yellow;
    }

    100% {
        opacity: 0;
        width: 50%;
        height: 1px;
        background: green;
    }
} */

JavaScript

/*
- are only visible within an invisible box
- can only spawn in a subbox within the invisible box
- have a tail length l
- have a speed s
- have a color c
- can have a multitude of colors at random if enabled
- can have a gradient tail if enabled
- has a luminosity l
- has a tail thickness t
- can be passed a class/id selector to attach its box to
*/

const _defaults = {
	length: 1,
  color: '#ffffff',
  thickness: 1,
  luminosity: 1,
  speed: 1,
  frequency: 1
}

class ShootingStars {
	constructor(opts) {
    this.length = opts && opts['length'] || _defaults.length
    this.color = opts && opts['color'] || _defaults.color
    this.thickness = opts && opts['thickness'] || _defaults.thickness
    this.luminosity = opts && opts['luminosity'] || _defaults.luminosity
    this.speed = opts && opts['speed'] || _defaults.speed
    this.frequency = opts && opts['frequency'] || _defaults.frequency
    
    this.createStylesheet()
    this.animate = this.animate.bind(this)
  }
  
  animate(starEl) {
    this.starRandomizer(starEl)
    change('grow')
			//starEl.style.animation = 'none'
    //starEl.style.animation = 'grow 0.6s ease-in forwards'
/*     starEl.classList.remove('ugh')
    starEl.classList.add('ugh') */
    starEl.classList.toggle('ugh')
	}
  
  show(elSelector) {
  	try {
    	const skyboxEls = this.getSkyboxEls(elSelector)
      const overlayEl = this.createOverlayEl()
      const starEl = this.createStarEl()
      
      overlayEl.append(starEl)
      skyboxEls.insertBefore(overlayEl, null)
      
      setInterval(() => {
      	this.animate(starEl)
      }, 3000)
      
      // insert div with class "starbox-overlay" 
      // insert div with class "shooting-star" within that div
      // set styles on starbox-overlay
      // set styles on shooting-star based on options passed in
      // and Math.random some of the variables (length, top, left)
      // set an interval based on option frequency 
      // this interval's cb func should add and remove...