CODEWITHSUNDEEP
jqueryhtmlcss
Mandeep Gill
Mandeep Gill

Reputation: 390

How to load background image as scroll in css3 or jquery

I have a background image and file size is 4+ MB As PNG Format. Website is a single page website and i want to put that background but don't know how i can.

Is there any why to reduce size so webpage load fast or there will be any way in css3 ? so i can load images part as scroll down page.

here is image link i want to put as background image in webpage.

Visit http://tinypic.com/r/o5vyx5/8

Please help.

Upvotes: 0

Views: 837

Answers (2)

Alvaro
Alvaro

Reputation: 41595

You could check the lazy load plugin, but if you prefer to do it by yourself, then you could do it by adding a CSS class when you reach the image position.

To do it you can base you solution on this topic and do something like:

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();

    return (
    rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ );
}

var yourImage = $('#yourImage').get(0);

if(isElementInViewport(yourImage){
   $('#yourImage').addClass('loadImage');
}

And then in your CSS you just have to do add the background only when the loadImage class is added:

#yourImage{
    ...
}

#yourImage.loadImage{
    background: url(path/to/yourImage.jpg) no-repeat center;
}

Upvotes: 1

user2794426
user2794426

Reputation:

pls google more about parallax scrolling and then start ur work. Also chk this sample link.

JSFIDDLE

//code
$(this).click(function() {
            $("#nav li a").removeClass("active");
            $(this).addClass('active');
$('html, body').animate({scrollTop: targetOffset}, 1000);
return false;

Upvotes: 0

Related Questions