Communication through the Ages: A Parallax Scrolling Website

Introducing the Evolution of Communication

Inspired by Atlassian's info-graphic poster, designer Jiaxin Yu presents a unique parallax scrolling website that takes viewers on a journey through the ages of communication.

This parallax scrolling website, created by Jiaxin Yu, showcases the evolution of communication in a visually captivating and interactive way. Each age is depicted in a color illustration, with changing backgrounds and costumes, while the male characters remain fixed. The parallax scrolling technique allows for a seamless transition between the different ages, highlighting the gradual changes over time.

What sets this design apart is its ability to engage viewers and prompt them to think about the future of communication. The last illustration, featuring a large question mark, sparks curiosity and invites contemplation.

Jiaxin Yu brought this design to life by first creating the visuals in Photoshop and then building the parallax scrolling website using HTML, CSS, and JavaScript. The result is a visually stunning and interactive experience that captivates and educates.

The website's flow is similar to that of a book, with front matter (the first title page and introduction pages), body matter (the ten content pages), and back matter (the ending page and social network promotion). As viewers scroll through the website, they are guided through the story based on the timeline of communication.

This project, which started in January 2014 and was completed in May 2014 in New York, was exhibited at the Manhattan Center. Throughout the design process, Jiaxin Yu faced challenges, particularly in implementing the multiple parallax scrolling technique to effectively tell the story with a timeline. However, through research, testing, and debugging, these challenges were overcome, resulting in a seamless and engaging user experience.

This innovative parallax scrolling website has received recognition for its excellence and innovation. It was awarded the Silver A' Design Award in the Website and Web Design category in 2015. This prestigious award is given to designs that demonstrate outstanding expertise, creativity, and technical characteristics. Jiaxin Yu's design not only showcases remarkable artistic skill but also evokes positive emotions and a sense of wonder.


Project Details and Credits

Project Designers: Jiaxin Yu
Image Credits: Jiaxin Yu
Project Team Members: Jiaxin Yu
Project Name: communication through the ages
Project Client: Jiaxin Yu


communication through the ages IMG #2
communication through the ages IMG #3
communication through the ages IMG #4
communication through the ages IMG #5
communication through the ages IMG #5

Read More on Design Radiant