Web Sites are Video Games Waiting to Happen

@opherv / TechToKnow Feb 2018

Adobe homepage, Oct 25th, 1996

Adobe homepage, feb 12th, 2018

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

@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

@opherv

Implementation: Matter.js

5. Interactive Video

Interactive Video

Interactive Video

Interactive video allows viewers to shape the story

@opherv

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