CODEWITHSUNDEEP
javascriptjquerycss
Barney
Barney

Reputation: 1848

Stellar animated background image effect

This may seem like a slightly general question, but I thought of no better place to ask it.

How can I achieve an effect like the text seemingly exploding at http://philmartinezdesign.com/ ?

I'm aware it's done using stellar and background images but I was wondering if anyone can see how the animation is done?

Upvotes: 1

Views: 1464

Answers (2)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

I'm assuming you're referring to the big "PM" at the top? That's just two images:

image 1
(source: philmartinezdesign.com)

image 2
(source: philmartinezdesign.com)

All it does is replace one image with the other when the scroll reaches a certain point. There's nothing special about it.

(By the way, that site is filled with HORRIBLE design choices. Do NOT use it as inspiration for your own work, no matter how "cool" you think it is)

Upvotes: 1

Matt
Matt

Reputation: 75327

Just like this:

//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] );
    }

});

He has 25 images, each of which is a frame of the explosion. When you scroll (or when he forces a scroll by you clicking a link), he rotates through the images in quick succession to create the effect.

Upvotes: 3

Related Questions