Skip to content

Instantly share code, notes, and snippets.

@efuller
Last active August 29, 2015 14:04
Show Gist options
  • Save efuller/9bbb96b944fcef4a5d8d to your computer and use it in GitHub Desktop.
Save efuller/9bbb96b944fcef4a5d8d to your computer and use it in GitHub Desktop.
Add text fade effect to Genesis parallax theme.
<?php
add_action( 'wp_enqueue_scripts', 'parallax_enqueue_scripts' );
/**
* Enqueue Scripts
*/
function parallax_enqueue_scripts() {
if ( is_active_sidebar( 'home-section-1' ) ) {
if ( ! wp_is_mobile() ) {
wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );
}
wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );
wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
wp_enqueue_script( 'home', get_stylesheet_directory_uri() . '/js/home.js', array( 'localScroll' ), '', true );
}
}
jQuery(function( $ ){
$.localScroll({
duration: 900
});
function fade_home_top() {
if ( $(window).width() > 800 ) {
window_scroll = $(this).scrollTop();
$(".home-section-1 .wrap").css({
'opacity' : 1-(window_scroll/300)
});
}
}
$(window).scroll(function() { fade_home_top(); });
});
@efuller
Copy link
Author

efuller commented Jul 21, 2014

Usage

  1. Copy over the home.js, jquery.localScroll.min.js and jquery.scrollTo.min.js from the Agency theme.
  2. Enqueue the scripts on front-page.php
  3. Edit home.js to target the widget section you want the text to fade on.

Note: I targeted the wrap so the text would fade and not the background image.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment