javascript - How to make bottle appear to be standing still -
i have created bottle label inside of div automatically scrolls , forth div scrolls bottle , label appear rotating. below demo along code in jsfiddle.
https://jsfiddle.net/pkfxqmls/
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>bottle demo</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <style type="text/css"> body { margin: 0; padding: 0; height: 100%; } #coke { width: 510px; height: 500px; overflow: auto; padding-right: 100px; padding-left: 500px; } img { border: 0; margin-left: -156px; } { display: block; padding-top: 19px; width: 194px; } div div { background-image: url(coke-scroll.png); background-repeat: no-repeat; background-position: 0 0; padding-left: 300px; width: 660px; } p { margin: 0; padding: 0; float: left; height: 467px; background-image: url(label.png); background-attachment: fixed; background-size: 325px 250px; background-repeat: repeat-x; width: .5px; margin-top: 0px; } #x1 {background-position: 5px 140px;} #x2 {background-position: 0px 140px;} #x3 {background-position: -3px 140px;} #x4 {background-position: -6px 140px;} #x5 {background-position: -8px 140px;} #x6 {background-position: -10px 140px;} #x7 {background-position: -12px 140px;} #x8 {background-position: -14px 140px;} #x9 {background-position: -15px 140px;} #x10 {background-position: -16px 140px;} #x11 {background-position: -17px 140px;} #x12 {background-position: -18px 140px;} #x13 {background-position: -19px 140px;} #x14 {background-position: -20px 140px;} #x15 {background-position: -21px 140px;} #x16 {background-position: -22px 140px; width: 2px;} #x17 {background-position: -23px 140px;} #x18 {background-position: -24px 140px; width: 2px;} #x19 {background-position: -25px 140px; width: 2px;} #x20 {background-position: -26px 140px; width: 2px;} #x21 {background-position: -27px 140px; width: 2px;} #x22 {background-position: -28px 140px; width: 3px;} #x23 {background-position: -29px 140px; width: 3px;} #x24 {background-position: -30px 140px; width: 4px;} #x25 {background-position: -31px 140px; width: 5px;} #x26 {background-position: -32px 140px; width: 7px;} #x27 {background-position: -33px 140px; width: 12px;} #x28 {background-position: -34px 140px; width: 55px;} #x29 {background-position: -35px 140px; width: 11px;} #x30 {background-position: -36px 140px; width: 6px;} #x31 {background-position: -37px 140px; width: 5px;} #x32 {background-position: -38px 140px; width: 4px;} #x33 {background-position: -39px 140px; width: 3px;} #x34 {background-position: -40px 140px; width: 2px;} #x35 {background-position: -41px 140px; width: 3px;} #x36 {background-position: -42px 140px; width: 2px;} #x37 {background-position: -43px 140px; width: 2px;} #x38 {background-position: -44px 140px;} #x39 {background-position: -45px 140px; width: 2px;} #x40 {background-position: -46px 140px;} #x41 {background-position: -47px 140px;} #x42 {background-position: -48px 140px;} #x43 {background-position: -49px 140px;} #x44 {background-position: -50px 140px;} #x45 {background-position: -51px 140px;} #x46 {background-position: -52px 140px;} #x47 {background-position: -53px 140px;} #x48 {background-position: -54px 140px;} #x49 {background-position: -56px 140px;} #x50 {background-position: -58px 140px;} #x51 {background-position: -60px 140px;} #x52 {background-position: -62px 140px;} #x53 {background-position: -65px 140px;} #x54 {background-position: -68px 140px;} #x55 {background-position: -74px 140px;} </style> </head> <body> <div id="coke"> <div id="y" style="position: relative; left:0. top: 0;"> <img src="mask.svg" width="156" height="467" style="position: absolute; top: 0px; left: 455.5px; z-index: -5;"/> <p id="x1"></p><p id="x2"></p><p id="x3"></p><p id="x4"></p><p id="x5"></p><p id="x6"></p><p id="x7"></p><p id="x8"></p><p id="x9"></p><p id="x10"></p><p id="x11"></p><p id="x12"></p><p id="x13"></p><p id="x14"></p><p id="x15"></p><p id="x16"></p><p id="x17"></p><p id="x18"></p><p id="x19"></p><p id="x20"></p><p id="x21"></p><p id="x22"></p><p id="x23"></p><p id="x24"></p><p id="x25"></p><p id="x26"></p><p id="x27"></p><p id="x28"></p><p id="x29"></p><p id="x30"></p><p id="x31"></p><p id="x32"></p><p id="x33"></p><p id="x34"></p><p id="x35"></p><p id="x36"></p><p id="x37"></p><p id="x38"></p><p id="x39"></p><p id="x40"></p><p id="x41"></p><p id="x42"></p><p id="x43"></p><p id="x44"></p><p id="x45"></p><p id="x46"></p><p id="x47"></p><p id="x48"></p><p id="x49"></p><p id="x50"></p><p id="x51"></p><p id="x52"></p><p id="x53"></p><p id="x54"></p><p id="x55"></p> <a href="http://www.tisaneteas.com/looknfeel" target="_blank" style="position: relative; top: -20px; left: 0; height: 0px"> <img src="overlay.png" width="156" height="467" alt="pure css coke can román cortés" style="position: relative; top: 0px; left: 0;"/> </a> </div> </div> <script type="text/javascript"> (function(){ var number = 1 var box=document.getelementbyid('coke'); function infscroll(){ box.scrollleft += number; if(box.scrollleft===300){ number = number * -1; } if(box.scrollleft === 0) { number = number * -1; } window.requestanimationframe(infscroll); } window.requestanimationframe(infscroll); }()); </script> </body> </html> how can make bottle appear stand still div scrolls , moves label bottle appears rotating , forth in center of page , not move forth label does.
k, massive edit. fiddle: https://jsfiddle.net/pkfxqmls/2/ simplified down... container simpler, still allows scroll mouse, raf loop handled well. getting away background images, repeated paragraph elements etc. not sure if still visually 100% of wanted, or if there fore-shortening magic doing different p tags... if wanted add in , position them absolutely current #bottle-label element.
the bases of scroll , masks handled position fixed, , pusher empty div can scroll on whole thing.
html:
<div id="coke"> <img id="bottle-mask" src="http://ipbyrne.github.io/bottle-demo/mask.svg" width="156" height="467"/> <img id="bottle-label" src="http://ipbyrne.github.io/bottle-demo/label.png"/> <img id="bottle-overlay" src="http://ipbyrne.github.io/bottle-demo/overlay.png" width="156" height="467" alt="pure css coke can román cortés" /> <div id="pusher"></div> </div> js:
(function(){ var number = 1 var box=document.getelementbyid('coke'); function infscroll(){ box.scrollleft += number; if(box.scrollleft===160){ number = number * -1; } if(box.scrollleft === 0) { number = number * -1; } window.requestanimationframe(infscroll); } window.requestanimationframe(infscroll); }()); css:
body { margin: 0; padding: 0; height: 100%; }
#coke { width: 156px; height: 500px; overflow: auto; position:relative; } #bottle-mask { position:fixed; left:0px; z-index:1; } #bottle-label { position: absolute; top: 140px; width: 325px; height: 250px; z-index: 2; } #bottle-overlay { position: fixed; left:0px; z-index: 3; } #pusher { width: 325px; height: 500px; position: relative; z-index: 4; } 
Comments
Post a Comment