이미지가 계속 흐르는 애니메이션? js css

이미지가 계속 흐르는 애니메이션? js css

QA

이미지가 계속 흐르는 애니메이션? 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>
 

배경 이미지가 계속 흘러 가는 샘플 입니다.
참고하세요

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT