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

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:

/**
* 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.

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.