Bewegtes Poster

Ein Endlos-Poster, bei dem jedes Element eine Spur auf einer spulbaren Timeline ist.

useTimeline

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

App.jsx

import { useTimeline } from '@kkwaenggwari/animated';
import './styles.css';

const bars = [0.35, 0.8, 0.55, 1, 0.7, 0.45, 0.9, 0.6];

export default function App({ duration = 4000, repeat = true }) {
  const poster = useTimeline(
    {
      open: { values: [0, 1, 1, 0], times: [0, 0.3, 0.8, 1] },
      spin: ['0deg', '180deg', '360deg'],
      ring: { values: [0.4, 1], at: duration * 0.2, duration: duration * 0.4 },
      title: { values: ['40px', '0px'], at: duration * 0.45, duration: duration * 0.3 },
      fade: { values: [0, 1], at: duration * 0.45, duration: duration * 0.3 },
    },
    { duration, repeat: repeat ? Infinity : 0, repeatDelay: 600 },
    [duration, repeat],
  );
  const { open, spin, ring, title, fade } = poster.values;

  return (
    <div className="stage">
      <div className="poster">
        <span className="ring" style={{ transform: `rotate(${spin}) scale(${ring})` }} />
        <div className="bars">
          {bars.map((height, index) => (
            <i key={index} style={{ transform: `scaleY(calc(${open} * ${height}))` }} />
          ))}
        </div>
        <h2 style={{ opacity: fade, transform: `translateY(${title})` }}>Night Signal</h2>
      </div>
      <div className="player">
        <button type="button" onClick={() => poster.play()}>
          Play
        </button>
        <button type="button" onClick={() => poster.reverse()}>
          Reverse
        </button>
        <button type="button" onClick={() => poster.pause()}>
          Pause
        </button>
        <span className="progress">
          <b style={{ transform: `scaleX(${poster.progress})` }} />
        </span>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.poster {
  position: relative;
  display: grid;
  place-items: center;
  height: 360px;
  border-radius: 20px;
  background: #0b1440;
  overflow: hidden;
}

.ring {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 18px solid #8fb0ff;
  border-right-color: #5c7cff;
  border-bottom-color: #2854ff;
  border-radius: 50%;
}

.bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
}

.bars i {
  width: 14px;
  height: 100%;
  border-radius: 7px;
  background: #fff;
  transform-origin: bottom;
}

.poster h2 {
  position: absolute;
  bottom: 28px;
  margin: 0;
  color: #fff;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.player button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #e4e6ef;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.progress {
  flex: 1;
  min-width: 120px;
  height: 8px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
}

.progress b {
  display: block;
  height: 100%;
  background: #2854ff;
  transform-origin: left center;
}

So funktioniert es

useTimeline definiert benannte Spuren mit Keyframes, Startzeiten und Dauern in Millisekunden.
Alle Spuren leiten sich von einer Fortschrittsvariablen ab, das ganze Poster schreibt also einen Wert pro Frame.
play, reverse und pause steuern die Uhr; der Fortschrittsbalken ist derselbe Wert.

Bewegtes Poster

So funktioniert es

Weitere Beispiele

Suchen