CSS3와 스크롤 애니메이션

이 페이지에서 CSS3와 스크립트를 사용하여 스크롤 애니메이션을 다루는 것을 다루어 보겠습니다. 여담으로 애니메이션을 플래시를 이용하는 것이 아닙니다. PC 크롬에서 NPAPI 플러그인을 중지하여 플래시를 자동 재생하지 않습니다. PC가 아닌 모바일 크롬의 경우는 재생조차 할 수 없이 아예 지원하지 않고요. 제 생각에는 몇 년 안에 플래시가 사라질 것 같습니다. 예전에 티스토리를 비롯한 블로그에서 플래시 사용 현황에 대해서는 2015/09/25 - 플래시 사용 현황,티스토리,네이버 블로그,구글 블로그에서 에서 적었습니다. 여담으로 우리나라 홈페이지는 액티브엑스 처럼 플래시를 너무 많이 사용하는 것 같습니다.  

그럼 아래에서 CSS3 애니메이션을 몰라도 만들어 주는 사이트와 페이지 스크롤을 움직이면 물체가 애니메이션 되도록 해주는 애니메이션에 대해 알아 보겠습니다. 미리보기로 이 페이지를 로딩됐을 때 애니메이션을 봤을 것인데 이것이 CSS3 애니메이션 입니다. 스크롤 애니메이션은 이 블로그 많은 곳에서 볼 수 있으며 구체적인 것은 아래에서 설명합니다.

CSS3 애니메이션

CSS3에서 지원하는 애니메애션을 설명하겠습니다. w3school.com의 CSS3의 Animation 부분을 보니 css3 애니메이션을 지원하는 브라우저와 버전은 아래 그림과 같네요. 우리나라 사람들이 익스플로러 8 이하를 많이 사용하는데 아래 그림 빨간 사각형에 나왔듯 익스플로러 10 이상만 애니메이션 속성을 지원한다는 것을 알아두세요. 즉 이 블로그에서 많이 사용하는 익스플로러 7, 8 에서는 애니메이션이 안됩니다. 그러니 익스플로러 7을 사용하면서 애니메이션이 안 된다고 하면 안됩니다.

 

PC에서 제 블로그 동영상 배경이나 애니메이션을 볼 수 없다면 대부분 익스플로러 9 이하를 사용할 것입니다. 익스플로러외 브라우저를 사용한다면 거의 최신 브라우저를 사용할 것입니다. 익스플로러 사용자만 구 버전만 그대로....

그나저나 아래 사이트에서 CSS3 애니메이션을 몰라도 CSS3 애니메이션을 만들 수 있습니다. 만약 CSS3 애니메이션 기본적인 것을 익히고 싶다면 영문 페이지인 http://www.w3schools.com/css/css3_animations.asp에서 익힐 수 있습니다. 아래에서 만든 애니메이션은 이 블로그 처음에 사용했습니다. 이러니 저를 전문가로 알아 어려운 질문을 하는 경우가 많습니다.  

• http://www.theappguruz.com/tag-tools/web/CSSAnimations/

아이디만 추가하면 애니메이션을 만들 수 있습니다. 여러 개인 경우는 아이디의 이름은 다르게 지정하면 됩니다. 얼마 전에 로그인과 부분 유료화 된 https://coveloping.com/tools/css-animation-generator에서 아이디를 추가하여 애니메이션을 만드는 것을 보고 거기에서도 그렇게 할 것 같다고 추측한 것입니다. 원리는 몰라도 코드를 많이 다루다 보면 이런 것이 자연스럽게 생기는 것 같습니다. 

이 블로그 예를 들면 위 사이트에서 CSS용 코드를 얻어 CSS에 삽입하였고 저는 아래 그림과 같이 하였습니다. 아래 그림에서 class명은 CSS용 코드를 보면 알 것이고 id 명은 임의로 정했습니다. 저는 그냥 그림에 보듯이 animated라고 했습니다. 여담으로 class명에 col-lg-12, text-center는 부트스트랩에서 사용하는 것입니다. 

스크롤 애니메이션

많은 사이트를 돌아다니면서 스크롤을 내리면 물체가 애니메이션이 되는 것을 많이 보았습니다. 그것을 보면서 어떻게 하는지 알고 싶었습니다. 그렇게 하는 것은 스크립트를 적용하면 쉽다는 것을 알았습니다. 이 블로그에 적용한 스크립트는 scrollReveal.js라는 스크립트입니다. 미리보기는 http://scrollrevealjs.org/에서 볼 수 있으며 그 페이지에서 스크롤도 내려보면 애니메이션이 됩니다. 이 블로그에서 미리보기는 방명록, 공지, 미디어, 처음(메인) 등 많습니다.

• 미리보기 : http://scrollrevealjs.org/

그 스크립트의 사용 방법은 미리보기 사이트 상단의 GitHub를 클릭하거나 아래를 클릭합니다. 단 그 사이트는 영문으로 되었습니다. 영어 문장만 잘 읽을 수 있다면 잘 다룰 수 있을텐데 아쉽네요. 스크롤 애니메이션을 이 블로그 많은 곳에서 사용했는데 대표적으로 이 블로그 처음에서 사용한 것을 설명한다면 아래 그림을 보듯이 2초와 12초 기다렸다가 나타나게 하는 것인데 깜박이는 것이 보이네요. 자세한 사용법은 아래를 보세요.

• 사용법 : https://github.com/jlmakes/scrollReveal.js

스크롤 애니메이션으로 http://mynameismatthieu.com/WOW에서 제공하는 wow.js도 사용하려 했었는데 그 스크립트를 쓴 애니메이션을 익스플로러 8라는 놈에서 안 보여서 그만 두었습니다. 부트스트랩 테마 중에 wow.js를 사용한 것이 있어서 배우려 했었거든요. 하여튼 익스플로러....