플립북 스타일 애니메이션을 위한 Pure CSS 사용

순수한 CSS를 사용하여 플립북 스타일 애니메이션을 만드는 CSS Play에 대한 훌륭한 튜토리얼이 있습니다. 여기에서는 "슬라이드"가 서로 쌓여 있다는 이론이 작용하고 있다. 그 위에 독특한 요소로 구성된 일련의 높은 직사각형 "슬라이스"가 있다. 각 슬라이드는 Div 바로 바깥에 밀어넣어 오버플로가 숨겨지고, 고유한 요소에 :hover 상태가 활성화되면 해당 슬라이드가 다시 이동되는데, 이는 일반적인 CSS 롤오버와 다르다. 그 결과 마우스를 디브를 가로질러 움직이면 정말로 재미있고 중독적인 방법으로 다양한 슬라이드가 활성화된다.

이 효과는 OS X에 대한 iMovie `08의 새로운 "스키밍" 기능과 약간 비슷합니다. 이 기술을 사용하면 사진 이미지를 순서대로 촬영하면 몇 가지 멋진 효과를 얻을 수 있을 것입니다.

[라이브 예시]

[다운로드 예제]

반복적인 코드와 하드코딩된 픽셀 크기가 꽤 있기 때문에 자바스크립트로 대처하는 것은 멋진 프로젝트일 수 있습니다. 그래서 어떤 크기의 이미지라도 동적으로 플립북을 만들 수 있습니다.