CODEWITHSUNDEEP
jqueryhtmlcssscroll
Rox
Rox

Reputation: 174

How zoom the background-image in while scrolling?

This is my code in html, css and js (very simplified):

<body>
    <div id="wrapper">
        <section id="first">
            <div class="background"></div>
            <div class="videoBackground"></div>
            <div class="content">
                <div id="titleGFS" class="title">Ipse eorum</div>
                <div id="txt1" class="text">Ipse eorum opinionibus accedo, qui Germaniae...</div>
                <div id="txt2" class="text">Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania...</div>
            </div>
        </section>

        <!-- other sections -->

    </div>
</body>

CSS:

    html,body{
        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;
    } 

    #wrapper{
        min-width: 1000px;
    }

    section{
        min-height: 100vh;
    }

    #first{
        color: whitesmoke;
        background: url('1.jpg') no-repeat center;
        background-size: cover;   
    }

    #first .background{
        background-image: none;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
        width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

JS:

/*Change background (I need it in this way)*/
$('#first').css({background:'none'});
$('#first .background').css({backgroundImage: "url('1.jpg')"});

/*Scrolling*/
$(window).scroll(function(){
    var $maxScroll=300;
    var $maxScale=1.3;
    var $x=$(window).scrollTop()/1000+1;
    if($(window).scrollTop()>$maxScroll) $x=$maxScale;
    $('#first .background').css({transform: 'scale('+$x+','+$x+')'});

What I want to do: zoom in the background-image with a limit of scaling of 1.3 while the page is scrolling down, the background must be remained in fixed position.

It works: I mean, when I scroll a little the background zooms in, ok!, then it starts to scroll down... I can't understand why and I tried to find an explanation by searching everywhere.

Upvotes: 1

Views: 13325

Answers (1)

Alp
Alp

Reputation: 3105

In your scroll method, you play with background with this line:

 $('#first .background').css({transform: 'scale('+$x+','+$x+')'});

It transforms background, i.e. scales it. Comment out or play with other transformations to see the difference. If you don't need it, remove that line altogether.

__UPDATE__

Take a look at this fiddle. I Changed the image URL as follows:

$('#first').css({background:'none'});

/*Scrolling*/
$(window).scroll(function(){
    var $maxScroll=500;
    var $maxScale=1.3;
    var $x=$(window).scrollTop()/100+1;
    console.log("scrollTop : " + $(window).scrollTop() + "- x : " + $x);
    if($(window).scrollTop()>$maxScroll) $x=$maxScale;
//    $('#first .background').css({transform: 'scale('+$x+','+$x+')'});

        $('#first .background').css({transform: 'scale('+$x+','+$x+')'});

});

I also changed 1000 to 100 in the line below:

var $x=$(window).scrollTop()/100+1;

This way, I made the division ($x) greater in value and it helped scaling to be more obvious.

Let me try to explain what happens in your case: scaling is so minimal that you hit the barrier too soon scaling stops.

In my case tho, keep an eye on console, scaling range is larger, so I keep scale the image more and more. But after I exceed 500 limit, image is zoomed out because of the following line:

if($(window).scrollTop()>$maxScroll) $x=$maxScale;

where $x is reset to $maxScale (Zoom out) and if I keep scrolling, it starts zooming in again.

Does it make sense now ?

Upvotes: 4

Related Questions