All geek questions in one place

How to make a bottle stand still

I created a bottle with an inscription inside the div that automatically scrolls back and forth as the div scrolls the bottle and the label seems to rotate. Below is a demo along with the 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;
        }

        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>

How can I make the bottle stand still when the div scrolls and moves the label so that the bottle seems to rotate back and forth in the center of the page and not move backward as the label does.

+4
source share
1 answer

K, . Fiddle: https://jsfiddle.net/pkfxqmLs/2/ ... , - , RAF . , .. , 100% , , - , ..., , , .

div div, .

HTML:

<div id="coke">

            <img id="bottle-mask" src="http://ipbyrne.imtqy.com/bottle-demo/mask.svg" width="156" height="467"/>
            <img id="bottle-label" src="http://ipbyrne.imtqy.com/bottle-demo/label.png"/>
            <img id="bottle-overlay" src="http://ipbyrne.imtqy.com/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>

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

  {       margin: 0;       : 0;       : 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;
}
0
source

Source: https://habr.com/ru/post/1613903/

More articles:


All Articles