Rev. 2.73

Thomas Fuchs씨는 주석을 포함하여 총 50라인으로 작성된 초경량 CSS 애니메이션 자바스크립트 프레임웍인 "Émile"를 만들고 공개했습니다. Émile는 CSS 프로퍼티들을 작성하고 시간 간격을 설정하는 것만으로 중간 과정의 애니메이션이 만들어 집니다. 그리고 사용자 정의 "easing"과 콜백을 완벽하게 수행합니다. 사실 Effect.morph 때문에 Script.aculo.us의 effect.js를 기본으로 로드하고 있는데, 몽창 덜어내버릴지를 심각하게 고민하고 있습니다. 덜어낸다고 삽질하다가 Scripty2가 홀랑 출시되어버리면 참 허무할텐데 말이죠.

HTML:

<script src="emile.js"></script>
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>

Javascript:

emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
  duration: 500,
  after: function(){
    emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
      duration: 4000, easing: bounce
    });
  }
});
 
function bounce(pos) {
  if (pos < (1 / 2.75)) {
    return (7.5625 * pos * pos);
  } else if (pos < (2 / 2.75)) {
    return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);
  } else if (pos < (2.5 / 2.75)) {
    return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);
  } else {
    return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);
  }
}

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar