Javascript 如何使瓶子看起来静止不动_Javascript_Css_Svg_Css Animations_Image Masking

Javascript 如何使瓶子看起来静止不动

javascript css svg

Javascript 如何使瓶子看起来静止不动,javascript,css,svg,css-animations,image-masking,Javascript,Css,Svg,Css Animations,Image Masking,我已经创建了一个瓶子，在一个div内有一个标签，当div滚动瓶子时，标签会自动来回滚动，并且标签似乎在旋转。下面是一个演示以及JSFIDLE中的代码瓶子演示身体 { 保证金：0；填充：0；身高：100%； } #可乐 { 宽度：510px；高度：500px；溢出：自动；右边填充：100px；左侧填充：500px； } img { 边界：0；左边距：-156px； } A. { 显示：块；填充顶部：19px；宽度：194px； } div div { 背景图片：url（c

我已经创建了一个瓶子，在一个div内有一个标签，当div滚动瓶子时，标签会自动来回滚动，并且标签似乎在旋转。下面是一个演示以及JSFIDLE中的代码


瓶子演示
身体
{
保证金：0；
填充：0；
身高：100%；
}
#可乐
{
宽度：510px；
高度：500px；
溢出：自动；
右边填充：100px；
左侧填充：500px；
}
img
{
边界：0；
左边距：-156px；
}
A.
{
显示：块；
填充顶部：19px；
宽度：194px；
}
div div
{
背景图片：url（coke scroll.png）；
背景重复：无重复；
背景位置：0；
左侧填充：300px；
宽度：660px；
}
P
{
保证金：0；
填充：0；
浮动：左；
高度：467px；
背景图片：url（label.png）；
背景附件：固定；
背景尺寸：325px250px；
背景重复：重复-x；
宽度：.5px；
边际上限：0px；
}
#x1{背景位置：5px140px；}
#x2{背景位置：0px 140px；}
#x3{背景位置：-3px140px；}
#x4{背景位置：-6px 140px；}
#x5{背景位置：-8px 140px；}
#x6{背景位置：-10px 140px；}
#x7{背景位置：-12px 140px；}
#x8{背景位置：-14px 140px；}
#x9{背景位置：-15px 140px；}
#x10{背景位置：-16px 140px；}
#x11{背景位置：-17px 140px；}
#x12{背景位置：-18px 140px；}
#x13{背景位置：-19px 140px；}
#x14{背景位置：-20px 140px；}
#x15{背景位置：-21px 140px；}
#x16{背景位置：-22px 140px；宽度：2px；}
#x17{背景位置：-23px 140px；}
#x18{背景位置：-24px 140px；宽度：2px；}
#x19{背景位置：-25px 140px；宽度：2px；}
#x20{背景位置：-26px 140px；宽度：2px；}
#x21{背景位置：-27px 140px；宽度：2px；}
#x22{背景位置：-28px 140px；宽度：3px；}
#x23{背景位置：-29px 140px；宽度：3px；}
#x24{背景位置：-30px 140px；宽度：4px；}
#x25{背景位置：-31px 140px；宽度：5px；}
#x26{背景位置：-32px 140px；宽度：7px；}
#x27{背景位置：-33px 140px；宽度：12px；}
#x28{背景位置：-34px 140px；宽度：55px；}
#x29{背景位置：-35px 140px；宽度：11px；}
#x30{背景位置：-36px 140px；宽度：6px；}
#x31{背景位置：-37px 140px；宽度：5px；}
#x32{背景位置：-38px 140px；宽度：4px；}
#x33{背景位置：-39px 140px；宽度：3px；}
#x34{背景位置：-40px 140px；宽度：2px；}
#x35{背景位置：-41px 140px；宽度：3px；}
#x36{背景位置：-42px 140px；宽度：2px；}
#x37{背景位置：-43px 140px；宽度：2px；}
#x38{背景位置：-44px 140px；}
#x39{背景位置：-45px 140px；宽度：2px；}
#x40{背景位置：-46px 140px；}
#x41{背景位置：-47px 140px；}
#x42{背景位置：-48px 140px；}
#x43{背景位置：-49px 140px；}
#x44{背景位置：-50px 140px；}
#x45{背景位置：-51px 140px；}
#x46{背景位置：-52px 140px；}
#x47{背景位置：-53px 140px；}
#x48{背景位置：-54px 140px；}
#x49{背景位置：-56px 140px；}
#x50{背景位置：-58px 140px；}
#x51{背景位置：-60px 140px；}
#x52{背景位置：-62px 140px；}
#x53{背景位置：-65px 140px；}
#x54{背景位置：-68px 140px；}
#x55{背景位置：-74px 140px；}

（功能（）{
变量编号=1
var-box=document.getElementById（'coke'）；
函数infScroll（）{
box.scrollLeft+=数字；
if（box.scrollLeft==300）{
数字=数字*-1；
}
如果（box.scrollLeft==0）{
数字=数字*-1；
}
window.requestAnimationFrame（infScroll）；
}
window.requestAnimationFrame（infScroll）；
}());

当div滚动并移动标签时，如何使瓶子看起来静止不动，使瓶子在页面中央前后旋转，而不是像标签那样前后移动。

<!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;
        }

        a
        {
            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 by Rom&aacute;n Cort&eacute;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>

<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 by Rom&aacute;n Cort&eacute;s" />
    <div id="pusher"></div>

    </div>

(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);
      }());

#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;
}