[Tutorial #16] Home Page Part II

[Tutorial #16] Home Page Part II

Introduction

In last tutorial we explained the first home page partial template content-hero.php. Now we look at the second template, content-newpost.php .

As ModernBlackHand is a blogging site, a nice feature for home page is to show the newest posts. This is the main functionality for content-newpost.php .

We will defer the wordpress new posts code discussion in next tutorial. In this post we will focus on explaining the Parallax Image effect, as we use this technique throughout our wordpress site.

content-newpost.php Code

The file can also be found in my Github page.

Parallax Image (content-newpost.php line 5-11)

What is Parallax Effect?

In real world, the parallax effect is the change of 3D object’s perceived 2D positions relative to each other when the viewer moves. The farther objects move slower and the closer objects move faster.

We all experience parallax effect when we drive. When we drive for a short distant, the perceived objects closer to us (light poles, street signs) move faster, while objects far from us (distant skyscrappers, mountains) move slower.

The parallax effect is widely used in 2D game to create a 3D illusion in 2D. It is also used in websites to create a 3D illusion that texts are closer to the viewer and background images/videos are farther away.

Parallax Effect on Websites

When a user scrolls a website with parallax effect, the closer object (texts and image border)’s position will move normally — same as the scrolling speed. However the farther object (image)’s position will move slower.

Thus while the user scrolls the image position relative to the text and border changes slowly, giving an illusion that we are looking at the background image through a window.

Coding Elements for Parallax Effect

To create parallax effect, you need at least three things:

  1. Perceived close object: text and image border.
  2. Perceived far object: background image.
  3. Codes that change object’s relative positions when the user scrolls.

The main worker is #3 the codes. Since the codes must re-position the background image at real time, the parallax image is best done by JavaScript. Here is the JavaScript parallax segment used in ModernBlackHand. One can find it here on Github:

 

We will explain the JavaScript above in detail. The code uses a widely used JavaScript library called “jQuery”. It is highly recommended you take some time to study using jQuery as many JavaScript libraries are based on it.

line 4-11: JavaScript function definition

This defines a function “update()” that doesn’t take any parameters.

line 7: get the “window” object

The window object $(window) represents the website part that is currently displayed in the browser window. The code stores it into a local object $window.

The jQuery selector function $(keywords) selects HTML objects based on parameters keywords. This is the most used jQuery function, as one has to first select HTML objects in order to change their properties.

line 12: selecting HTML section object to apply parallax

This line does the following functions:

  1. $('section[data-type="background"]') is the selector function. The parameter tells jQuery to find <section> HTML tag that has the attribute data-type value set to "background". Compare content-newpost.php, line 5 we know that the JavaScript code will select that section.
  2. .each( function(){  means to apply the content of an anonymous function to each element on the left side of the dot.
  3. Together #1 and #2 do “select all HTML elements specified by the parameter, and apply following codes to each”.

line 14: var $bgobj = $(this);

This creates a local object that represents “this” HTML <section> object selected in line 12, by the jQuery selector function with parameter “this”.

line 15-26: determine background position

The goal is to determine the background image’s position via the user’s scrolling position. The user’s scrolling position (as h2 in line 23) can be represented by top position of current window.

We also need a reference point for user’s scrolling position to compare against. The section’s top position (as h1 in line 16) is naturally a good reference point as it contains the background image. For flexibility we add a bias to h1 for fine tuning (as h3 in line 20,22).

Thus we can set the background image position change as (h3-h2). To have different parallax speed we divide it by a speed factor vf, which (1) we specify it by attribute data-speed="2" in content-newpost.php line 5 (2) we get it by JavaScript code $bgobj.data('speed');in line 18.

Put together, we calculate the background image position as:

50% - (h3-h2)/vf 

in line 26. 50% means to vertically center the image position. We then set the position in line 28 via jQuery’s .css(...) function.

Parallax Text (line 8-10)

The parallax text is specified at content-newpost.php line 8-10, a simple header. 

Parallax Image CSS Style

The final step of using parallax effect is to properly specify the background image and its properties via CSS. In ModernBlackHand’s site we specify the styles via Advanced Custom Fields so we can change images directly in admin panel. A typical style setting is as follows:

Background style remarks:

  • Function “linear-gradient” in line 1 is to dim the image and making text stands out.
  • “background-size: cover” in line 4 makes the image span the whole <section> tag

To specify styles in ACF, use “Text Area” type with Formatting as “No Formatting”, as you don’t want your HTML tags altered.

WP custom field for styling

ACF field for parallax style. Choose “No Formatting” at Formatting tab.