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

const n = 80 // number of bars
const hsl_tone = 10 // color, from 0 to 360
const amplitude = 1.2 // amplitude of deviations from the above color

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

  useEffect(() => {
    /* registerProperty is not present in some not-too-old browsers, and is needed here to generate the animation movement */

    if (window.CSS && CSS.registerProperty) {
      CSS.registerProperty({
        name: '--fx',
        syntax: '<number>',
        initialValue: 1,
        inherits: true,
      })
      CSS.registerProperty({
        name: '--distance',
        syntax: '<length>',
        initialValue: '1px',
        inherits: true,
      })
    }
  }, [])

  /**
   * Create a rotate and delay variable for each bar
   */

  return (
    <>
      <link href="/20201011_iframe.css" type="text/css" rel="stylesheet" />
      <Div id="bloq" start={start}>
        <div onClick={() => setStart(p => !p)}>
          {[...Array(n)].map((_, i) => (
            <Bar
              style={{
                color: `var(--col${i})`,
                '--animation_delay': `${(i / n) * -18}s`,
                '--rotate': `${(360 * i) / n}deg`,
              }}
            ></Bar>
          ))}
        </div>
      </Div>
    </>
  )
}

/**
 * Create the --fx variables, for bar heights
 */
const rythm = keyframes`
    ${[...Array(37)].map(
      (_, i) => `
      ${Math.round((i * 10000) / 36) / 100}% {
        --fx: ${
          Math.round(100 * (0.6 + 1 * Math.sin(i * 20) * Math.sin(i * 30) * Math.sin(i * 50) * Math.sin(i * 70))) / 100
        };
      }
      `
    )}
`

/**
 * Create the --distance variables, for bar's circumference radius
 */
const bump = keyframes`
    ${[...Array(21)].map(
      (_, i) => `
      ${Math.round((i * 10000) / 20) / 100}% {
        --distance: ${
          Math.round(100 * (30 + 5 * Math.sin(i * 20) * Math.sin(i * 30) * Math.sin(i * 50) * Math.sin(i * 70))) / 100
        }px;
      }
      `
    )}
`

/**
 * Create the --width_circle variables, to change the circumference width
 */
const bump2 = keyframes`
    ${[...Array(21)].map(
      (_, i) => `
      ${Math.round((i * 10000) / 20) / 100}% {
        --width_circle: ${
          Math.round(100 * (56 + 5 * Math.sin(i * 20) * Math.sin(i * 30) * Math.sin(i * 50) * Math.sin(i * 70))) / 100
        }px;
      }
      `
    )}
`

const Bar = styled.div``

const Div = styled.div`
  padding: 80px 50px 50px 50px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & > div {
    cursor: pointer;
    outline: none;

    border-radius: 50%;
    width: var(--width_circle);
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;
    background: ${p => (p.start ? '#ea2424' : '#ea242480')};
    &:hover {
      background: #ea2424;
    }

    transition: all 200ms cubic-bezier(0.14, 1.46, 0.88, 0.95);

    /**
     * Animate with bump2 (width being modified)
     * These animations do not animate, but change the css variables that the width above will use
     */
    animation: ${bump2} 1.5s ease-in-out infinite;

    ${Bar} {
      transition: all 200ms cubic-bezier(0.14, 1.46, 0.88, 0.95);

      position: absolute;
      left: 50%;

      background: currentcolor;
      height: 3px;

      /**
       * Animate with rythm (bars moving with a delay to simulate independence)
       * Animate with bump (radius of bar circumference moving)
       * These animations do not animate, but change the css variables that the transform below will use
       */
      animation: ${rythm} 5s ease-in-out var(--animation_delay) infinite, ${bump} 1.5s ease-in-out infinite;

      /**
       * Transform rotate (each bar has a rotation defined)
       * Transform translate (separate bars with a radius)
       * Transform scalex (move bars height)
       */
      transform: rotate(var(--rotate)) translate(var(--distance)) scalex(var(--fx));
      transform-origin: 0 50%;

      width: ${p => (p.start ? '50px' : '10px')};
    }
  }

  /**
  * Create colors to be used by the circle (within HSL 0 to 360, here around 60)
  */
  ${_ =>
    [...Array(n)].map((_, i) => {
      const color = hsl_tone + amplitude * (i < n / 2 ? i : n - i)
      return `--col${i}: HSL(${color}, 100%, 80%, 100%);`
    })}
`
Privacidad
by kuworking.com
[ 2020 >> kuworking ]