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

Starting from somewhere

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

1. Ambient Animations

Ambient animations make the experience feel dynamic

Implementation: HTML5 Video

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

2. Particles

Particles add a sense of magic and mystery

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

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); }
}

4. Physics

Physics add a sense of fun and excitement

Implementation: Matter.js

5. Interactive Video

Interactive Storytelling

Interactive video allows viewers to shape the story

Interactive Video

$('button.tell_lie').addEventListener('click', () => {
    /* Viewer chose to lie - There will be consequences! */
    player.append('TheDarkSide');
});
    
$('button.tell_truth').addEventListener('click', () => {
    /* Viewer chose the truth - Was it worth it? */
    player.append('TheLightSide');
});

Implementation: developer.helloeko.com

What is this good for?

With great power come great Clichés 

Thanks!

@OpherV

opherv.com

opherv@gmail.com

github.com/opherv