Javascript 恒星动画背景图像效果

这似乎是一个略显笼统的问题，但我想没有比这更好的地方了

我怎样才能达到像文字在瞬间爆炸一样的效果

---

我知道它是使用恒星和背景图像完成的，但我想知道是否有人能看到动画是如何完成的？

我猜你指的是顶部的大“PM”？这只是两张图片：

（来源：）

（来源：）

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

---

（顺便说一句，那个网站充斥着可怕的设计选择。不要把它作为你自己作品的灵感，不管你觉得它有多“酷”

我想你指的是顶部的大“PM”？这只是两张图片：

（来源：）

（来源：）

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

（顺便说一句，那个网站充斥着可怕的设计选择。不要把它作为你自己作品的灵感来源，不管你觉得它有多“酷”）

//爆炸！我可能很快就会做一个像这样的测序插件。。。
var siteUrl=$（'#siteUrl'）.html（）；
var$path=siteUrl+“资产/img/explosion”；
var爆炸=[]；
var$frameNum；
var$间距=40；
var$frames=25；
//将所有帧添加到数组中
对于（var s=0；s<$frames；s++）{
爆炸[s]=$path+'/'+s+'.jpg'；
}
爆炸。移位（）；
//缓存
$（'body'）。追加（''）；
$（“#缓存”）.hide（）；
$（爆炸）。每个（函数（）{
$('
他有25个图像，每个图像都是爆炸的一帧。当你滚动（或当他通过点击链接强制滚动）时，他会快速连续地在图像中旋转以产生效果。

//爆炸！我可能很快就会制作一个这样的测序插件。。。
var siteUrl=$（'#siteUrl'）.html（）；
var$path=siteUrl+“资产/img/explosion”；
var爆炸=[]；
var$frameNum；
var$间距=40；
var$frames=25；
//将所有帧添加到数组中
对于（var s=0；s<$frames；s++）{
爆炸[s]=$path+'/'+s+'.jpg'；
}
爆炸。移位（）；
//缓存
$（'body'）。追加（''）；
$（“#缓存”）.hide（）；
$（爆炸）。每个（函数（）{
$('
他有25幅图片，每幅都是爆炸的一帧。当你滚动时（或者当他通过你点击链接强制滚动时），他快速连续地旋转图像以创建效果。
加载需要花费很长时间…他在显示自己的照片时使用了“忍者”来描述自己。失败。很遗憾，他的网站在页面加载时发出319个HTTP请求，需要17MB的图像。我认为这个想法和图形非常简洁，实现可能会很简单更好的方法：）永远加载……他用“忍者”来描述自己，同时显示自己的照片。失败。很遗憾，他的网站在页面加载时发出319个HTTP请求，并且需要17MB的图像。我认为这个想法和图形都很整洁，但实现可能会更好：）
//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] );
    }

});