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

Button Another button

Eduardo씨는 윈도7 스타일과 유사한 마우스 오버효과jQueryMooTools 그리고 CSS를 사용하여 적용하는 방법을 소개했습니다. 요소를 3중첩으로 준비하고 2번째 요소의 배경 이미지 포지션을 자바스크립트로 변경하는 방법으로 구현되었네요. 언젠가 써먹을 일이 있을것 같아서 Prototype용으로 작성해 보았습니다. 참고로, 원작과 다른 부분은 개별적으로 호출하는 이미지들을 하나로 합하였고 스타일시트의 정의를 자바스크립트로 하는 정도입니다.

Comments

http://webkit.org/blog-files/3d-transforms/morphing-cubes.html

webkit.org는 스노 레퍼드(Snow Leopard)에 설치된 사파리(웹킷)에서 CSS 3D 변환을 지원한다고 발표했습니다. 최신 나이틀리 빌드(nightly build )를 설치하여 직접 확인할 수 있다고 합니다. 그리고 테스트 가능한 CSS 변환 애니메이션 예제인 Poster CircleMorphing Power Cubes를 함께 공개했습니다. 이것은 애플의 3D transforms 기술을 이용하여 구현된 것이며, 하드웨어-엑셀레이션(hardware-acceleration)이 지원된다고 합니다. 똥꼬가 쫄깃쫄깃해 지는군요!

"Oh, was there some Microsoft plugin launched last week? We don’t need no stinkin’ plugin!"

Comments