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
|
1 2 3 4 5 6 7 8 9 10 11 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
//* 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<?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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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:
|
1 2 3 4 |
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
|
1 2 3 4 |
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
|
1 2 3 4 5 6 |
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.
Hi Paul
Is this still active? I’ve tried to add this to our site but it doesn’t scroll at all.
Thanks
Yes. Can you share the wp-admin access via contact form? I can help you
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.
And also, thank you kindly!
You can use target parameter and edit it based on your div id. Here is the default setting of localScroll js
[code lang=”javascript”]$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.
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.
hi,
here’s my website address:
http://www.scooter-huren-veluwe.nl/
Ok. I checked your site “Scooter huren Veluwe | Scooter-verhuur Veluwe” and there [code language=””]<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.