Return to Answer

Source Link

created Sep 17, 2014 at 2:23

/*//
idea and most code from HTML 5 CSS All In One for Dummies by Andy Harris
http://www.aharrisbooks.net/haio/book_4/chap_07/
//*/

        var drawing;
        var con;
        var absPic;
        CANV_HEIGHT = 400;
        CANV_WIDTH = 400;
        SPR_HEIGHT = 100;
        SPR_WIDTH = 80;
        
        var x = 0;
        var y=100;
        var dx = 10;
        var dy = 7;
        
        function init(){
            drawing = document.getElementById("drawing");
            con = drawing.getContext("2d");
            absPic = document.getElementById("absPic");
            setInterval(draw, 100);
        } // end init
        
        function draw(){
            
            // clear background
            con.clearRect(0, 0, 400, 400);
            
            // move the element
            x += dx;
            y += dy;
            
            // check for boundaries
            bounce();
            
            // draw the image
            con.drawImage(absPic, x, y, SPR_WIDTH, SPR_HEIGHT);
            
            //* // turn on (add '/ ' in front) for wrap
            function wrap(){
                if (x > CANV_WIDTH) {
                    x = 0;
                }
                if (x < 0) {
                    x = CANV_WIDTH;
                }
                if (y > CANV_HEIGHT){
                    y = 0;
                }
                if (y < 0) {
                    y = CANV_HEIGHT;
                }
            } // end wrap
            //*/
            
            //*// turn on for bounce
            function bounce(){
                if (x > CANV_WIDTH - SPR_WIDTH) {
                    dx += -1;
                }
                if (x < 0) {
                    dx *= -1;
                }
                if (y > CANV_HEIGHT - SPR_HEIGHT) {
                    dy *= -1;
                }
                if (y < 0) {
                    dy *= -1;
                }
            } // end bounce
            //*/
            
            } // end draw

body{
  /*font-size:400%;*/
  font-family:"univers",sans-serif;
  background-color:#4ca3d7;
  color:white;
    }

    .hidden{
      display: none;
    }

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>b4c7_03wrapBounce.html</title>
<body onload = "init()">
    <h3>Animated wrap or bounce</h3>
    
    <img class = "hidden"
         id = "absPic"
         src = "http://webdev.nut.cc/AbigailSelfPortraitPicassoStyle.jpg"
         alt = "Abigail Clare Sawatsky self-portrait in the style of Picasso" />
    
    <canvas id = "drawing"
            height = "400"
            width = "400">
        Canvas not supported
    </canvas>
</body>
</html>

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
display: block;
margin: 0 auto;
padding: 10px;
width: 100%;
background: #a8d4d7;
}
.bottle {
position: relative;
display: block;
margin: 0 auto;
height: 160px;
width: 100px;
background: #64B7FF;
border-radius: 40px;
}
.bottle .reflection {
position: absolute;
top: 8px;
left: 5px;
height: 40px;
width: 110px;
border-top-left-radius: 31px;
border-top-right-radius: 31px;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0.25)), color-stop(1%, rgba(255, 255, 255, 0.20)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
}
.bottle .line {
position: absolute;
background: inherit;
height: 15px;
width: 110px;
border-radius: 15px;
}
.bottle .line:before {
content:"";
height: 15px;
width: 100px;
position: absolute;
top: -1px;
left: 5px;
box-shadow: 0px 1px 0px 0px rgba(80, 146, 204, .75);
-webkit-box-shadow: 0px 1px 0px 0px rgba(80, 146, 204, .75);
}
.bottle .line:after {
content:"";
height: 15px;
width: 100px;
position: absolute;
top: -1px;
left: 5px;
box-shadow: inset 0px 1px 0px 0px rgba(176, 218, 255, .75);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(176, 218, 255, .75);
}
.bottle .line:nth-child(3) {
top: 40px;
left: -5px;
}
.bottle .line:nth-child(4) {
bottom: 40px;
left: -5px;
}
.stand {
height: 250px;
width: 120px;
background: white;
position: relative;
display: block;
margin: 0 auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.stand:before {
content:"";
position: absolute;
top: -5px;
left: 10px;
width: 100px;
height: 8px;
background: #f8f8f8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.stand:after {
content:"";
position: absolute;
bottom: 0px;
width: 100%;
height: 3px;
background: #e1e1e1;
}
.stand .taps {
height: 40%;
width: 70%;
background: #e1e1e1;
position: absolute;
margin: 0 auto;
top: 10%;
left: 0;
bottom: 0;
right: 0;
border-radius: 5px;
border-bottom-color: #767676;
border-bottom-style: solid;
border-bottom-width: 10px;
}
.stand .taps:before {
content:"";
height: 97%;
width: 1px;
background: #c5c5c5;
position: absolute;
bottom: 0;
left: 0;
border-top-left-radius: 5px;
}
.stand .taps:after {
content:"";
height: 97%;
width: 1px;
background: #c5c5c5;
position: absolute;
bottom: 0;
right: 0;
border-top-right-radius: 5px;
}
.stand .taps div {
height: 20px;
width: 32px;
background: white;
display: inline-block;
margin: 15px 4px;
}
.stand .taps .cold:before {
content:"";
height: 6px;
width: 32px;
position: absolute;
margin: 0 auto;
background: #0000FF;
}
.stand .taps .hot:before {
content:"";
height: 6px;
width: 32px;
position: absolute;
margin: 0 auto;
background: #FF3300;
}
.stand .taps .cold:after {
content:"";
height: 8px;
width: 8px;
border-radius: 8px;
position: absolute;
margin: auto;
top: 30px;
left: 16px;
background: white;
}
.stand .taps .hot:after {
content:"";
height: 8px;
width: 8px;
border-radius: 8px;
position: absolute;
margin: auto;
top: 30px;
right: 16px;
background: white;
}
.bottle .bubbles {
height: 100%;
width: 100%;
margin: 0 auto;
}
.bottle .bubbles span {
position: absolute;
opacity: .5;
}
.bottle .bubbles span:nth-child(1) {
height: 3px;
width: 3px;
border-radius: 3px;
background: #d8d8ff;
bottom: 75px;
left: 45px;
}
.bottle .bubbles span:nth-child(2) {
height: 5px;
width: 5px;
border-radius: 5px;
background: #d8d8ff;
bottom: 25px;
left: 25px;
}
.bottle .bubbles span:nth-child(3) {
height: 7px;
width: 7px;
border-radius: 7px;
background: #d8d8ff;
bottom: 35px;
left: 60px;
}
.bottle .bubbles span:nth-child(4) {
height: 9px;
width: 9px;
border-radius: 9px;
background: #d8d8ff;
bottom: 20px;
left: 45px;
}
.bottle .bubbles span:nth-child(5) {
height: 11px;
width: 11px;
border-radius: 11px;
background: #d8d8ff;
bottom: 60px;
left: 50px;
}
.bottle .bubbles span:nth-child(6) {
height: 9px;
width: 9px;
border-radius: 9px;
background: #d8d8ff;
bottom: 60px;
left: 60px;
}

<div class="wrapper">
<div class="bottle">
    <div class="bubbles">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="reflection"></div>
    <div class="line"></div>
    <div class="line"></div>
</div>
<div class="stand">
    <div class="taps">
        <div class="cold"></div>
        <div class="hot"></div>
    </div>
</div>
</div>

Post Made Community Wiki by Phil Sawatsky

occurred Sep 17, 2014 at 2:23