Loading ...

Responses by Marco Sors.

Design core: The style of the site evokes the dawn of the programming era, the ’70s. Considering that my solo consultant firm has got more than ten years under its belt, I wanted to merge a message of “seniority” and experience with one of technological awareness, represented by the latest front-end techniques used in the development of the site. The purpose felt somehow similar to what Netflix did in Black Mirror's episode “Bandersnatch” with its retro-gaming aesthetics from the ’80s and an experimental narrative engine.

Favorite details: The pictures. I found them on Flickr Commons under the Creative Commons license, and I think they are solid gold. Flickr Commons is full of valuable photos; you can explore it to time travel with your laptop.

Challenges: Combining one parallax with three canvases, many images, a lot of APNGs and 2-D transitions was very challenging. After minification, concatenation, optimization and compression, I was able to reach the desired result with the right scroll fluidity.

I learned that CSS filters don't still play well with every browser. For example, applying the sepia filter to all images caused severe performance issues in Firefox.

Technology: The principal technologies used are HTML5, CSS3 and JavaScript. JavaScript provides the smooth scrolling and the support for parallax effect, toggling classes and triggering event listeners when elements are in the viewport.

Anything else? The combination of CSS masks, APNGs and CSS transforms used to animate elements inside the pictures. Each picture element is composed of five layers: the background color, the image, two animated PNGs, the CSS Mask and the tooltip layer.

web-expert.it

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In