Home/ Questions/Q 8663767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T17:04:02+00:00

Basically I saw this page THIS PAGE and if you scroll up and down

  • 0

Basically I saw this page THIS PAGE and if you scroll up and down you can see the glass of drink becoming full and empty depeing on where your scrollbar is. Any idea how this is done?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s pretty complex to do stuff like that but not particularly hard.

    First, you’ll need to manage this using something like jQuery. You got that already so good…

    The html below is a working example that assumes the user has an image:
    enter image description here

    it is 700 x 100. The code is pretty simple. Round the window’s scrollTop() value and figure the right frame offset based on the results. No need to fully explain, the code below says it all.

    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Test</title>
    <meta name="viewport" content="width=device-width">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<style>
#main{position:relative;}
.dummy{height:500px;}
#glass{
    height:200px;
    width:100px;
    background:url(http://www.hep-g.com/glass.jpg) no-repeat;
    background-position:0 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    var frame = 0;
    $(window).scroll(function(){

        if($(window).scrollTop() % 100 < 10)
            frame = Math.floor($(window).scrollTop() / 100) * 100;

        if(frame > 700)
            frame = 700;

        $('#glass').css('background-position', '-' + frame + 'px 0');
    });

});
</script>
<body>
    <div id="main">
        <section class="dummy">
            This is dummy content
        </section>
        <section id="glass"></section>
        <section class="dummy">
            This is dummy content
        </section>
        <section class="dummy">
            This is dummy content
        </section>
    </div>
</body>
</html>
    • 0