From ac3e91927fb1ff1e673838d6c9757f9f014fde04 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 11 Feb 2016 16:45:32 +0100 Subject: [PATCH] make Wrigely wink reliably and do more stuff, fixes #50 --- _src/_assets/javascripts/page-community.js | 44 +++++++++++++--- _src/_assets/styles/_page-community.scss | 44 ++++++++++++++-- _src/_includes/svg/wrigely-with-stage.svg | 61 ++++++++++++---------- 3 files changed, 110 insertions(+), 39 deletions(-) diff --git a/_src/_assets/javascripts/page-community.js b/_src/_assets/javascripts/page-community.js index a910259..4c634af 100644 --- a/_src/_assets/javascripts/page-community.js +++ b/_src/_assets/javascripts/page-community.js @@ -3,13 +3,45 @@ jQuery(function($) { - // start wrigely animation when in viewport - var wrigely = $('#wrigely'); + var wrigely = $('#wrigely'), + wrigelyArm = wrigely.find('#arm'), + wrigelyHead = wrigely.find('#head'), + wrigelyEye = wrigely.find('#eye'); - if (wrigely.isInViewport() ) { - wrigely.addClass('is-ready'); - } else { - wrigely.removeClass('is-ready'); + var wrigelyAnimationStart = function() { + + // set utility classes + if (wrigely.is( ':in-viewport( -180 )' ) ) { + wrigely.addClass('is-ready'); + + // toggle paused class so the :hover interaction can fire animation again + wrigelyArm.on('animationend webkitAnimationEnd oAnimationEnd', function(e) { + wrigelyArm.addClass('paused'); + wrigelyHead.addClass('paused'); + + wrigely.on('mouseover', function() { + wrigelyArm.removeClass('paused'); + wrigelyHead.removeClass('paused'); + }); + + // fire eye blinking once other animations have finished + wrigelyEye.addClass('is-ready'); + + wrigelyEye.on('animationend webkitAnimationEnd oAnimationEnd', function(e) { + wrigelyEye.removeClass('is-ready'); + }); + } + ); + } else { + wrigely.removeClass('is-ready').removeClass('paused'); + wrigelyArm.removeClass('paused'); + wrigelyHead.removeClass('paused'); + wrigelyEye.removeClass('is-ready').removeClass('paused'); + } } + // fire all the viewport things + wrigelyAnimationStart(); + $(window).on('load resize scroll', wrigelyAnimationStart); + }); diff --git a/_src/_assets/styles/_page-community.scss b/_src/_assets/styles/_page-community.scss index 547f33a..bc99503 100644 --- a/_src/_assets/styles/_page-community.scss +++ b/_src/_assets/styles/_page-community.scss @@ -86,16 +86,40 @@ #arm { transform-origin: right; } + #head { + transform-origin: center; + } + #eye { + transform-origin: center; + } + #arm, + #head, + #eye { + animation: none; + } + + &:hover, &.is-ready { + #arm, + #head, + #eye { + &.paused { animation: none; } + } #arm { - animation: wrigely-wink 1s ease-in-out 3s; + animation: wrigely-wink 1s ease-in-out; + } + #head { + animation: wrigely-head-nod 1s ease-in-out; + } + #eye { + &.is-ready { + animation: wrigely-blink .3s ease-in-out forwards; + animation-iteration-count: 2; + } } } - &:hover #arm { - animation: wrigely-wink 1s ease-in-out; - } } @keyframes wrigely-wink { @@ -103,3 +127,15 @@ 25%, 50% { transform: rotate(-20deg); } 30%, 100% { transform: rotate(0); } } + +@keyframes wrigely-head-nod { + 0% { transform: rotate(0); } + 25%, 50% { transform: rotate(-2deg); } + 30%, 100% { transform: rotate(0); } +} + +@keyframes wrigely-blink { + 0% { transform: scaleY(1); } + 50% { transform: scaleY(0); } + 100% { transform: scaleY(1); } +} diff --git a/_src/_includes/svg/wrigely-with-stage.svg b/_src/_includes/svg/wrigely-with-stage.svg index 39aba56..91b6a24 100644 --- a/_src/_includes/svg/wrigely-with-stage.svg +++ b/_src/_includes/svg/wrigely-with-stage.svg @@ -1,4 +1,4 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + +