background animation in my portfolio site
I like the slogan - and often heard and sometimes told it, too:
"The first thought is the best thought (Der erste Gedanke ist der beste Gedanke)."
When I came to the decision to build my own portfolio site with Django, I also wanted to make it as responsive and feature rich as possible.
So my primary goal was to make it look simple but under the hood there shall be some shimmering features.
First thing was to define a background image.
And because a simple image was not eyecandy enough for my demands, I wanted to put some animation into it.
This animation tells the story about who I am and what feeling I'd like to transport to the viewer of my site.
Most decisions we make out of experience. So my experience told me to use SVG.js.
I created a quick test html file with embedded Javascript and voilá, it was quite impressive on the first run.
So I also wanted to check, if there are other technologies to animate a homepage. And I found SMIL and CSS animation, both are other - let's say strategies.
But they have limits:
- CSS lacks using paths in animations.
- SMIL is not supported by Microsoft's Edge or even Internet Explorer.
So, back to my first, already working thought - Javascript!
I had to fiddle around with DIV layers, because using CSS-Background would not work with animated SVG.
But templating with wagtail and django is quite easy to modify individually.
I've used The Gimp
- scissors tool to cut me out of the background
- layer tool to create me as new layer
- path tool to draw the path down from Goldeck to the foto spot
- to export the whole image as background with low colour profile
- and the "me"-layer in better quality
- the path tool can export a path as SVG, so this step was for SVG.js
Then with Inkscape I checked out the path and simplyfied it a bit.
Putting it all together with SVG.js's tutorial and examples is straight forward.
Compatibility with many browsers is okay, so my first animation with a simple background idea was realized.