JQuery + CSS implement the liquid effect in the water bottle that increases or decreases with the scroll bar

Very interesting. Xiao Xie followed the Demo, a useful plug-in, and only jQuery.
Demo page

I. CSS + jQuery: increase or decrease the liquid in the water bottle with the scroll bar:

The website for drinking soda uses pictures of a bottle, which can be divided into a bottle mouth, a bottle body, a straw, and a bottle bottom. In these images, the bottle is transparent, so we can tile the liquid on the bottom layer by x axis. Of course, remember to set the straw, and the straw is tiled by y axis. For more details, see comments in the code.

Ah, by the way, the company's address is here-http://janploch.de/

Copy codeThe Code is as follows:
Body {background: # fff url(bg_site.png); margin: 0 ;}
# Juice, # juice. inner, # bottle, # bottle. footer, # bottle. content, # bottle. header, # mid. inner {margin: 0 auto ;}
/*
* # Juice without margin: 0 auto; it doesn't matter.
* Because position: fixed; is used, margin: 0 auto; will naturally become invalid.
* Because # bottle cannot accurately set the width, it is useless to add margin: 0 auto;
* Hey, these are all evil mistakes.
*
* # Bottle. footer, # bottle. content, # bottle. header
* Images of the bottom, body, and mouth of the bottle
* For the remaining # juice. inner and # mid. inner
* It is the liquid tiled by the x axis in the center and the straw tiled by the y axis in the center.
*/
# Monitor {
Position: fixed;
Top: 10px;
Left: 10px;
Color: # f0f0f0;
Z-index: 999;
}
/*
* # Monitor is the prompt text area in the upper left corner. For details, see the JS comments section.
*/
# Juice {
Width: 99%;
Position: fixed;
Top: 2000px;
}
# Juice. inner {
Width: 1165px;
Background: url(juice.png) repeat-x;
Height: 2000px;
}
/*
* # Set juice to position: fixed; width: 99%;
* Position: fixed; indicates the absolute positioning element, which is relative to the browser window positioning.
* # Set juice. inner to margin: 0 auto; width: 1165px in the layer;
* In this way, both the center and the scroll bar will not be moved.
*/
# Bottle {
Width: 99%;
Text-align: center;
Position: absolute;
Top: 0;
}
/*
* Position: absolute; top: 0;
* This is because there are more things to be absolutely positioned to prevent obstruction to the position of the bottle body.
* Text-align: center; do not care about egg pain
*/
# Bottle. header {
Background: url(bottle_top.png) no-repeat;
Width: 1175px;
Height: 2648px;
}
# Bottle. content {
Background: url(content_bg.png) repeat-y;
Height: 500px;
Width: 1186px;
}
# Bottle. footer {
Background: url(bg_footer.png) no-repeat;
Width: 1184px;
Height: 567px;
}
/*
* Three bottles are separated, and the o (* ￣ ▽ ￣ *) operator is very simple.
*/
# Mid {
Width: 99%;
Position: fixed;
Z-index:-999;
}
/*
* The effect here is the same as that of # juice, z-index:-999;, which indicates putting it at the bottom layer.
*/
# Mid. inner {
Width: 92px;
Height: 2000px;
Background: url(strohalm_mid.png) repeat-y;
}
/*
* # Mid. inner indicates the image settings of the straw.
*/
</Style>
<Script type = "text/javascript">
JQuery (document). ready (function ($ ){
// Remember to put jQuery kuha in front of this code and pull out the missing kids shoes to cut JJ for an hour.
$ (Window). scroll (function (){
// The event triggered by the scroll bar. The target is the entire window, that is, the scroll bar of the window.
$ ("# Monitor" ).html ("scrollTop:" + $ (window). scrollTop ());
// Monitor the value of $ (window). scrollTop () in # monitor at any time
If ($ (window). scrollTop () <1108) $ ("# juice" ).css ('top', 490 + 815-$ (window). scrollTop ());
Else $ ("# juice" ).css ('top', $ (window). scrollTop ()/2900*580)
// $ (Window). scrollTop () <1108, the liquid stops increasing and moves down as the scroll bar is pulled up.
// Vice versa, increase or decrease according to the ratio of scroll bar
// 1108 indicates the value of $ (window). scrollTop () when the liquid should be stopped.
// 2900 is the page height and 580 is the part height of the window.
// 490 what is xiaoxie? I don't know what it is (in fact, this guy forgot it.
// Keep away from the top of the window as the scroll bar is pulled up.
});
})
</Script>
<Div id = "demo_menu" style = "position: fixed; bottom: 10px; left: 10px; z-index: 999;"> <a style = "color: # fff; "href ="/"> return </a> </div>
<Div id = "monitor" style = ""> scrollTop: 0 </div>
<Div id = "juice"> <div class = "inner"> </div>
<Div id = "mid"> <div class = "inner"> </div>
<Div id = "bottle">
<Div class = "header"> </div>
<Div class = "content"> </div>
<Div class = "footer"> </div>
</Div>

Ii. Note:
To sum up, Grace, this is used to deepen the understanding of visual applications in jQuery and design (in fact, Xiao Xie makes himself a pain point and wants to put everyone together ), after understanding it, I still need to use the plug-in (plugin _ plugin) (Xiao Xie indicates powerlessness + 1, which is indeed a bit confusing (= ). O (* ￣ ▽ ￣.

Package and download DEMO code