Add Smooth Scrolling Effect For All Home Widget Areas On Parallax PRO Theme

Original request from @Josephine Reijman:

Hi, I would like to scroll from one home widget area to the next one (pressing a fontawesome icon) like this tutorial explained: http://keypresswp.com/all-home-widgets-scrolling-centric-pro/
However I am using the Parallax Pro theme now.

Is there anyone who can help me with this?

Thanks,
Josephine

I accomplished this following way:

STEP 1: First download two JS files “jquery.localScroll.min.js” and “jquery.scrollTo.min.js” from Ariel Flesler’s site and upload in js folder.

NOTE: If you have Centric PRO theme then you can easily get these two JS files from there.

STEP 2: Now enqueuing these two js from front-page.php file

function parallax_enqueue_parallax_script() {

			if ( ! wp_is_mobile() ) {

				wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );

			}
      
      wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
      wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );
}

STEP 3: Modifying the home page widgets markup and putting the arrow. See the updated home page widget markup here:

//* Add markup for homepage widgets
function parallax_homepage_widgets() {

	genesis_widget_area( 'home-section-1', array(
		'before' => '<div class="home-odd home-section-1 widget-area"><div class="wrap">',
		'after'  => '<p class="arrow"><a href="#home-section-2"></a></p></div></div>',
	) );

	genesis_widget_area( 'home-section-2', array(
		'before' => '<div class="home-even home-section-2 widget-area" id="home-section-2"><div class="wrap">',
		'after'  => '<p class="arrow"><a href="#home-section-3"></a></p></div></div>',
	) );

	genesis_widget_area( 'home-section-3', array(
		'before' => '<div class="home-odd home-section-3 widget-area" id="home-section-3"><div class="wrap">',
		'after'  => '<p class="arrow"><a href="#home-section-4"></a></p></div></div>',
	) );

	genesis_widget_area( 'home-section-4', array(
		'before' => '<div class="home-even home-section-4 widget-area" id="home-section-4"><div class="wrap">',
		'after'  => '<p class="arrow"><a href="#home-section-5"></a></p></div></div>',
	) );

	genesis_widget_area( 'home-section-5', array(
		'before' => '<div class="home-odd home-section-5 widget-area" id="home-section-5"><div class="wrap">',
		'after'  => '</div></div>',
	) );

}

If you look the code thoroughly, you will see that I added some IDs in HTML markup like home-section-2, home-section-3, home-section-4, home-section-5 and p TAG inside the wrap.

Now sharing the fully updated code of front-page.php file here:

<?php
/**
 * This file adds the Home Page to the Parallax Pro Theme.
 *
 * @author StudioPress
 * @package Parallax
 * @subpackage Customizations
 */

add_action( 'genesis_meta', 'parallax_home_genesis_meta' );
/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 */
function parallax_home_genesis_meta() {

	if ( is_active_sidebar( 'home-section-1' ) || is_active_sidebar( 'home-section-2' ) || is_active_sidebar( 'home-section-3' ) || is_active_sidebar( 'home-section-4' ) || is_active_sidebar( 'home-section-5' ) ) {

		//* Enqueue parallax script
		add_action( 'wp_enqueue_scripts', 'parallax_enqueue_parallax_script' );
		function parallax_enqueue_parallax_script() {

			if ( ! wp_is_mobile() ) {

				wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );

			}
      
      wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
		  wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );
		}

		//* Add parallax-home body class
		add_filter( 'body_class', 'parallax_body_class' );
		function parallax_body_class( $classes ) {
		
   			$classes[] = 'parallax-home';
  			return $classes;
  			
		}

		//* Force full width content layout
		add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

		//* Remove primary navigation
		remove_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_nav' );

		//* Remove breadcrumbs
		remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs');

		//* Remove the default Genesis loop
		remove_action( 'genesis_loop', 'genesis_do_loop' );

		//* Add homepage widgets
		add_action( 'genesis_loop', 'parallax_homepage_widgets' );

	}
}

//* Add markup for homepage widgets
function parallax_homepage_widgets() {

	genesis_widget_area( 'home-section-1', array(
		'before' => '<div class="home-odd home-section-1 widget-area"><div class="wrap">',
		'after'  => '<p class="arrow"><a href="#home-section-2"></a></p></div></div>',
	) );

	genesis_widget_area( 'home-section-2', array(
		'before' => '<div class="home-even home-section-2 widget-area" id="home-section-2"><div class="wrap">',
		'after'  => '<p class="arrow"><a href="#home-section-3"></a></p></div></div>',
	) );

	genesis_widget_area( 'home-section-3', array(
		'before' => '<div class="home-odd home-section-3 widget-area" id="home-section-3"><div class="wrap">',
		'after'  => '<p class="arrow"><a href="#home-section-4"></a></p></div></div>',
	) );

	genesis_widget_area( 'home-section-4', array(
		'before' => '<div class="home-even home-section-4 widget-area" id="home-section-4"><div class="wrap">',
		'after'  => '<p class="arrow"><a href="#home-section-5"></a></p></div></div>',
	) );

	genesis_widget_area( 'home-section-5', array(
		'before' => '<div class="home-odd home-section-5 widget-area" id="home-section-5"><div class="wrap">',
		'after'  => '</div></div>',
	) );

}

genesis();

STEP 4: Generating the down arrow. Child theme is already loading the Dashicons. So using this Dashicons font for down arrow. Add the following css in your style.css file:

.arrow, .up-arrow {
	margin: 0;
	text-align: center;
	width: 100%;
}

.arrow a, .up-arrow a {
	background: #fff;
  background: rgba(0,0,0,.65);
	border-radius: 30px;
	display: inline-block;
	padding: 13px 10px 0px;
	text-align: center;
	line-height: 1;
}

.arrow a:before {
	-webkit-font-smoothing: antialiased;
	color: #dedede;
	content: "\f347";
	font: normal 40px/1 'dashicons';
	height: 40px;
	width: 40px;
}

.up-arrow a:before {
	-webkit-font-smoothing: antialiased;
	color: #dedede;
	content: "\f343";
	font: normal 40px/1 'dashicons';
	height: 40px;
	width: 40px;
}

STEP 5: This is the last step. Add the following 3 lines in parallax.js file. Here is the full code:

jQuery(function( $ ){

	// Enable parallax and fade effects on homepage sections
	$(window).scroll(function(){

		scrolltop = $(window).scrollTop()
		scrollwindow = scrolltop + $(window).height();

		$(".home-section-1").css("backgroundPosition", "0px " + -(scrolltop/6) + "px");

		if( scrollwindow > $(".home-section-3").offset().top ) {

			// Enable parallax effect
			backgroundscroll = scrollwindow - $(".home-section-3").offset().top;
			$(".home-section-3").css("backgroundPosition", "0px " + -(backgroundscroll/6) + "px");

		}

		if( scrollwindow > $(".home-section-5").offset().top ) {

			// Enable parallax effect
			backgroundscroll = scrollwindow - $(".home-section-5").offset().top;
			$(".home-section-5").css("backgroundPosition", "0px " + -(backgroundscroll/6) + "px");

		}

	});

  /* THIS IS THE NEW JS CODE WHICH IS USING FOR SMOOTH SCROLLING EFFECT  */
  $.localScroll({
  	duration: 750
  });

});

How To Add Up Arrow in Home Section 5

Edit the following code of front-page.php file:

genesis_widget_area( 'home-section-5', array(
		'before' => '<div class="home-odd home-section-5 widget-area" id="home-section-5"><div class="wrap">',
		'after'  => '</div></div>',
	) );

BY

genesis_widget_area( 'home-section-5', array(
		'before' => '<div class="home-odd home-section-5 widget-area" id="home-section-5"><div class="wrap">',
		'after'  => '<p class="up-arrow"><a href="#site-container"></a></p></div></div>',
	) );

Now add this extra new code above the genesis(); function

add_filter('genesis_attr_site-container', 'gd_add_id_in_site_container');
function gd_add_id_in_site_container( $attributes ){
   $attributes['id'] = 'site-container';
   
   return $attributes; 
}

Copy the modified CSS from STEP 4 section.

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

14 Discussion to This Post

  1. Hi!

    Lovely – works beautifully.

    I have a problem with anchor links – they always go about 100 pixels lower than I want them to. The top portion of each home section gets cut off. How can I ask it to go 50 or 100 up?

    Thanks!

    • I think that you will add some padding at top for every section and it will solve the issue.

    • You can use target parameter and edit it based on your div id. Here is the default setting of localScroll js

      $localScroll.defaults = {
        duration:1000, // How long to animate.
        axis:'y', // Which of top and left should be modified.
        event:'click', // On which event to react.
        stop:true, // Avoid queuing animations 
        target: window, // What to scroll (selector or element). The whole window by default.
        reset: true // Used by $.localScroll.hash. If true, elements' scroll is resetted before actual scrolling
      };
      • At first I thought the padding worked beautifully, then I realized it actually visibly added 120px to the top of #home-section-2. I was afraid that would happen.

        In the js solution, I tried adding pixel values after the window comma, but that just crashed the solution.

        CSS is my thing, but I’m just learning js. Could you tell me what code you would use to move the scroll up by 120 px?

        If not, I’ll keep researching and post the solution here. I always figure things out. 🙂 Sometimes it’s harder than others.

        Thanks again!

        • if you do not mind then you can share me the ftp/wp-admin access via Hire Me form and I can try to solve this issue without any charge.

  2. I followed your instructions but it didn’t work for me. I use the Parallax Pro theme. After modifying the files as directed I browsed my site but no arrows appeared.
    What do you mean at the end of the instruction ” Copy the modified CSS from STEP 4 section.”

    Thanks.

    Marcel

    • Can you share your site url once? I’ll look it once. I think that you did not add the CSS correctly or you disabled the Dashcions from functions.php file.

    • Ok. I checked your site “Scooter huren Veluwe | Scooter-verhuur Veluwe” and there <p class="arrow"><a href="#home-section-5" rel="nofollow"></a></p> is missing in every Home section.

      Also you need to add the provided CSS file in style.css file.

      • true, I removed all the code after I noticed it didn’t work. I’ve put back the code and added
        <a href="#home-section-2"
        to the home section widget text 1 to test.

        • Ok. Understand.

          If you trust me then file up the hire me or Need More Help! form and share the wp-admin access once. I’ll do this for you.

          • sorry I cannot do that. Sure you can be trusted and you are a good guy, but I can’t do this.

            • No problem. It’s fine. I understand the security things.

Leave A Reply

Your email address will not be published. Required fields are marked *