jQuery CSSでスクロールで増減するソーダボトル内の液体エフェクトを実現 bar

jQuery CSSでスクロールで増減するソーダボトル内の液体エフェクトを実現 bar_jquery

WBOY

リリース： 2016-05-16 18:01:51

オリジナル

1363 人が閲覧しました

とても興味深いです。 Xiaoxie も続いてデモを作成しました。プラグインはなく、jQuery のみがインストールされました。
デモデモページ

1. CSS jQuery はスクロールバーでソーダボトル内の液体の増減を実現します:

ソーダを飲むための Web サイトと言えば、ボトルの絵を使用しています。ボトルの口、ボトルの本体、ストロー、ボトルの底に分かれています。これらの写真では、ボトルの内側が透明なので、最下層の x 軸に従って液体の画像を並べることができます。もちろん、ストローを取得することを忘れないでください。ストローは y 軸に従って並べられます。 -軸。その他の詳細については、コード内のコメントを参照してください。

ああ、ちなみにその会社のアドレスはここです - http://janploch.de/

コードをコピーコードは次のとおりです:

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 It doesn’t matter whether to add margin:0 auto;
* Because position:fixed; is used, so margin:0 auto ; Naturally it fails
* Because #bottle cannot set the width accurately, so naturally adding margin:0 auto; is useless
* Hehe, these are all Xiao Xie’s mistakes
*
* #bottle .footer, #bottle .content, #bottle .header These
* are pictures of the bottom, body and mouth of the bottle respectively
* and the remaining #juice .inner and #mid .inner respectively
* is the liquid tiled in the center according to the x-axis and the straw tiled in the center according to the y-axis
*/
#monitor {
position:fixed;
top: 10px;
left:10px;
color:#f0f0f0;
z-index:999;
}
/*
* #monitor is the prompt text area in the upper left corner, Specifically check the JS comment section
*/
#juice {
width:99%;
position:fixed;
top:2000px;
}
#juice .inner {
width:1165px;
background:url(juice.png) repeat-x;
height:2000px;
}
/*
* #juice is set to position in the outer layer: fixed; width:99%;
* position:fixed; means absolutely positioned elements, positioned relative to the browser window
* #juice .inner is set to margin:0 auto; width:1165px in the inner layer ;
* In this way, if you cooperate well, you can achieve the effect of being centered but not moving with the scroll bar
*/
#bottle {
width:99%;
text-align:center;
position:absolute;
top:0;
}
/*
* position:absolute; top:0;
* This is done because there are many absolute positioning things, which prevents It will hinder the position of the bottle
* text-align:center; Don’t worry if it’s just a 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;
}
/*
* Separate the three parts of the bottle, it is very simple o(*￣▽￣*)ゞ
*/
#mid {
width:99%;
position:fixed ;
z-index:-999;
}
/*
* The effect here is the same as #juice, z-index:-999; means placing it at the bottom
*/
#mid .inner {
width:92px;
height:2000px;
background:url(strohalm_mid.png) repeat-y;
}
/*
* #mid .inner is the image setting of the straw
*/

Return

< div id="monitor" >scrollTop: 0

Demo code package download