And, as it can be seen in the image, each fur has a different gradient effect, that was also replicated in the CSS file. Later I've created each little piece of the gradient into HTML helpers elements, this pieces was named as a 'fur', each one being a single 'span' tag. Using photoshop I've made this brush effect: To do this, we have to build an 'irregular' gradient effect.
In order to clone this effect, we must acknowledge that a paintbrush doesn't have an uniform tip, some brush tips are made of nylon and polyester. The fading effect has a clear similarity to a paintbrush "unpainting" the letter. The third part is the camera movement applied while the lights are going away - but that is the easiest part. The animation is composed by three main steps, the first one is when the letter is fading each one of its sides, until it came to the second part, that is mainly composed by lots of vertical 'lights' with different widths and colors that emerge from the last side of the letter while it's also fading away. Now it's time to focus on the animation part. That being said, considering that in the container div we have an attribute named 'letter', I've used the image we export in the previous step, and it placed exactly where the helper divs should be for each value in the 'letter' attribute, wich supports all letters from the 'NETFLIX' name.
In the HTML, I've created a container with 4 subdivs named helpers, each helper is designated to be a 'side' of the animated letter, for example, animating the N letter, 3 helpers are going to be used, because the N is divided in 3 individual parts, like this 👉 I\I
Recently I've cloned the Netflix's intro animation using only CSS and I got some great feedback about it, so I thought it would be great to share a bit about the development process of the animation step-by-step.įirst I mapped the letters in Netflix's logo, and separated they so I could use it as a base reference for positioning the HTML elements later.
0 kommentar(er)
