3*4 이미지 그리드에 흐르는 애니메이션, 어떻게 구현할 수 있을까요?
조회수 668회
https://www.youtube.com/watch?v=5ZWhnXZvdMM
이렇게 흐르는 애니메이션을 만들고 싶습니다. 같은 이미지들이 새로 붙어서 무한정으로 흐르는 애니메이션이요! 어떻게 만들 수 있을까요?
처음에 display: grid 로 해서 이미지 그리드 파일을 만들었는데 grid는 animatable이 아니어서 css 애니메이션이 안 먹는 것같더라구요ㅠㅠ
background-repeat 할까 했는데 background 이미지가 있는 게 아니라 그것도 어려울 것같고...
고견을 기다립니다. 답변 미리 감사드립니다.
1 답변
-
해결해야 할 문제는 크게 2가지로 보입니다.
- 이미지를 무한정으로 뿌리기
- 뿌려진 이미지 집합의 window상 위치를 천천히 변경시켜주기
1번 문제는 infinite tiled wall을 만들어주는 플러그인으로 어느 정도 해결 가능할 것 같고 2번은 직접 코딩하시면 될 부분으로 보입니다. 시도해 보세요!
- 안녕하세요 답변 감사드립니다. image를 canvas에 그려서 해당 이미지를 background로 repeat하는 방법으로 해결했습니다 감사해요! Hwasoo Sung 2018.7.2 17:36
- !! 그게더쉽네요 엽토군 2018.7.5 14:43
댓글 입력