带SVG的闪亮文本

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const {
  gsap: {
    to,
    set,
    utils: { random } },

dat: { GUI },
  React,
  React: { useEffect, useRef, useState },
  ReactDOM: { render } } =
window;

const CONFIG = {
  CONFIG: {
    dots: 15,
    size: 1,
    text: 'Hey!',
    viewbox_width: 240,
    viewbox_height: 80 },

ANIMATION: {
    scale_speed: 1,
    scale_delay: 5,
    lighten_speed: 0.15,
    lighten_delay: 2 },

PROBABILITY: {
    scale: 0.85,
    lighten: 0.6 } };

const BOUNDS = {
  CONFIG: {
    dots: [2, 30],
    size: [0.1, 5, 0.1],
    viewbox_width: [0, 500, 1],
    viewbox_height: [0, 500, 1] },

ANIMATION: {
    scale_speed: [0.1, 2, 0.01],
    scale_delay: [0, 10, 0.01],
    lighten_speed: [0.1, 2, 0.01],
    lighten_delay: [0, 10, 0.01] },

PROBABILITY: {
    scale: [0, 1, 0.01],
    lighten: [0, 1, 0.01] } };

const ANIMATE = (element, props, config) => {
  to(element, config.duration, {
    yoyo: true,
    repeat: 1,
    delay: `random(0, ${config.delay})`,
    onComplete: () => ANIMATE(element, props, config),
    ...props });

};

const App = () => {
  const [model, setModel] = useState(0);
  const datRef = useRef(null);
  const {
    size,
    dots,
    text,
    viewbox_width: width,
    viewbox_height: height } =
  CONFIG.CONFIG;
  useEffect(() => {
    if (!datRef.current) {
      datRef.current = new GUI({ name: 'Shimmer Text Config' });
      for (const CATEGORY in BOUNDS) {
        const FOLDER = datRef.current.addFolder(CATEGORY);
        for (const spec in BOUNDS[CATEGORY]) {
          FOLDER.add(
          CONFIG[CATEGORY],
          spec,
          BOUNDS[CATEGORY][spec][0],
          BOUNDS[CATEGORY][spec][1],
          BOUNDS[CATEGORY][spec][2] ? BOUNDS[CATEGORY][spec][2] : 1).

name(spec.replace('_', ' ').toUpperCase()).
          onFinishChange(() => setModel(new Date().getTime()));
        }
      }
      datRef.current.
      add(CONFIG.CONFIG, 'text').
      name('TEXT').
      onChange(() => setModel(new Date().getTime()));
    }
    // Need to animate all the new circles.
    set(document.querySelectorAll('circle'), { transformOrigin: '50% 50%' });
    const CIRCLES = document.querySelectorAll('circle');
    const SCALERS = [...CIRCLES].filter(
    () => Math.random() > CONFIG.PROBABILITY.scale);

SCALERS.forEach((el) =>
    ANIMATE(
    el,
    { scale: 0 },
    {
      duration: random(0.1, CONFIG.ANIMATION.scale_speed),
      delay: CONFIG.ANIMATION.scale_delay }));

const BRIGHTS = [...CIRCLES].filter(
    () => Math.random() > CONFIG.PROBABILITY.lighten);

BRIGHTS.forEach((el) =>
    ANIMATE(
    el,
    { '--lightness': 100 },
    {
      duration: random(0.1, CONFIG.ANIMATION.lighten_speed),
      delay: CONFIG.ANIMATION.lighten_delay }));

}, [model]);

const HUE = Math.random() * 360;

return (
    React.createElement("div", { className: "shimmer-text" },
    React.createElement("svg", { viewBox: `0 0 ${width} ${height}` },
    React.createElement("pattern", {
      id: "shimmer-text__pattern",
      viewBox: `-${size / 2} -${size / 2} ${size * dots} ${size * dots}`,
      patternUnits: "userSpaceOnUse",
      width: `${size * (dots * 2) - size / 2}`,
      height: `${size * (dots * 2) - size / 2}`,
      x: "0",
      y: "0" },
    new Array(dots * dots).fill().map((_, index) =>
    React.createElement("circle", {
      key: `circle--${index}--${model}`,
      r: `${size / 2}`,
      cx: `${index % dots * size}`,
      cy: `${Math.floor(index / dots) * size}`,
      style: {
        '--lightness': 40 + Math.random() * 30,
        '--hue': HUE } }))),

React.createElement("text", {
      className: "shimmer-text__text",
      textAnchor: "middle",
      x: "50%",
      y: "50%",
      dy: ".35em" },
    text))));

};

render(React.createElement(App, null), document.getElementById('app'));

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg