I have created a bottle with a label inside of a div that automatically scrolls back and forth as the div scrolls the bottle and label appear to be rotating. Below is a demo along with the code in a 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á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 I make the bottle appear to stand still as the div scrolls and moves the label so the bottle appears to be rotating back and forth in the center of the page and does not move back forth as the label does.
K, massive Edit. Fiddle: https://jsfiddle.net/pkfxqmLs/2/ Basically I simplified it all down... now its container is simpler, it still allows you to scroll with the mouse, but the RAF loop handled it as well. Getting away from background images, all those repeated paragraph elements etc. Not sure if its still visually 100% of what you wanted, or if there was some fore-shortening magic that you were doing with all the different p tags... but if you wanted you could add those back in easily and position them absolutely just like the current #bottle-label element.
The bases of the scroll and the masks is handled with position fixed, and a pusher empty div so that you can scroll over the 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 by 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;
}