7

タイポグラフィ効果を出したい、文章の一部を回転させたい。jQueryアニメーションを使ってみました。

単語をアニメーション化したい。これが私のコードです

window.setInterval(function() {
  $("#tchange").animate({
    "top": "-=15px"
  }, 100).fadeOut("fast");
  $('#tchange').text("Xyz").css('top', '-10px').slideDown("slow");
}, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="remove-bottom" style="margin-top: 40px">
        Get on the Current Release.<br>
        Boost your 
        <span id="tchange">
            Competitiveness
        </span>
    </h1>

4

2 に答える 2

1

jQuery は CSS3 アニメーションをサポートしていません。純粋に CSS でアニメーション化するか、jQuery を使用して CSS クラスを交換して CSS アニメーション効果を発生させるか、要素のインライン CSS3 アニメーション プロパティをすばやくインクリメントする必要があります (jQuery でのアニメーション化が実際にどのように機能するかなど)。

例えば。

var x=0, timer=1; //Change timer to change FPS

setInterval(function() { 
    x++;
    $('#myelement').css('-webkit-transform', 'scale(' + x + ')'); 
}, timer);
于 2013-05-02T07:23:33.653 に答える
0

1 つの良い方法は、css を使用することです。プロパティを変更opacityしrotateます。

.rw-words {
  display: inline;
  text-indent: 10px;
}
.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #6b969d;
  -webkit-animation: rotateWord 18s linear infinite 0s;
  -moz-animation: rotateWord 18s linear infinite 0s;
  -o-animation: rotateWord 18s linear infinite 0s;
  -ms-animation: rotateWord 18s linear infinite 0s;
  animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #6b889d;
}
.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #6b739d;
}
.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -o-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  color: #7a6b9d;
}
.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #8d6b9d;
}
@keyframes rotateWord {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  2% {
    opacity: 1;
    transform: transform: rotate(10deg);
  }
  5% {
    opacity: 1;
    transform: transform: rotate(20deg);
  }
  17% {
    opacity: 0.5;
    transform: transform: rotate(30deg);
  }
  25% {
    opacity: 0;
    transform: rotate(90deg);
  }
  70% {
    opacity: 0;
    transform: rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: rotate(275deg);
  }
}
<h1 class="remove-bottom" style="margin-top: 40px">Get on the Current Eagle Release.<br>Boost your<div class="rw-words rw-words-1">
						<span>Competitiveness</span>
						<span>abc</span>
						<span>def</span>
						<span>ghi</span>
						<span>jkl</span>
					</div>
    
    </h1>

ただし、もちろんjQueryも使用できます（ただし、より多くのメモリを使用します）：

var degrees = 0,
  timer = 1; //Change timer to change FPS

setInterval(function() {
  if (degrees < 359) {
    degrees++;
  } else {
    degrees = 0;
  }

  $('.rw-words-1 span').css('transform', 'rotate(' + degrees + 'deg)'); //.css('opacity',degrees/359+'');

}, timer);
.rw-words {
  display: inline;
  text-indent: 10px;
}
.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #6b969d;
  -webkit-animation: rotateWord 18s linear infinite 0s;
  -moz-animation: rotateWord 18s linear infinite 0s;
  -o-animation: rotateWord 18s linear infinite 0s;
  -ms-animation: rotateWord 18s linear infinite 0s;
  animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #6b889d;
}
.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #6b739d;
}
.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -o-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  color: #7a6b9d;
}
.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #8d6b9d;
}
@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  25% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="remove-bottom" style="margin-top: 40px">Get on the Current Eagle Release.<br>Boost your<div class="rw-words rw-words-1">
						<span>Competitiveness</span>
						<span>abc</span>
						<span>def</span>
						<span>ghi</span>
						<span>jkl</span>
					</div>
    
    </h1>

于 2015-03-21T17:12:36.033 に答える