Rob O'Leary

Posts tagged with “CSS animation“ (7)

  1. The title card for the TV Series Arrested Development. The title is broken up on 2 lines. The first word is in red in lower case. The second word is in black and is in uppercase. The title is encircled by a red marked line.

    How to make a slick CSS animation from Arrested Development

    The title sequence of Arrested Development complements the kooky nature of the show well. Let’s see how we can recreate it in CSS.

  2. The title card for the movie The Fall Guy. The title text is in a bold, yellow serif font. The letter 'A' has the counter (open area) filled in. In its place is a silhouette of a falling man.

    How to create a slick CSS animation from The Fall Guy

    The title sequence for The Fall Guy involves an animation of a man falling - a very literal depiction of the title! Let’s see how we can make it with CSS.

  3. A frame from the title sequence of the movie Alien. It shows a distant planet with a brackish eclipse. Some disjointed bits of letters are overlaid along the top of the frame.

    How to create a slick CSS animation from Alien

    The title sequence for Alien is iconic. It sets the mood of the movie perfectly. Let’s see how we can recreate it as a web animation!

  4. My recreation of the title card of the movie Cocktail. It is a glowing neon bar sign. It has the word 'Cocktail' in bright blue with a pink circle in the rear.

    How to create a slick CSS animation from Cocktail

    Let’s jump to the 80’s and create an animation with a retro feel. Cocktail!

  5. The title card of the movie Jackie Brown. The words 'Jackie Brown' are set in a 1970s stylized font. The fill color of the text is yellow with a thick brown drop shadow emphasizing the character shapes. In the background is an airport scene with the central character. Jackie standing on a travelator (moving walkway) with a mosiac tile wall passing behind her.

    How to create a slick CSS animation from Jackie Brown

    The title sequence for Jackie Brown is simple but has some 70’s flair. Let’s recreate the reveal animation of the title card.

  6. The title card for The Marvelous Mrs Maisel in the midst of animation. The animation is like a curtain being pulled across. The effect changes the background color and the text color as it shifts from right to left.

    How to create a slick CSS animation from The Marvelous Mrs Maisel

    This time, I will animate a title sequence from The Marvelous Mrs. Maisel from Episode 2 of Season 4. It has a cool kind of curtain swipe affect.

  7. A vector image of a train riding through a mountaineous countryside at sunset with everything gilded.

    How to make an awesome horizontal parallax animation

    The parallax effect creates a perception of depth. I’m going to deconstruct how you create the parallax effect with a visual, interactive example.