0

Browsing the Handimania website I realised the title was pulsing one time when the mouse would hover it. Now I know this could probably be a style-animation done with CSS or CSS3 (am I correct?) but I am not too sure about how I can see the source code.

So far, when an appealing static webpage was popping in front of me I could just scan it's html in order to get its secrets and insights. Now I find myself unable to approach this dynamic content in the same way. What I can tell so far is that there should be, somwhere, a class called hover which in turn fades from 0% to 100% and back to 0% a cyano PNG title with a transparent background over a static grey image.

This is the furthest I can go

<div id="logo">
<img src="http://www.handimania.com/wp-content/themes/handimania/images/logo.png" alt="Handimania" class="hover"/>
<h1>
<img class="dark" src="http://www.handimania.com/wp-content/themes/handimania/images/logo-dark.png" alt="Handimania"/>
</h1>
<p id="tagline">Guides for Handmade, DIY &amp; Crafts Maniacs</p>
</div>

1 Answer 1

0

I think it's likely this piece of code:

$('#logo .hover').hover(
    function(e) {
        console.log('enter');
        $('#logo .hover').animate({opacity: 1}, "slow");
        $('#logo .dark').animate({opacity: 0}, "slow");
    },
    function(e) {
        console.log('leave')
        $('#logo .dark').animate({opacity: 1}, "slow");
        $('#logo .hover').animate({opacity: 0}, "slow");
    }
);

which is in the included file jquery.custom.js?ver=1.0 and shows that it's a jQuery animation, not a CSS3 animation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.