JSFiddle - React, Tailwind, and code Playground
HTML
<div id="coke">
<div id="y" style="position: relative; left:0. top: 0;">
<img src="http://ipbyrne.github.io/bottle-demo/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="http://ipbyrne.github.io/bottle-demo/overlay.png" width="156" height="467" alt="Pure CSS Coke Can by Román Cortés" style="position: relative; top: 0px; left: 0;"/>
</a>
</div>
</div>
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(http://ipbyrne.github.io/bottle-demo/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;}
...
JavaScript
(function(){
var number = 1
var box=document.getElementById('coke');
function infScroll(){
box.scrollLeft += number;
box.style.left = -1 * box.scrollLeft;
if(box.scrollLeft===300){
number = number * -1;
}
if(box.scrollLeft === 0) {
number = number * -1;
}
window.requestAnimationFrame(infScroll);
}
window.requestAnimationFrame(infScroll);
}());