hand JSBloqs
hand GutenBloqs
hand kuworking
What?
nochedía
Button-Fireworks
By kuworking
import React, { useState } from 'react'
import styled from '@emotion/styled'

const fireworks = {
  number_of_fireworks: 10,
  particles: 50,
  duration: 10,
  time_between: 10,
  // square where the particles will originate
  max_height: 300,
  max_width: 300,
}

const random = width => (Math.round((Math.random() * (width * 2) - width) * 100) / 100).toFixed(2)
const random1 = width => (Math.round(Math.random() * width * 100) / 100).toFixed(2)
const randomColour = () => '#000000'.replace(/0/g, () => (~~(Math.random() * 16)).toString(16))

// create template for initial-state particles group
const start = Array(fireworks.particles)
  .fill()
  .map(() => '0px 0px #fff')
  .join(',')

// create all end-state particles for all groups
const end = Array(fireworks.number_of_fireworks)
  .fill()
  .map(() => {
    const box1 = Array(fireworks.particles)
      .fill()
      .map(_ => `${random(fireworks.max_width)}px ${random(fireworks.max_height)}px ${randomColour()}`)
    return box1.join(',')
  })

// create animations with box-shadow
const time_between = (4 * fireworks.time_between) / 10
const duration = (1 * fireworks.duration) / 10
const shadows = end
  .map(
    (el, i) => `
& > div:nth-of-type(${i + 1}) {
  margin-top: ${random1(fireworks.max_width)}px;
  margin-left: ${random1(fireworks.max_height)}px;
  box-shadow: ${el};
  animation: ${i / 4 + duration}s bang ease-out ${i / time_between}s infinite backwards, 
  ${i / 4 + duration}s gravity ease-in ${i / time_between}s infinite backwards;
}
  `
  )
  .join('')

export default () => {
  const [startFireworks, setStart] = useState(false)

  return (
    <>
      <link href="https://fonts.googleapis.com/css2?family=Kulim+Park&display=swap" rel="stylesheet"></link>
      <link href="/20201011_iframe.css" type="text/css" rel="stylesheet" />
      <Div id="bloq">
        <button onClick={() => setStart(true)}>Fireworks!</button>
        <Fireworks firework={{ start: start, shadows: shadows }}>
          <div>
            {startFireworks &&
              Array(fireworks.number_of_fireworks)
                .fill()
                .map((_, i) => <div key={`div${i}`}></div>)}
          </div>
        </Fireworks>
      </Div>
    </>
  )
}

const Div = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & > button {
    position: relative;
    top: ${fireworks.max_height / 2};
    padding: 10px;
    background: #bcb6ca;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
  }
`

const Fireworks = styled.div`
  width: ${fireworks.max_width}px;
  height: ${fireworks.max_height * 2}px;
  margin-bottom: 50px;

  & > div {
    width: 100%;

    & > div:nth-of-type(n) {
      position: absolute;
      width: 28px;
      height: 28px;
      border-radius: 50%;
    }

    ${shadows}
  }

  /* Simula la trayectoria después de la explosión */
  @keyframes bang {
    from {
      box-shadow: ${start};
    }
  }

  /* Simula la caida con la gravedad */
  @keyframes gravity {
    to {
      transform: translateY(200px);
      width: 2px;
      height: 2px;
      opacity: 0;
    }
  }
`
Privacidad
by kuworking.com
[ 2020 >> kuworking ]