In this web redesign project, the client requested that I update their site with a fresh, new look and a parallax scroll effect on the home page. Parallax creates a 3D viewer experience. The use of movement gives the illusion of depth and space. As this would be my first parallax design, I relished the opportunity to learn more about it.
Brainstorming Phase
Brainstorming for me is a process of taking notes and drawing thumbnails while researching. For this redesign, I spent several hours perusing the web. As I explored, I found sooo many cool possibilities! I collected ideas and inspirations on Pinterest: check out my “Web design & tools” board.
The real world provided ample ideas, too. If you move through the day open to possibilities, you will find them! Since this client is a general contractor, I was hoping to use colors and textures often encountered in their outdoor projects. During my daily walks, I took pictures of pebbles, gravel, dirt, stone walls, concrete blocks, and plastic, orange fencing. Some of these were incorporated in the web redesign.
Design and Prototyping Phase
The background image remains static in my proposals. Other content moves over the background, as the user scrolls down to other sections on the page. I wanted my client to be able to see the parallax scroll in action. So, I exported my Photoshop designs to Adobe XD and constructed the prototype there. This was my first time using Adobe XD, and there was a learning curve for sure. It was well worth the time and total fun!
I sent file links to the client for them to view the 2 prototype options. With a simple click, the client was able to activate the parallax scroll. They could also see hover effects on hyperlinks and dropdown menus. It didn’t take long for a decision!
There are clear advantages to using Adobe XD, especially if you want to show movement or animation. The prototype is a pretty accurate model of the actual live site, as you can see in the following short video:
Web Development Phase
I built the site with the Bootstrap framework on a subdomain. The original site had also been done with Bootstrap, but things had certainly changed in the 5 years since we coded it. Leapfrogging from version 3.3.6 to version 5.2 was quite dramatic. Among the significant differences are several new options and features, including variables (yes!), additional grid tiers, flexbox, and new responsive breakpoints. It was a LOT to take in, and a great opportunity to learn new code.
There are two parallax sections on the home page: header and jumbotron. You can examine the code with developer tools in the browser. One key aspect to a parallax effect: the background image must be “fixed”. In addition, I used a minimum height for each of the parallax images. Here’s the code for the header section:
CSS
.parallax-header1 {
background-image: url(../images/images-home/2022-tford-home-DJI_0092-1600.jpg);
min-height: 968px;
background-attachment: fixed;
background-position: center -30px;
background-repeat: no-repeat;
background-size: cover;
}HTML
Site Launch
Prior to launching, I tested the new site and took care of mobile-responsiveness with media queries. I always backup everything: live and new sites. Then I archive the current site in case we need to retrieve anything or refer back to it. Once all of the prep work is done, the new site files are uploaded to the server and the cache is cleared. One more test and we’ve got the new site live for the world to see!
Leave a Reply