How do I create a transition effect similar to GameSpot's Logo

[roostaamir]

Hi everyone
I am trying to create an effect similar to Gamespot’s logo
When you scroll the page,the logo blinks and then the Gamespot’s full name appears.you can see this effect for your self in this page
Does anyone have any ideas about how I can achieve this effect??
Thanks in advance

[Soren]

tympanus.net – on-scroll-animated-header

If you’re not needing support for IE8 and below it works a treat. If you do, it’s a heads up about what you want to achieve.

It uses javascript to add a css class that styles the header elements once the user has scrolled a specific amount.

[roostaamir]

Thanks for the article
But I was mostly looking for the blink effect of the Logo
How did they achieve that?

[Atelierbram]

@roostaamir

To be precise: with ‘the blink effect’ you mean how it seems to swap the one image for the other on scroll, no?

If so then @Soren already gave the answer:

It uses javascript to add a css class that styles the header elements once the user has scrolled a specific amount.

Here it’s two span’s within the h1 a with background-images that gets toggled on scroll from this .has-scrolled class that is set on the body element (with javascript). In CSS toggled with opacity: 1 and opacity:0 on those span-s.

Here’s a different, but interesting solution on Codepen.
An example in the wild with background image coming from the side; personally I like this one an awful lot.

[Atelierbram]

@roostaamir
On the sad occasion that this is turning out to be a conversation with myself, here a twist on the same phenomenon on Codepen.
Full page view, doesn’t work on mobile, for no scroll events.

[Author]

Posts