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

image 1 http://philmartinezdesign.com/assets/img/explosion/phil_martinez.png
image 2 http://philmartinezdesign.com/assets/img/explosion/2.jpg

当滚动到达某个点时，它所做的只是将一个图像替换为另一个图像。没什么特别的。

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

恒星动画背景图像效果

2 个答案: