TOB 업체 홈페이지에서 자주 보는 로고가 자동으로 이동하고 그걸 설치하는 방법

SmartHR 참조 HPhttps://smarthr.jp/
이렇게 유치한 기업이 많다는 의미로.
오른쪽에서 왼쪽으로 무한 반복해서 로고를 재생하는 HP를 자주 볼 수 있을 것 같다.
이 실시가 어떻게 이루어졌는지, 모두 배울 점이 있는지 조사해 보자.

전제 조건

Next.js

styled-component

이루어지다

오른쪽에서 왼쪽으로 무한 순환하는 로고를 실현합니다.

그림을 pg로 확대

하나의 저장 로고가 아니라, 다음 네 개의 로고를 가로 png 파일로 통합합니다.

LOGO A

LOGO B

LOGO C

LOGO D

company-logos.png
company-logos.png은width:400height:80입니다.

css를 사용한 애니메이션 구현

css의 애니메이션을 사용해서 구현해 드리겠습니다.

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초 동안 오른쪽에서 왼쪽으로 한 바퀴 도는 것을 실현했다.

이동 방향

키프레임의 시작 위치와 끝 위치의 백그라운드-position 값을 변경하십시오.
0%, 즉 초기 위치 x 좌표는 0, y 좌표는 0입니다.
to는 끝 위치이고 x 좌표는 -400이며 y 좌표는 0이다.
company-logos.png의 width는 400이기 때문에 실현될 때 마침 오른쪽에서 왼쪽으로 한 바퀴 돌았다.