javascript - ステラアニメーションの背景画像効果

Question

これは少し一般的な質問のように思えるかもしれませんが、私はそれを尋ねるのにこれ以上の場所はないと思いました。

http://philmartinezdesign.com/でテキストが爆発しているように見えるような効果をどのように達成できますか？

恒星と背景の画像を使用して行われていることは知っていますが、アニメーションがどのように行われるかを誰かが見ることができるかどうか疑問に思いました。

Answer 1

ちょうどこのような：

//explosion! I'll probably be making a plugin for sequencing like this soon...

var siteUrl = $('#siteUrl').html();
var $path = siteUrl + 'assets/img/explosion';
var explosion = [];
var $frameNum;
var $spacing = 40;
var $frames = 25;


//add all the frames into an array
for( var s = 0; s < $frames; s++ ) {
    explosion[s] = $path + '/' + s +'.jpg';
}
explosion.shift();

//cache
$('body').append('<div id="cache"></div>');
$('#cache').hide();
$(explosion).each(function() {
    $('<img />').attr('src', this).appendTo('#cache');
});

//on scroll swap the images
$(window).scroll(function(){

    var $scrollTop = $(window).scrollTop() -40;

    $frameNum = Math.ceil( $scrollTop / $spacing );

    if( $frameNum <= $frames ) {
        $('#explosion img').attr('src' , explosion[$frameNum] );
    }

});

彼は25枚の画像を持っており、それぞれが爆発のフレームです。スクロールすると（またはリンクをクリックして強制的にスクロールすると）、画像をすばやく連続して回転させて効果を作成します。

Answer 2

一番上の大きな「PM」を指していると思いますか？それはたった2つの画像です：

_{（出典：philmartinezdesign.com）}

_{（出典：philmartinezdesign.com）}

スクロールが特定のポイントに達したときに、一方の画像をもう一方の画像に置き換えるだけです。特別なことは何もありません。

（ちなみに、そのサイトは恐ろしいデザインの選択肢でいっぱいです。どんなに「かっこいい」と思っても、自分の作品のインスピレーションとして使用しないでください）