애니메이션 소스들

디자인은 심플하지만 동적인 효과로 재미를 주는 것이 요즘 트랜드다.

그래서 여러가지 재미있는 오픈소스들을 찾아보았다.

1. 먼저 제이쿼리는 아니지만 css로 간단한 애니메이션을 주는 사이트

http://daneden.github.io/animate.css/

animate.css

2. Pricing Table에 살짝 애니메이션 들어간 소스.

http://tympanus.net/codrops/2015/11/19/some-inspiration-for-pricing-tables/

이외에도 다른 오픈소스 많음.

3. Typed.js

http://www.mattboldt.com/demos/typed-js/

텍스트가, 실제로 타이핑되고 있는 것 처럼 구현하는 스크립트파일.

typed.js-master.zip

4. Wow.js

http://mynameismatthieu.com/WOW/index.html

컨텐츠마다 다른 애니메이션 주는 스크립트.

WOW-master.zip

5. 배경 애니메이션

http://srobbin.com/jquery-plugins/backstretch/

/*
 * Here is an example of how to use Backstretch as a slideshow.
 * Just pass in an array of images, and optionally a duration and fade value.
 */

  // Duration is the amount of time in between slides,
  // and fade is value that determines how quickly the next image will fade in
  $.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750});

jquery.backstretch.min.js