11

JavaScript/jQuery を使用したホバー時の色の循環

テキストのブロックを取り、HSL 0度と360度の間の計算された位置に従って各文字に色を付け、ホバーすると色を右側にアニメーション化しようとしています。私はこれが奇妙であることを知っていますが、我慢してください。私が欲しいのは、ホバー時のアニメーション化された虹のテキストです。

これらすべてを一度に行うロジックについて説明しましたが、ホバー サイクリング動作を機能させることはできません。

ここに codepen.io へのリンクがあります: http://cdpn.io/txmlf

JavaScript マウス イベントと jQuery の .hover() を使用してみました。私の最初の考えは、マウスの入力時に間隔を設定し、終了時にそれをクリアすることでした。

この明らかに非常に重要なプロジェクトについて、何か助けていただければ幸いです。

4

2 に答える 2

17

これが UX にどのように影響するかを考えたいと思うかもしれませんが、これについてはどうですか: http://jsfiddle.net/7Xuep/6/

わかりましたので、虹のすべての色を回転させることは、CSS アニメーションを使用して簡単に行うことができます。問題は、アニメーションが適切な場所で開始されるように、それらをすべてのスパン タグにリンクすることです。(つまり、緑色からアニメーションを開始するには、緑色の文字が必要です。) これを行うには、次を使用できますanimation-delay。

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

これを使用して、各文字の適切な色で虹のアニメーションを開始できます。タイミング関数を使用するlinearと、アニメーションが各色に到達する時間を簡単に決定できます。したがって、各要素に適切なanimation-delay値を付けるだけです。既に生成された HTML を取得し、各要素の属性<span>に CSS ルールを追加するだけでそれを行います。style

var animTime = 6, // time for the animation in seconds
    hueChange = 3, // the hue change from one span element to the next
    prefixes = ["", "-webkit-", "-moz-", "-o-"],
    numPrefixes = prefixes.length;

$('.unicorn').find('span').each(function (i) {
    for (var j = 0; j < numPrefixes; j++) {
        $(this).css(prefixes[j] + 'animation-delay', (animTime * ((i * hueChange) % 360) / 360) - animTime + 's');
    }
});

spanただし、すべての要素を生成すると同時にこれを行うことができます。次に、CSS を使用してアニメーションを設定する例です。

.unicorn:hover span {

    animation: colorRotate 6s linear 0s infinite;

}

@keyframes colorRotate {
    from {
        color: rgb(255, 0, 0);
    }
    16.6% {
        color: rgb(255, 0, 255);
    }
    33.3% {
        color: rgb(0, 0, 255);
    }
    50% {
        color: rgb(0, 255, 255);
    }
    66.6% {
        color: rgb(0, 255, 0);
    }
    83.3% {
        color: rgb(255, 255, 0);
    }
    to {
        color: rgb(255, 0, 0);
    }
}

これですべてここにたどり着きます：http://jsfiddle.net/P6WVg/7/

ここで、誰かがホバリングしなくなったときに色をリセットしたくない場合は.unicorn、次を使用できますanimation-play-state。

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

ただし、最初のフレーム (つまり、この場合) を表示するように、初期値-webkit-animation-play-state:paused;と負の値を組み合わせることで Chrome に問題があることがわかりました。したがって、イベント リスナーを使用して、最初のホバー時にアニメーション CSS を含むクラスを追加する必要がありました。-webkit-animation-delaycolor: rgb(255,0,0);

http://jsfiddle.net/7Xuep/6/

(クロムのバグはここで追跡できます: https://code.google.com/p/chromium/issues/detail?id=269340 )

于 2013-10-06T19:10:41.550 に答える
2

シンプルに (HTML のみで) 維持してください。必要なのはこれだけです。

ライブデモ

var step = 4, // colorChage step, use negative value to change direction
    ms   = 10,  // loop every
    $uni = $('.unicorn'),
    txt  = $uni.text(),
    len  = txt.length,
    lev  = 360/len,
    newCont = "",
    itv;
alert(lev+' '+len);

for(var i=0; i<len; i++)newCont += "<span style='color:hsla("+ i*lev +", 100%, 50%, 1)'>"+ txt.charAt(i) +"</span>";

$uni.html(newCont); // Replace with new content
var $ch = $uni.find('span'); // character

function stop(){ clearInterval(itv); }
function anim(){
  itv = setInterval(function(){
    $ch.each(function(){
      var h = +$(this).attr('style').split(',')[0].split('(')[1]-step % 360;
      $(this).attr({style:"color:hsla("+ h +", 100%, 50%, 1)"});
    });
  }, ms); 
}

$uni.hover(anim,stop);

FF、Chrome、Opera でテスト済み

于 2013-12-08T23:43:01.840 に答える