Using on-scroll for moving graphics onto screen from left on Minimum Pro

[asbilly92]

I'm trying to possibly use some type of animation or on-scroll to move some graphics into view on a home page as the viewer scrolls down to that point. Have tried a few ways but so far, not working; looking for some guidance.

I'm trying to move the three (will be 4) graphics; that are under the slider onto the screen from the left as the viewer gets to that point. I'm trying to make it as simple as possible, but realize it might not be. Can anyone make any suggestions as to how to achieve this? I don't want anything crazy or fast, just a subtle movement so they appear one after the other, and then slide over to their normal position.

Here's the site that I want to add it to

________________________________________________________________________________________

EXAMPLE OF WHAT I'M LOOKING FOR

Go down to their first example called: slide in from left.

Any help would be great!

Thank you ahead of time 😉

http://www.djccoreconsulting.com/

[Christoph]

Hi,

the Codepen to that article has pretty much everything you need: http://codepen.io/SitePoint/pen/MwEaQM
Adjust markup and CSS classes so it makes sense (you more than likely don't need all the selectors for headings and text...)
Create and upload a .js file with the JS code and enqueue it in functions.php.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[asbilly92]

Using the CodePen code for the js i'm confused about how I would title the js script file, would it be animation_elements.js? I know that I can name it what ever I might like but using their exact example would that be the correct name for the js file I need to upload?

[Christoph]

Hi,

it's better to use a dash and not an underscore.
animation-elements.js

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[asbilly92]

OK great. To make that code-pen actually work though would that be the correct title for the js file?

(animation-elements.js)

Sorry, I'm tying to use this as a learning experience so want to set it up just like that pen to make it work and not understanding, for that exact example what to title the .js file......

I appreciate your help 😉

[Christoph]

Hi,

There is no "correct title".
As you already said, the name really has nothing to do with making the code work.
To get it to actually "work", you have to enqueue that file in functions.php.
That´s the only time the name of the file is actually used.

I like to use file names that describe what a file does.
Naming it scroll-animations.js
seems a bit more intuitive to me.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[asbilly92]

OK but in a post above you said:

Create and upload a .js file with the JS code and enqueue it in functions.php.

So if I upload the .js file doesn't it need a name ? I know it needs to be enqueued; but doesn't it need a name to enque it with and a file name inside the js folder?

I will get you another coffee lol!

[Christoph]

Nowhere am I saying that you don't have to give the .js file a name.
I´m saying what you name it is irrelevant.
You can name it "day-at-the-beach.js", "best-javascript-ever.js", "name.js" or whatever you like to name it - as long as you use the same file name when you enqueue it.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[asbilly92]

OH ok I got it now ! I will give it another try!

Thank you!

[asbilly92]

OK I put this into my functions.php file for enquing the script; where as : animation_left_script is the name of the function and scroll-animation.js is the name of the js file. Think I'm getting closer but the content isn't showing on the page other than the normal text. Do I have that function coded properly?

I do have the js file loaded into the js directory of my child theme.

// Enqueue animation on scroll from left

add_action( 'wp_enqueue_scripts', 'animation_left_script' );

function animation_left_script() {
    wp_enqueue_script( 'scroll-animation', get_stylesheet_directory_uri() . '/js/scroll-animation.js', array( 'jquery' ), '', true );
}
 

Thank you!

[Author]

Posts