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.