html5로 문자 텍스트에 애니메이션을 적용하는 방법

Question

HTML5의 페이지에서 텍스트의 개별 문자에 애니메이션을 적용하는 방법은 무엇입니까? 플래시의 예와 같습니다. http://www.greensock.com/splittextfield/

Answer 1

그런 다음 CSS position/top/left를 사용하여 해당 범위를 이동 <span>에서 각 문자를 포장해야 할 것이다.

해당 예제에서 흐림 효과를 사용하기 때문에 Flash 예제의 내용을 완전히 재현 할 수 없습니다. CSS는 그렇게 할 수 없습니다. SVG 수 있으며, IE의 비표준 filter 수 있지만 총 코드 분기 의미합니다.

font-size을 설정하여 각 문자의 크기를 변경할 수 있지만 전단/회전 효과의 종류에 따라 CSS transform을 사용해야합니다. 이것은 아직 표준화되지 않았으며 브라우저 지원에 구멍이 있습니다. 이것은 현 재의 무게와 더 나은 3D 공간 모델링을 추가하여 개선 될 수

<p id="effect">I've got a lovely bunch of coconuts.</p> 
<button id="animate">Animate</button> 


// Add ECMA262-5 method binding if not supported natively 
// 
if (!('bind' in Function.prototype)) { 
    Function.prototype.bind= function(owner) { 
     var that= this; 
     if (arguments.length<=1) { 
      return function() { 
       return that.apply(owner, arguments); 
      }; 
     } else { 
      var args= Array.prototype.slice.call(arguments, 1); 
      return function() { 
       return that.apply(owner, arguments.length===0? args : args.concat(Array.prototype.slice.call(arguments))); 
      }; 
     } 
    }; 
} 

// Lightweight class/instance system 
// 
Function.prototype.makeSubclass= function() { 
    function Class() { 
     if (!(this instanceof Class)) 
      throw 'Constructor function requires new operator'; 
     if ('_init' in this) 
      this._init.apply(this, arguments); 
    } 
    if (this!==Object) { 
     Function.prototype.makeSubclass.nonconstructor.prototype= this.prototype; 
     Class.prototype= new Function.prototype.makeSubclass.nonconstructor(); 
    } 
    return Class; 
}; 
Function.prototype.makeSubclass.nonconstructor= function() {}; 

// Abstract base for animated linear sliding switch between 0 and 1 
// 
var Animation= Object.makeSubclass(); 
Animation.prototype._init= function(period, initial) { 
    this.period= period; 
    this.interval= null; 
    this.aim= initial || 0; 
    this.t= 0; 
}; 
Animation.prototype.set= function(aim) { 
    if (aim===this.aim) 
     return; 
    this.aim= aim; 
    var now= new Date().getTime(); 
    if (this.interval===null) { 
     this.t= now; 
     this.interval= window.setInterval(this.update.bind(this), 32); 
    } else { 
     this.t= now-this.t-this.period+now 
     this.update(); 
    } 
}; 
Animation.prototype.toggle= function() { 
    this.set(this.aim===0? 1 : 0); 
}; 
Animation.prototype.update= function() { 
    var now= new Date().getTime(); 
    var x= Math.min((now-this.t)/this.period, 1); 
    this.show(this.aim===0? 1-x : x); 
    if (x===1) { 
     window.clearInterval(this.interval); 
     this.interval= null; 
    } 
}; 
Animation.prototype.show= function(d) {}; 

// Animation that spins each character in a text node apart 
// 
var ExplodeAnimation= Animation.makeSubclass(); 
ExplodeAnimation.prototype._init= function(node, period) { 
    Animation.prototype._init.call(this, period, 0); 
    this.spans= []; 

    // Wrap each character in a <span> 
    // 
    for (var i= 0; i<node.data.length; i++) { 
     var span= document.createElement('span'); 
     span.style.position= 'relative'; 
     span.appendChild(document.createTextNode(node.data.charAt(i))); 
     node.parentNode.insertBefore(span, node); 
     this.spans.push(span); 
    } 

    // Make up random positions and speeds for each character. 
    // Possibly this should be re-randomised on each toggle? 
    // 
    this.randomness= []; 
    for (var i= this.spans.length; i-->0;) 
     this.randomness.push({ 
      dx: Math.random()*200-100, dy: Math.random()*200-150, 
      sx: Math.random()*1.5, sy: Math.random()*1.5, 
      dr: Math.random()*240-120, og: Math.random()+0.5 
     }); 

    node.parentNode.removeChild(node); 
}; 
ExplodeAnimation.prototype.show= function(d) { 
    for (var i= this.spans.length; i-->0;) { 
     var style= this.spans[i].style; 
     var r= this.randomness[i]; 

     style.left= d*r.dx+'px'; 
     style.top= d*r.dy+'px'; 
     var transform= 'rotate('+Math.floor(d*r.dr)+'deg) scale('+(d*r.sx+1-d)+', '+(d*r.sy+1-d)+')'; 
     if ('transform' in style) 
      style.transform= transform; 
     else if ('MozTransform' in style) 
      style.MozTransform= transform; 

     var o= 1-Math.pow(d, r.og); 
     if ('opacity' in style) 
      style.opacity= o+''; 
     else if ('filter' in style) 
      style.filter= 'opacity(alpha='+Math.ceil(o*100)+')'; 
    } 
}; 


var animation= new ExplodeAnimation(document.getElementById('effect').firstChild, 1000); 
document.getElementById('animate').onclick= animation.toggle.bind(animation); 

: 여기

은 (코드 길이 죄송) 난 그냥 파이어 폭스 주로 최대 해킹 개념 증명이다 완전 무작위 변환, Firefox 이외의 브라우저에서 규모/회전에 대한 더 나은 브라우저 지원을 제공합니다.

(IE는이 자체가지지 할 수있을 CSS transform filters 표준이 아닌, 웹킷과 오페라 한 webkitTransform 및 oTransform 스타일,하지만 당신은 절대 위치에있는 것, 그래서 그들은 상대 위치 인라인 스팬 변환을 거부 각 캐릭터는베이스 라인으로 사용하기 위해 모든 정상적인 위치를 읽는 것을 의미합니다.이 시점에서 나는 지루합니다.)