Web Sites are Video Games Waiting to Happen

@opherv / JS-IL Apr 2017

Adobe homepage, Oct 25th, 1996

Adobe homepage, Apr 24th, 2017

Juice?

"Juice is typically auditory or visual... it's about maximum output for minimum input."

-Martin Jonasson and Petri Purho

Juice

Hi! I'm Opher

I'm a creative developer at Eko

5 New ways to juice up your site

@opherv

Starting from somewhere

http://startbootstrap.com/template-overviews/creative/

@opherv

1. Ambient Animations

Ambient animations make the experience feel dynamic

@opherv

Implementation: HTML5 Video

<video muted autoplay loop">
    <source src="video/ambientAnimation.mp4">
</video>

@opherv

2. Particles

Particles add a sense of magic and mystery

They are an efficient solution to create atmosphere without spending too much time doing animations

@opherv

Implementation: Proton

3. Camera Movement

Camera movement adds realism and drama to user actions

It can help convey meaningful actions, or serve as a reward for user action

@opherv

Implementation: CSS Animation/GSAP

@keyframes shake{
    0% {  transform: translateX(0) translateY(0); }
    10% { transform: translateX(6px) translateY(100px); }
    25% { transform: translateX(-7px) translateY(-50px); }
    45% { transform: translateX(4px) translateY(50px); }
    60% { transform: translateX(-2px) translateY(-10px); }
    75% { transform: translateX(0px) translateY(5px); }
    85% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(0) translateY(0); }
}

@opherv

4. Physics

Website examples:

WRK

Swiss Army Man

@opherv

Physics add a sense of fun and excitement

It's a system that is familiar from real life,

but at the same leads to unexpected surprising results

It lets users experiment

@opherv

Implementation: Matter.js