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”？这只是两张图片：

_{（来源：philmartinezdesign.com）}

_{（来源：philmartinezdesign.com）}

它所做的只是在滚动到达某个点时用另一个图像替换一个图像。它没有什么特别之处。

（顺便说一句，那个网站充满了可怕的设计选择。不要把它作为你自己工作的灵感，不管你认为它有多“酷”）