Replicate the Netflix Screensaver: Multi-Layer Animation

Posted by Stephanie O'Gay Garcia on 25 Oct, 2018

I love Netflix's new screensaver. If you leave your Netflix on for a bit you'll see it start to advertise shows in a cool multi-layer animation. Here's a quick video of some that popped up on my TV yesterday evening.

 

From what I can see there are usually about three layers: a static background layer and two layers in front that slowly move in different directions.

This got me thinking that it's a pretty neat effect to add to your website and relatively easy to do with CSS animation and keyframes and so here's my attempt at replicating it:

 

See the Pen Netflix Screensaver Inspired Background Image Animation by Stephanie O'Gay Garcia (@stephanieogaygarcia) on CodePen.

 

I went for a festive theme since I think it would make for a great effect for Christmas and holiday marketing! 

 

How to Create Your Own

Clicking on the above preview will bring you to CodePen where you can view the HTML, CSS and JavaScript that I used that you can add to your own site.

I've also created a HubSpot version that lets you quickly add new layers without having to go into the code at all. I hope to have this available on the HubSpot Marketplace soon! Here's a quick preview of how it works:

 

HubSpot Multi-Layered Animation1/ Click on "Add" to add a new layer

 

HubSpot Multi-Layered Animation

2/ Choose the image, set how far you would like it to go in percentage of the image (distance) and how long you would like it to take to get to that point in seconds (duration)

 

For those curious as to how it's set up, the module uses three fields (an Image field sog_background_image, a Number field sog_transition_duration and a Number field sog_distance) which are grouped into a repeater Field Group sog_layer as you can see in the right-hand sidebar below:

HubSpot Multi-Layer Animation Custom Module

And the code used in each of the fields is as follows: 

HTML + HubL


{# Calculate height (img-height/img-width*container-width) #}
{% set container_height = ((module.sog_layer[0].sog_background_image.height
/ module.sog_layer[0].sog_background_image.width)
* 100) %}

{% require_css %}
<style>
.sog_animation-layer {
padding-top: {{ container_height }}% !important;
}
{% for item in module.sog_layer %}
.layer-{{ loop.index }} {
-webkit-animation-name: move-layer-{{ loop.index }}; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: {{ item.sog_transition_duration }}s; /* Safari 4.0 - 8.0 */
animation-name: move-layer-{{ loop.index }};
animation-duration: {{ item.sog_transition_duration }}s;
animation-iteration-count: infinite;
}
@-webkit-keyframes move-layer-{{ loop.index }} {
0% { transform: translateX(0); }
50% { transform: translateX({{ item.sog_distance }}%); }
100% { transform: translateX(0); }
}
@keyframes move-layer-{{ loop.index }} {
0% { transform: translateX(0); }
50% { transform: translateX({{ item.sog_distance }}%); }
100% { transform: translateX(0); }
}
{% endfor %}
</style>
{% end_require_css %}

<div class="sog_animation-container">
{% for item in module.sog_layer %}
<div class="sog_animation-layer layer-{{ loop.index }}" style="background-image: url({{ item.sog_background_image.src }});"></div>
{% endfor %}
</div>

 

CSS


.sog_animation-container {
position: relative;
overflow: hidden;
}
.sog_animation-layer {
width: 100%;
position: absolute;
background-size: contain;
background-position: top center;
background-repeat: no-repeat;
height: 0;
}

 

JavaScript


// Sets the container height
$(window).resize(function() {
var $height = $(".sog_animation-layer").css("padding-top");
$(".sog_animation-container").css("height", $height);
}).resize();

 

If you're familiar with HubSpot Custom Modules, you should be able to use the above to recreate the module on your own portal.

The module can be dragged into any template in any column size: it's fully responsive and should adapt to the content around it (I used some cool tricks to make sure that's the case!). You can view a demo of the module on a HubSpot page here

If you have any questions on the module, let me know in the comments or get in touch.

Tags: christmas, custom-module, marketplace, parallax


Comments

Do you have a question, feedback or comments? Join the conversation!