Coolest Guides on the Planet

coolest guides on the planet

Coolest Guides On The Planet

  • Home
  • macOS
  • WebDev
  • All Posts
  • Contact

Using ScrollReveal.js in a WordPress Genesis Theme

November 6, 2014 Leave a Comment

ScrollReveal.js is a javascript resource for animating objects as they appear in the viewport, here's how to get it going in a Genesis theme for WordPress.
Above are four colored balls set to animate with scrollreval each time they enter into the viewport. You can apply the affects to small page elements or larger containers, for example the blog posts page on this site is set to animate using the default scrollreveal settings. For the elements to animate they need to have an attribute set, data-sr="" and the animation values are passed in between the quotes, for example the above circles are marked up like so:
<div class="circle-container">
<div class="yellow-circ circ" data-sr="enter left wait 2.5s and then ease-in-out 100px reset"></div>
<div class="green-circ circ" data-sr="enter top please, and hustle 20px reset"></div>
<div class="red-circ circ" data-sr="enter bottom and scale up 20% over 3s reset"></div>
<div class="blue-circ circ" data-sr="enter right wait 3.5s and then ease-in-out 100px reset"></div>
</div>
Description of the values here. But before this will work the script needs to be added.

Install ScrollReveal.js

Download the package and get the scrollReveal.min.js in the dist folder and move it to your js directory Then in functions.php enqueue it
function themeprefix_scroll_reveal() {
	
		wp_enqueue_script ('scrollreveal', get_stylesheet_directory_uri() . '/js/scrollReveal.min.js', array( 'jquery' ),'2.0.2',true 
}

add_action( 'wp_enqueue_scripts', 'themeprefix_scroll_reveal' );
As well as the main script you need an initialise script to load it.
//Scroll Reveal JS Fire Script
function themeprefix_scroll_reveal_fire() {
	?>
    <script>
      window.sr = new scrollReveal();
    </script>	
	<?
}
add_action( 'wp_footer','themeprefix_scroll_reveal_fire', 100 );
  This will now target any element with the attribute data-sr="", if no values are passed into the attribute then some defaults are applied. These defaults can be adjusted by amending the above javascript, for example:
//Scroll Reveal JS Fire Script
function themeprefix_scroll_reveal_fire() {
	?>
   <script>
	
	var config = {
        easing: 'hustle',
        vFactor: 0.25,
        mobile: true,
        enter: 'bottom',
        reset: true
      }

      window.sr = new scrollReveal( config );
	<?
}
add_action( 'wp_footer','themeprefix_scroll_reveal_fire', 100 );

Page Load -  Visibility of Elements

One of the side affects of the animated elements is that they may briefly be in a static state before scrollreveal can animate them, so to combat this some inline CSS can be added just to initially hide the data-sr attribute.
function themeprefix_scroll_reveal_inlinecss() {
?>
<style> [data-sr] { visibility: hidden; }		
<?

}
add_action( 'wp_head','themeprefix_scroll_reveal_inlinecss' );

Applying to Higher Level Elements

If you wish to apply the animations to elements whose attributes you can't control, you can filter in these attributes. For example if you wanted to make the blog posts appear animated as per here, we need to add the data-sr attribute  to the article element.
function themeprefix_attr_entry_scrollreveal( $attributes ){

 // add scrollreveal data-sr
    $attributes['data-sr'] = ' ';
    
    
    // return the attributes
    return $attributes;
    
}
add_filter( 'genesis_attr_entry', 'themeprefix_attr_entry_scrollreveal' );
Now the data-sr attribute will appear in the article element alongside the other default attributes.  - Here is a list of all the HTML elements/contexts that can be filtered for adding new attributes. These article elements would then inherit the default or amended values from the scrollreveal initialise script - if you wanted to override them you can also filter in the values
function themeprefix_attr_entry_scrollreveal( $attributes ){

 // add scrollreveal data-sr
    $attributes['data-sr'] = 'enter bottom and scale up 20% over 3s reset';
    
    
    // return the attributes
    return $attributes;
    
}
add_filter( 'genesis_attr_entry', 'themeprefix_attr_entry_scrollreveal' );
So only difference above is that the values are added . That's about it, I am not a big fan of too much animation as it can irritate and distract the reader, like a lot of things, moderation is key. Gist Reference

Cats: WebDev, WordPress

Tags

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls

Donate a Beer to the Coolest Guides

Get Beaver Builder Now!

Discuss

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls
Get DesktopServer

Lynda

Lynda.com Online Training Videos

TreeHouse

smlinks

Learn WordPress
osx-modify-shell-path

How to Add to the Shell Path in macOS Big Sur and Catalina using Terminal

October 19, 2019

virtual-hosts osx 10.10 yosemite

Set up Virtual Hosts on macOS Catalina 10.15 in Apache

October 19, 2019

Installing Homebrew on macOS Catalina 10.15, Package Manager for Linux Apps

October 18, 2019

Where is the bash shell in macos Catalina?

October 12, 2019

Refine your search

  • All
  • Modules
  • Themes
  • Documentation
  • Forums & Issues
  • Groups

RSS ars technica

  • Matter update may finally take the tedium out of setting up your smart home
  • Cue: Apple will add AI search in mobile Safari, challenging Google
  • Apps like Kindle are already taking advantage of court-mandated iOS App Store changes
  • Spotify seizes the day after Apple is forced to allow external payments
  • Apple and Meta furious at EU over fines totaling €700 million

RSS mac surfer

  • Tot is new text editor for Mac, iPhone, and iPad focused on constraints and ease of use
  • TiPbITS: Google Drive Sorting Can Hide New Documents
  • How to take a screenshot on a MacBook Pro
  • How To Create Simple Animation With Mac Keynote
  • Last Week on My Mac: Virus pandemics

Donate

Copyright © 2025· Neil Gee - All Rights Reserved - Hosted by Runcloud

Copyright © 2025 · gee on Genesis Framework · WordPress · Log in