toB企業のHPでよく見るロゴが自動で動くでアレの実装方法

引用　SmartHRのHP　https://smarthr.jp/

このように導入企業がたくさんあるよっていうことを示すために、
ロゴを右から左に無限ループ的に流れつづけるようなHPをよく見かけると思います。

この実装をどのようにしてるのかを調査してみて学んだ箇所を共有します。

前提

• Next.js
• styled-component

実装

ロゴが右から左に無限ループ的に流れつづけるための実装をします。

画像は1つのpngにして横長にする

ロゴを1つずつpngで保持するのではなく、以下の4つのロゴを1つの横長のpngファイルにしてまとめます。

• ロゴA
• ロゴB
• ロゴC
• ロゴD

company-logos.png

company-logos.pngは、width: 400, height: 80です。

cssのanimationを使って実装

cssのanimationを使って実装してあげます。

export const App: React.VFC = () => {
  return (
    <Loop src={"img/company-logos.png"} height={80} />
  );
};

const loop = keyframes`
  0% {
    background-position: 0 0;
  }
  to {
    background-position: -400px 0;
  }
`;

const Loop = styled.div<{ src: string, height: number }>`
  width: 100%;
  animation: ${loop} 5s linear infinite;
  ${({ src }) => `background: url(${src})`};
  ${({ height }) => `height: ${height}px`};
  ${({ height }) => `background-size: auto ${height}px`};
`;

ポイントがいくつかあるので、完結にまとめます

表示速度

表示速度を変更したい場合は 5sの値を変更します。
5秒かけて、右から左へ1周するという実装になってます。

動かす方向

keyframes の開始位置と終了位置の background-position の値を変更してください。

0%、つまり、初期位置がx座標が0, y座標が0です。
toが終了位置なので、x座標が-400, y座標が0です。

company-logos.pngのwidthは400なので、 右から左へちょうど1周するような実装になっています。