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周するような実装になっています。
Author And Source
この問題について(toB企業のHPでよく見るロゴが自動で動くでアレの実装方法), 我々は、より多くの情報をここで見つけました https://zenn.dev/kanasugi/articles/c42925d111e34d著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol