jQuery animated header on scroll

Question

I'm searching for a way to make a header animation like this one.

I have found a solution on this post, but it's not working with images. I changed the code like this:

<div id="header_nav"><img src="http://placehold.it/90x90" /></div>

http://jsfiddle.net/JJ8Jc/72/

What can I do? Thanks for the help.

Question: How can I scale the image in the header with its div aswell?

Any help would be appreciated!

freejosh · Answer 1 · 2013-07-09T13:24:24.127

0

Add overflow: hidden to #header_nav and the image will be cropped by the element's height: Working demo.

Or, add max-height: 100%; max-width: 100% to the image to make it shrink with the height of the element: Working demo.

edited Jul 09 '13 at 13:24

answered Jul 09 '13 at 13:19

freejosh

11,263
4
33
47

Thanks this is working good too but also this one have a same image pixelate problem. – trikutin Jul 09 '13 at 13:37
The example site you posted scales their image in the same way. If the image doesn't contain very intricate details you won't see as many artifacts. The Salient logo consists of thick letters and a shape with solid colors, for example. – freejosh Jul 09 '13 at 13:41

score 0 · Accepted Answer · answered Jul 09 '13 at 13:19

0

Shrink the image as the header gets shrinked?

Fiddle.

$(function(){
    $('#header_nav').data('size','big');
});

$(window).scroll(function(){
    if($(document).scrollTop() > 0)
    {
        if($('#header_nav').data('size') == 'big')
        {
            $('#header_nav').data('size','small');
            $('#header_nav').stop().animate({
                height:'40px'
            },600);
            $('#header_nav img').stop().animate({
                height:'40px' /*image has the same effect like the header*/
            },600);
        }
    }
    else
    {
        if($('#header_nav').data('size') == 'small')
        {
            $('#header_nav').data('size','big');
            $('#header_nav').stop().animate({
                height:'100px'
            },600);
            $('#header_nav img').stop().animate({
                height:'100px' /*image has the same effect like the header*/
            },600);
        }  
    }
});

answered Jul 09 '13 at 13:19

Mohammad Areeb Siddiqui

9,795
14
71
113

Thanks. This is working good just the image is pixelated when scaling. How can I fix it? – trikutin Jul 09 '13 at 13:27
make it a vector image! – Mohammad Areeb Siddiqui Jul 09 '13 at 13:28
or make it a big enough image! – Mohammad Areeb Siddiqui Jul 09 '13 at 13:31
It's vector transparent png and bigger than normal size. How can I convert to vector? – trikutin Jul 09 '13 at 13:34
wait.. let me give you a tool – Mohammad Areeb Siddiqui Jul 09 '13 at 13:35
check this thing: http://forums.adobe.com/thread/769638 – Mohammad Areeb Siddiqui Jul 09 '13 at 13:38

score 0 · Answer 3 · answered Jul 09 '13 at 13:21

0

I you want to crop the image add overflow: hidden to the parent of the image (#header_nav) and if you want that the image shrink with the header add max-height: 100%; to the image.

answered Jul 09 '13 at 13:21

Jonathan Naguin

14,526
6
46
75

jQuery animated header on scroll

3 Answers3