이미지가 계속 흐르는 애니메이션? js css
관련링크
본문
안녕하세요.
https://www.framer.com/ (pc 사이트)
의 메인 배경이미지 처럼, 이미지가 흘러가는 애니메이션을 react로 구현하려고 합니다.
검색을 해도 관련된 괜찮은 정보들을 찾기가 어려운데요..
(infinite image flow animation 으로 검색..)
혹시, 이 이미지가 끝없이 반복적으로 흘러가는 애니메이션 구현과 관련된 정보 또는 팁을 얻을 수 있을까요?
고맙습니다.
답변 1
<style type="text/css">
#animatedBackground {
width: 100%;
height: 200px;
left: 0;
display: flex;
align-items:center;
justify-content:center;
background: url("http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg");
background-repeat: repeat;
background-position: 0 0;
background-size: auto auto;
animation: animatedBackground 500s linear infinite;
}
#animatedBackground div {
float:left !important;
display: flex;
align-items:center;
justify-content:center;
padding:0px 20px;
list-style-type: none;
height:160px;
border-radius:20px;
width:18.5%;
margin:0% 1%;
color:#fff;
background-color:rgba(0, 0, 0, 0.8);
}
@keyframes animatedBackground {
from {
background-position: 0 0;
}
/*use negative width if you want it to flow right to left else and positive for left to right*/
to {
background-position: -10000px 0;
}
}
</style>
<div id="animatedBackground">
<div>역삼동 서울특별시 강남구 <br>이전 활동 기준 <br>위치 업데이트</div>
<div>역삼동 서울특별시 강남구 <br>이전 활동 기준 <br>위치 업데이트</div>
<div>역삼동 서울특별시 강남구 <br>이전 활동 기준 <br>위치 업데이트</div>
<div>역삼동 서울특별시 강남구 <br>이전 활동 기준 <br>위치 업데이트</div>
</div>
배경 이미지가 계속 흘러 가는 샘플 입니다.
참고하세요
위와 유사한 형태로 css animation infinte 로 해결되었습니다. 고맙습니다.