CSS vs. SVG
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
* {
box-sizing: border-box;
}
body {
font-family: 'Oswald', sans-serif;
}
$bg:#F7D568;
$skinDark:#E7AE9A;
$skinLight:#EFBAAA;
$nipples:#E79A9A;
$headColor:#E79E8A;
$bear:#612410;
$blue:#3D5E8C;
$time: 4.5s;
h1{
color:#0845A2;
font-size:3.5em;
position:relative;
text-align:center;
margin-top:1em;
font-weight:700;
z-index:999;
}
.css-wrapper {
position:absolute;
width:50%;
height:100%;
top:0;
left:0;
background:$bg;
border-right:1px solid #fff ;
z-index:0;
//border-right:1px solid #ccc;
.drinking-man {
margin:25% auto;
position:relative;
width:100px;
}
.head {
width:50px;
height:125px;
background:$headColor;
position:relative;
margin-top:0px;
margin-left:25px;
border-radius:30px 30px 30px 25px;
z-index:10;
transform-origin:bottom center;
animation: move $time linear infinite;
animation-delay:2s;
&::before {
content:"";
width:11px;
height:11px;
background:$headColor;
position:absolute;
border-radius:50%;
margin-top:22px;
margin-left:-7px;
box-shadow:52px 0 0 $headColor;
}
&::after {
content:"";
width:25px;
height:10px;
background:$bear;
position:absolute;
margin-left:12px;
margin-top:0px;
border-radius:0px 0 10px 10px;
box-shadow:inset 0 -3px 0 #4E1C0C;
z-index:100;
}
}
.hair {
width:54px;
height:35px;
background:$bear;
position:absolute;
border-radius:20px 20px 0px 0px ;
margin-left:23px;
margin-top:-4px;
animation: hair $time linear infinite;
animation-delay:2s;
}
.glasses {
width:23px;
height:13px;
position:absolute;
background:rgba(52,67,115,0.8);
margin-top:20px;
margin-left:0px;
border-radius:0px 0px 10px 10px;
box-shadow:28px 0 0 rgba(52,67,115,0.8);
&::after {
content:"";
width:5px;
height:2px;
background:#354E72;
position:absolute;
margin-left:23px;
}
}
.bear {
width:57px;
height:57px;;
border-radius:50%;
background:$bear;
box-shadow:inset 0px -13px 0 #4E1C0C;
border:2px solid #4E1C0C;
position:absolute;
margin-top:38px;
margin-left:-4px;
}
.right-arm {
width:20px;
height:150px;
position:absolute;
background: linear-gradient(top, $skinDark, $headColor );
background: -webkit-linear-gradient(top, $skinDark, $headColor );
background: -moz-linear-gradient(top, $skinDark, $headColor );
margin-left:80px;
margin-top:-55px;
transform: rotate(-15deg);
transform-origin: 0 0;
z-index:-1;
transform-origin:top center;
animation: rightarm $time linear infinite;
animation-delay:2s;
&::after {
content:"";
width:30px;
height:30px;
border-radius:50%;
background:$headColor;
position:absolute;
margin-top:140px;
margin-left:-10px;
box-shadow:inset 5px 0 0 darken($headColor, 5%);
}
}
.arm {
width:20px;
height:80px;
background:$skinDark;
position:absolute;
margin-top:-65px;
margin-left:3px;
border-radius:0px 0px 30px 30px;
transform: rotate(55deg);
transform-origin:top center;
z-index:20;
animation: arm $time linear infinite;
animation-delay:2s;
}
.left-arm {
width:95px;
height:20px;
position:absolute;
background:$headColor;
margin-left:0px;
margin-top:60px;
border-radius:30px 0px 0px 30px;
transform: rotate(0deg);
transform-origin:0;
animation: drink $time linear infinite;
animation-delay:2s;
z-index:10;
&::after {
content:"";
width:30px;
height:30px;
border-radius:50%;
background:$headColor;
position:absolute;
margin-top:-8px;
margin-left:85px;
box-shadow:inset -5px 0 0 darken($headColor, 5%);
}
&::before {
content:"";
width:25px;
height:42px;
background:linear-gradient(left, #FFD02D 20%, #FFE270 80%);
background:-webkit-linear-gradient(left, #FFD02D 20%, #FFE270 80%);
background:-moz-linear-gradient(left, #FFD02D 20%, #FFE270 80%);
position:absolute;
margin-left:95px;
margin-top:-30px;
border-radius:5px 5px 10px 10px;
border-top:8px solid white;
border-bottom:2px solid #F3D7C9;
border-left:2px solid #F3D7C9;
border-right:2px solid #F3D7C9;
transform:rotate(-40deg);
animation: beer $time linear infinite;
animation-delay:2s;
}
}
.body {
width:100px;
height:100px;
background:$skinDark;
border-radius:50%;
position:relative;
margin-top:-24px;
box-shadow:inset -10px 0px 0px $skinLight;
transform-origin:bottom center;
animation: move $time linear infinite;
animation-delay:2s;
&::before {
content:"";
position:absolute;
width:8px;
height:8px;
background:$nipples;
border-radius:50%;
top:45px;
left:25px;
box-shadow: 40px 0 0 $nipples;
}
&::after {
content:"";
position:absolute;
width:55px;
height:50px;
background:$skinLight;
top:91%;
left:22px;
z-index:-1;
box-shadow:inset 20px 0 0 $skinDark;
}
}
.pants {
width:55px;
height:30px;
background:$blue;
border-radius:0px 0px 30px 30px;
margin-top:38px;
margin-left:22px;
box-shadow:inset -11px -5px 0 #2E4A72;
position:relative;
z-index:10;
&::before {
content:"";
width:15px;
height:50px;
position:absolute;
background:$blue;
margin-left:3px;
margin-top:15px;
box-shadow:34px 0 0 #2E4A72;
}
}
.legs {
width:12px;
height:175px;
background:$skinDark;
position:absolute;
margin-top:65px;
margin-left:4px;
box-shadow:34px 0 0 $skinLight;
&::before {
content:"";
width:32px;
height:10px;
background:$skinDark;
position:absolute;
margin-top:175px;
margin-left:-20px;
box-shadow:0 2px 0 darken($skinDark, 5%);
border-radius:10px 0px 0px 10px;
}
&::after {
content:"";
width:32px;
height:10px;
background:$skinLight;
position:absolute;
margin-top:175px;
margin-left:34px;
box-shadow:0 2px 0 darken($skinLight, 5%);
border-radius:0px 10px 10px 0px;
}
}
}
//SVG
.svg-wrapper {
position:absolute;
width:50%;
height:100%;
top:0;
left:50%;
background:$bg;
z-index:0;
}
#drinkingMan {
margin:24% auto;
display:block;
}
#chest-area {position:relative;}
.foot-shadow2{fill:#E29D85;}
.hand-shadow{fill:#E38C75;}
.nipple{fill:#E79A9A;}
.skinDark{fill:#E79E8A;}
.skin{fill:#E7AE9A;}
.hair-shadow{fill:#4E1C0C;}
.foot-shadow{fill:#EBA995;}
.skinShadow{fill:#EFBAAA;}
.pants-shadow{fill:#2E4A72;}
.hair{fill:#612410;}
.beer-foam{fill:#FFFFFF;}
.glasses{fill:#354E72;}
.bear-shadow{fill:#4E1C0C;stroke:#4E1C0C;}
.bear-hair{fill:#612410;stroke:#4E1C0C;}
.pants{fill:#3D5E8C;}
.beer{fill:url(#SVGID_1_);stroke:#F3D7BF;stroke-width:2;stroke-miterlimit:10;}
@keyframes arm {
0% {transform:rotate(55deg);margin-top:-65px;}
12% {transform:rotate(110deg); margin-top:-68px;}
30% {transform:rotate(110deg); margin-top:-68px;}
55% {transform:rotate(55deg);margin-top:-65px;}
}
@keyframes drink {
0% {transform:rotate(0deg);}
12% {
transform:rotate(-90deg);
margin-left:14px;
margin-top:70px;
}
20% {
transform:rotate(-105deg);
margin-left:14px;
margin-top:70px;
}
30% {
transform:rotate(-110deg);
margin-left:14px;
margin-top:70px;
}
55% {
transform:rotate(0deg);
margin-left:0px;
margin-top:60px;
}
}
@keyframes beer {
0% {transform:rotate(-40deg); margin-left:95px;}
20% {transform:rotate(3deg); margin-left:99px;}
30% {transform:rotate(3deg); margin-left:99px;}
50% {transform:rotate(-40deg); margin-left:95px;}
}
@keyframes move {
0% {transform:rotate(0deg);}
20% {transform:rotate(3deg);}
30% {transform:rotate(3deg);}
50% {transform:rotate(0deg);}
}
@keyframes hair {
0% { transform:translateX(0px);}
20% {transform:translateX(5px);}
30% {transform:translateX(5px);}
50% {transform:translateX(0px);}
}
@keyframes rightarm {
0% {transform:rotate(-15deg);}
20% {transform:rotate(-12deg);}
30% {transform:rotate(-12deg); }
50% {transform:rotate(-15deg);}
}
$(document).ready(function(){
var s = Snap('#drinkingMan');
var leftHand = s.select('#left-hand');
var beer = s.select('#beer');
var leftArm = s.select('#left-arm');
var rightArm = s.select('#right-arm');
var body = s.select('#body');
var head = s.select('#head');
var myMatrix = new Snap.Matrix();
myMatrix.rotate(55,0,0);
//myMatrix.translate(80,-130);
drink();
function drink() {
leftArm.stop().animate(
{transform:'r65,70,150'}
,800,
function(){
leftArm.animate(
{ transform: 'r70,70,150'},
800,
function(){
leftArm.animate(
{ transform: 'r0,70,150'},
800
);
}
);}
);
leftHand.stop().animate(
{transform:'r-110,13,185' },
800,
function(){
leftHand.animate(
{ transform: 'r-115,13,185'},
800,
function() {
leftHand.animate(
{ transform: 'r0,13,185'},
800);
}
);
}
);
body.animate(
{transform:'r3, 100,240'},
800,
function(){
body.animate(
{transform:'r3, 100,240'},
800,
function(){
body.animate(
{transform:'r0, 100,240'},
800
);
}
);
}
);
head.animate(
{transform:'r3, 100,240'},
800,
function(){
head.animate(
{transform:'r3, 100,240'},
800,
function(){
head.animate(
{transform:'r0, 100,240'},
800
);
}
);
}
);
rightArm.stop().animate(
{transform: 'r5, 180, 180'},
800,
function() {
rightArm.stop().animate(
{transform: 'r5, 180, 180'},
800,
function() {
rightArm.stop().animate(
{transform: 'r0, 180, 180'},
800
);
}
);
}
);
beer.stop().animate(
{transform:'r40,80,255' },
800,
function(){
beer.animate(
{ transform: 'r35,80,255'},
800,
function(){
beer.stop().animate(
{ transform: 'r0,80,255'},
800
);
}
);
}
);
}//end drink
setInterval(function(){ drink() }, 4500);
});