[해피CGI][cgimall] 간단한 TXT 애니메이션 효과

[HTML 소스]

link(href='https://fonts.googleapis.com/css?family=Roboto+Condensed:700', rel='stylesheet', type='text/css')

 

h1 This text will be sliced

[CSS 소스]

@import "nib"

 

body

  background #0099FF

 

h1

  display block

 

  absolute top 50% left 50%

 

  font-family 'Roboto Condensed'

  font-size 50px

  color #1A4C80

 

  text-transform uppercase

 

  transform translate(-50%, -50%)

 

  > span

    display block

 

    position relative

 

    float left

    

    overflow hidden

 

    white-space nowrap

 

    span

      position absolute


 

[JS소스]

class Slicer {

  constructor(element, slices, orientation = 'vertical') {

    this.element = element;

    

    this.innerHTML = this.element.innerHTML;

    this.element.style.width = window.getComputedStyle(this.element).width;

    this.element.style.height = window.getComputedStyle(this.element).height;

    

    this.orientation = orientation;

    this.slices = slices;

  }

  

  get slices() {

    return this._slices;

  }

  

  set slices(slices) {

    this._slices = slices;

    this.slice();

  }

  

  slice () {

    var sliceSize = 100 / this.slices;

    

    var span = document.createElement('span');

    span.appendChild(document.createElement('span'));

    span.children[0].innerHTML = this.innerHTML;

    

    if (this.orientation === 'vertical') {

      span.style.width = sliceSize + '%';

      span.style.height = '100%';

    }

    else {

      span.style.width = '100%';

      span.style.height = sliceSize + '%';

    }

    

    while (this.element.firstChild) {

      this.element.removeChild(this.element.firstChild);

    }

    

    this.element.appendChild(span);

    

    var newSpan;

    for (var i = 1; i < this.slices; ++i) {

      newSpan = span.cloneNode(true);

      

      if (this.orientation === 'vertical') {

        newSpan.children[0].style.left = -i * this.slices * sliceSize + '%';

      }

      else {

        newSpan.children[0].style.top = -i * this.slices * sliceSize + '%';

      }

 

      this.element.appendChild(newSpan);

    }

  }

};

 

var slicer = new Slicer(document.querySelector('h1'), 116);

 

var gui = new dat.GUI();

gui.add(slicer, 'slices', 10, 500);

 

var animate = function () {

  var tl = new TimelineMax();

 

  tl.staggerFromTo('h1 > span:nth-child(even)', 0.2, {

    y: -20,

    opacity: 0

  }, {

    y: 0,

    opacity: 1

  }, 0.1, 'letter');

  

  tl.staggerFromTo('h1 > span:nth-child(odd)', 0.2, {

    y: 20,

    opacity: 0

  }, {

    y: 0,

    opacity: 1

  }, 0.1, 'letter');

};

 

var button = {

  animate: animate

};

gui.add(button, 'animate');

 

animate();