Genesis Tutorials, WP Tutorials
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.
