Final project – Sweeping the web

I wish to create a small illustrated gif animation of a man sweeps across the screen (I’m an illustrator β˜πŸΌ) – which sweeps away the page content.

A poetic b & w animative chrome extension ☾☁︎

Steps that I can tackle separately:
1. Understanding how to erase each word separately
2. Matching the position of the animation with the position of the word
3. Creating the animation, understanding the rhythm and aesthetic…


What do you think?

– H.

#1 D u s t Bookmarklet

Since I had an Unexpected Character & my code is simple, here it is.
I think I understand the relationship between HTML, CSS, and JS now (which is a huge step for me).

⚑
 

var style = document.createElement(‘style’);
style.type = ‘text/css’;

style.textContent = `

body:hover {
animation-name: space;
animation-duration: 8s;
animation-iteration-count: infinite;
}

@keyframes space {
from {letter-spacing: 0em;
color: absolute;
font-size: absolute;
}

to {letter-spacing: -10em;
color: white;
font-size: 0px;}
} `;
document.head.appendChild(style);

 
+ Here is my CodePen

 

– H.