the lucky cat

illustration & motion | parallax

The goal of this project was to use a camera and depth in After Effects to create a more immersive experience when scrolling through a website. When creating this design, I wanted to have floating pieces that would interact when the user is scrolling through the website. I did this by adding in gold coins that would spin as the user scrolls. The colour palette is simple but vibrant and it uses traditional Chinese colours. It was an interesting project because I had to consider how I wanted all the pieces to fit together as they appeared on screen.

style frame of the parallax website's banner
style frame of the parallax website's banner

The goal of this project was to use a camera and depth in After Effects to create a more immersive experience when scrolling through a website. When creating this design, I wanted to have floating pieces that would interact when the user is scrolling through the website. I did this by adding in gold coins that would spin as the user scrolls. The colour palette is simple but vibrant and it uses traditional Chinese colours. It was an interesting project because I had to consider how I wanted all the pieces to fit together as they appeared on screen.

process

sketch of the parallax website

sketch

First, I sketched out the website when I decided on the content. During the sketching, I planned out the various pieces that I wanted to animate such as the layers of coins.

sketch

First, I sketched out the website when I decided on the content. During the sketching, I planned out the various pieces that I wanted to animate such as the layers of coins.

parallax website built in illustrator

illustrate

Then I took it into illustrator. I used my sketch as a reference, but improved upon it. I added small things that I didn't think of during the sketch to give it more polish.

illustrate

Then I took it into illustrator. I used my sketch as a reference, but improved upon it. I added small things that I didn't think of during the sketch to give it more polish.

parallax website in After Effects

animate

Lastly, I imported it into After Effects. I already planned out all my layers and I had a rough idea for the depth so it was a quick process to position the layers and camera to different depths.

animate

Lastly, I imported it into After Effects. I already planned out all my layers and I had a rough idea for the depth so it was a quick process to position the layers and camera to different depths.

sketch of the parallax website

sketch

First, I sketched out the website when I decided on the content. During the sketching, I planned out the various pieces that I wanted to animate such as the layers of coins.

sketch

First, I sketched out the website when I decided on the content. During the sketching, I planned out the various pieces that I wanted to animate such as the layers of coins.

parallax website built in illustrator

illustrate

Then, I took it into illustrator. I used my sketch as a reference, but improved upon it. I added small things that I didn't think of during the sketch to give it more polish.

illustrate

Then, I took it into illustrator. I used my sketch as a reference, but improved upon it. I added small things that I didn't think of during the sketch to give it more polish.

parallax website in After Effects

animate

Lastly, I imported it into After Effects. I already planned out all my layers and I had a rough idea for the depth so it was a quick process to position the layers and camera to different depths.

animate

Lastly, I imported it into After Effects. I already planned out all my layers and I had a rough idea for the depth so it was a quick process to position the layers and camera to different depths.