April 10, 2015

Face expression animation on tab change

Face expression animation on tab change

Make Hippie piss off and you will be in trouble. Just open the demo and change over your browser tab. Each time when you change over your browser tab Hippie changes his expression. Try em out!

This is done using Web Visibility API, CSS3, HTML5. Here CSS3 and JavaScript plays a vital role.

HTML

<body data-state="1">
  <div class="face">
    <div class="eye"></div>
    <div class="eye"></div>
  </div>
  <section class="bubble">
    <div class="pointy-thingy"></div>
  </section>
  <footer>Change browsertabs to piss off Hippie!</footer>
</body>

CSS

@import url('http://fonts.googleapis.com/css?family=Gloria+Hallelujah');

@charset "UTF-8";
@import url('http://fonts.googleapis.com/css?family=Gloria+Hallelujah');

@charset "UTF-8";
body {
  font-family: 'Gloria Hallelujah', cursive;
  line-height: 1.5em;
  transition: background 1s ease-in-out;
}

.face {
  position: relative;
  margin: 100px auto;
  width: 260px;
  height: 220px;
  background: radial-gradient(ellipse, #a0f5ff 0%, #3aeaff 95%);
  border-radius: 50%;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}
.face::after {
  content: '';
  position: absolute;
  background: #f9857c;
  transition: all 1s ease-in-out;
  width: 74.28571px;
  height: 44px;
  border-radius: 0 0 90px 90px;
  top: 157.14286px;
  left: 123.80952px;
}

.eye {
  position: absolute;
  width: 130px;
  height: 130px;
  background: #FFF;
  border-radius: 50%;
}
.eye::before {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transition: all 1s ease-in-out;
  background: #444;
  top: 56.52174px;
  left: 54.16667px;
}
.eye::after {
  content: '';
  position: absolute;
  background: #3aeaff;
  border-radius: 90px 90px 0 0;
  transition: all 1s ease-in-out;
  width: 98%;
  height: 40%;
  left: 1%;
}
.eye:nth-child(2) {
  left: 130px;
}

body[data-state='2'] .face::after {
  width: 70px;
  height: 10px;
  border-radius: 0 0 90px 90px;
  top: 170px;
  left: 140px;
  transform: rotate(-15deg);
}
body[data-state='2'] .eye::before {
  top: 90px;
  left: 30px;
}
body[data-state='2'] .eye::after {
  left: -4%;
  transform: rotate(-10deg);
}
body[data-state='2'] .eye:nth-child(2)::after {
  left: 6%;
  transform: rotate(10deg);
}

body[data-state='3'] .face::after {
  width: 40px;
  height: 10px;
  border-radius: 90px 90px;
  top: 170px;
  left: 140px;
}
body[data-state='3'] .eye::before {
  top: 55px;
  left: 50px;
}
body[data-state='3'] .eye::after {
  left: 0;
  height: 50%;
  width: 100%;
}

body[data-state='4'] .face::after {
  width: 70px;
  height: 20px;
  border-radius: 90px 90px 0 0;
  top: 170px;
  left: 140px;
  transform: rotate(-15deg);
}
body[data-state='4'] .eye::before {
  top: 60px;
  left: 50px;
}
body[data-state='4'] .eye::after {
  height: 50%;
  width: 100%;
  left: 4%;
  transform: rotate(10deg);
}
body[data-state='4'] .eye:nth-child(2)::after {
  left: -4%;
  transform: rotate(-10deg);
}

.bubble {
  position: relative;
  width: 90%;
  min-height: 170px;
  margin: 80px auto;
  background: #FFF;
  border-radius: 18px;
  padding: 1%;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
  word-wrap: break-word;
  font-size: 20px;
}
.bubble::before {
  content: "Hey, I'm Hippie. \A Welcome to my visible World! \A How nice of you to visit me!";
  white-space: pre;
  position: absolute;
  width: 92%;
  padding: 2%;
  transition: content 1s ease-in-out;
}
.bubble .pointy-thingy, .bubble::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 40px;
  background: #FFF;
  border-radius: 90px 90px 0 0;
  top: -40px;
  left: 60%;
}
.bubble::after {
  height: 60px;
  top: -60px;
  left: 58%;
  transition: background 1s ease-in-out;
}

body[data-state="2"] .bubble::before {
  content: "Oh, you left… \A Well, but you came back. \A Thought, you wouldn't…";
}

body[data-state="3"] .bubble::before {
  content: "Really, stop doing that! \A Such a pen window gets really boring all by myself!";
}

body[data-state="4"] .bubble::before {
  content: "Skrew you! \A I don't want you here anymore! \A Leave me and my window alone, you unaccountable ass!";
}

body[data-state='1'] {
  background: #c1ff7f;
}
body[data-state='1'] .bubble::after {
  background: #c1ff7f;
}

body[data-state='2'] {
  background: #faff7f;
}
body[data-state='2'] .bubble::after {
  background: #faff7f;
}

body[data-state='3'] {
  background: #ffc17f;
}
body[data-state='3'] .bubble::after {
  background: #ffc17f;
}

body[data-state='4'] {
  background: #f94a4a;
}
body[data-state='4'] .bubble::after {
  background: #f94a4a;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  color: #DDD;
  text-align: center;
  font-size: 20px;
}

JavaScript

var body    = document.body;
var counter = 0;

document.addEventListener('visibilitychange', function(){
  if(document.hidden) {
    if(counter < 3) {
      counter++;
    }
  }
  else {
    body.setAttribute('data-state', counter + 1);
  }
});

Note:

Change browser tabs again and again to see Hippie's reaction.

demo

No comments:

Post a Comment

Popular Posts

Views