Web - [Tutorial #16] Home Page Part II

Contents

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

What is Parallax Effect?
Parallax Effect on Websites
Coding Elements for Parallax Effect

line 4-11: JavaScript function definition
line 7: get the “window” object
line 12: selecting HTML section object to apply parallax
line 14: var $bgobj = $(this);
line 15-26: determine background position

Parallax Text (line 8-10)
Parallax Image CSS Style

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.

<?php   //Advanced Custom Fields. Required: Advanced Custom Fields Plugin
$latest_bg_style   = get_field('latest_bg_style');
$latest_posts_section_title = get_field('latest_posts_section_title');
?>
<section id="new-posts-head" class="topic-image parallax-bg" data-type="background" data-speed="2" style="<?php echo $latest_bg_style ?>"
>
  <div class="topic-text">
        <h1><?php echo $latest_posts_section_title; ?></h1>
  </div> <!-- project-head -->
</section>



<section id="new-posts">
	<div class="container">
		<!-- only show this section if there is at least one post -->
		<?php $loop = new WP_Query( array( 'post_type' => 'post', 'orderby' => 'post_id', 'order' => 'DSC' ) ); ?>
		<?php if ( $loop->have_posts() ) : ?>

			<?php $count = 0 ?>
			<?php while ( $loop->have_posts() && $count < 3  ) : $loop->the_post(); ?>
				<div class="row newpost-list">
					<a href="<?php echo esc_url(get_permalink()); ?>"	
						<span class="link-spanner"></span>
					</a>
					<h3>
					<div class="col-sm-3">
						<!-- category  -->
						<?php
							$cats= get_the_category();
							echo $cats[0] ->cat_name; 
						?>
					</div>
					<div class="col-sm-3">
						<?php echo get_the_date(); ?>	
						
					</div>	
					<div class="col-sm-6">
	
						<?php /*the_title( sprintf( '<a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a>' ); */ ?>
						<?php the_title(); ?>						
					</div><!-- column 4--> 
					</h3>
				</div> <!-- row -->

			<?php  $count = $count + 1; ?>  
			<?php endwhile; ?>
			<?php wp_reset_query(); ?>

			
		<?php endif; ?>	

        </div><!-- container -->

</section>

<?php //Advanced Custom Fields. Required: Advanced Custom Fields Plugin

$latest_bg_style = get_field('latest_bg_style');

$latest_posts_section_title = get_field('latest_posts_section_title');

<section id="new-posts-head" class="topic-image parallax-bg" data-type="background" data-speed="2" style="<?php echo $latest_bg_style ?>"

</div>

</section>

<?php $loop = new WP_Query( array( 'post_type' => 'post', 'orderby' => 'post_id', 'order' => 'DSC' ) ); ?>

<?php if ( $loop->have_posts() ) : ?>

<?php $count = 0 ?>

<?php while ( $loop->have_posts() && $count < 3 ) : $loop->the_post(); ?>

<a href="<?php echo esc_url(get_permalink()); ?>"

</a>

<h3>

<?php

$cats= get_the_category();

echo $cats[0] ->cat_name;

</div>

<?php echo get_the_date(); ?>

</div>

<?php /*the_title( sprintf( '<a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a>' ); */ ?>

<?php the_title(); ?>

</div>

</h3>

</div>

<?php $count = $count + 1; ?>

<?php endwhile; ?>

<?php wp_reset_query(); ?>

<?php endif; ?>

</div>

</section>

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:

Perceived close object: text and image border.
Perceived far object: background image.
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:

///////////////////////
//Parallax image
////////////////////////
function update(){ 
	
	// Cache the window object
	var $window = $(window);
	
	// Parallax background effect
	// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
	
	$('section[data-type="background"]').each(function() {
		
		var $bgobj = $(this); // assigning the object
		//absolute section top position
		var h1 = $bgobj.offset().top;
		//speed factor
		var vf = $bgobj.data('speed');
		//correction for bootsrap header tab
		var bias = 50;

		var h3 = h1 - bias 	
		var h2 = $window.scrollTop();	
		var yPos = -(h3-h2)/(vf); 
		// Put together our final background position
		var coords = '50% '+ yPos + 'px' ;
		// Move the background
		$bgobj.css({ backgroundPosition: coords });
			
		
				
	});
	
};

$(window).bind('scroll', update);
update();

///////////////////////

//Parallax image

////////////////////////

function update(){

// Cache the window object

var $window = $(window);

// Parallax background effect

// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

$('section[data-type="background"]').each(function() {

var $bgobj = $(this); // assigning the object

//absolute section top position

var h1 = $bgobj.offset().top;

//speed factor

var vf = $bgobj.data('speed');

//correction for bootsrap header tab

var bias = 50;

var h3 = h1 - bias

var h2 = $window.scrollTop();

var yPos = -(h3-h2)/(vf);

// Put together our final background position

var coords = '50% '+ yPos + 'px' ;

// Move the background

$bgobj.css({ backgroundPosition: coords });

});

};

$(window).bind('scroll', update);

update();

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:

$('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.
.each( function(){ means to apply the content of an anonymous function to each element on the left side of the dot.
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: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url('/wp-content/themes/pharmacate/assets/img/wp_footer.jpg');
background-repeat: repeat;
background-position: center 0px;
background-size: cover;

background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url('/wp-content/themes/pharmacate/assets/img/wp_footer.jpg');

background-repeat: repeat;

background-position: center 0px;

background-size: cover;

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.

[Tutorial #16] Home Page Part II