CODEWITHSUNDEEP
jqueryhtmlcss
Sooraj
Sooraj

Reputation: 10567

Zoom in effect on body background

I want the background image of my body to zoom in on page load. The following is the code i have.

CSS:

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(bg.jpg); 
    background-size: 100%;
    transition: all ease-in 5s;   

}

JQuery:

 $( document ).ready(function() {         
          $(document.body).css("background-size", "140%");
      });

I'm trying to change the background-size property of the image on page load. but this is not working. What am i doing wrong?

Upvotes: 4

Views: 6135

Answers (6)

AGE
AGE

Reputation: 3792

All you need is:

html, body {
    background: url("http://placehold.it/200x200") top center no-repeat;
    animation: animateBg forwards 2s ease-in;
}
@keyframes animateBg{
    from { background-size: 200px; }
    to { background-size: 100%; }
}

Note: the image is just a placeholder, you can change it as well as the background-size property of the animateBg keyframe animation (and anything else you need). In case you are not aware of forwards.

Make sure to take a short while and read about CSS Animations, very convenient to be able to leverage CSS first when choosing between jQuery and CSS.

Let me know if this works for you, otherwise we can work on an improved answer that suits you better :)

Upvotes: 6

Svetlin Krastanov
Svetlin Krastanov

Reputation: 11

here it is the Jquery function for your code. With delay and callback

$(document).ready(function () {
    $('body').animate({ backgroundSize: '135%'
    }, 2000, 'linear', function () {
        console.log("called");
    });

      });

Upvotes: 1

Roshan Padole
Roshan Padole

Reputation: 408

Hope this will resolve your query

Just a simple jquery animation play

$("body").animate({
    "background-size" : "180px"
},2000);

Try this for live demo http://jsfiddle.net/g2ef7gc4/25/

Upvotes: 2

Akhilesh Kumar
Akhilesh Kumar

Reputation: 9355

try

$("body").animate({
    "background-size", "140%"
},20000, function() { alert(); });

see example at background zoom effect

Upvotes: 1

Mansukh Khandhar
Mansukh Khandhar

Reputation: 2582

@sooraj just set height and width as like demo

 $( document ).ready(function() {         
          $(document.body).css("background-size", "140%");
      });
body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(//images.visitcanberra.com.au/images/canberra_hero_image.jpg); 
    background-size: 100%;
    transition: all ease-in 5s;   
        height:500px;
    width:100%;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body></body>

Upvotes: -1

sh1omi
sh1omi

Reputation: 71

Why you not making that zoom effect inside the css?

body, html { 
    font-size: 100%; 
    padding: 0;
    margin: 0;   
    background-image: url(bg.jpg); 
    background-size: 140%;
    transition: all ease-in 5s;   
}

Upvotes: 0

Related Questions