Community Forums › Forums › Archived Forums › Design Tips and Tricks › Using on-scroll for moving graphics onto screen from left on Minimum Pro
- This topic has 9 replies, 2 voices, and was last updated 8 years, 5 months ago by
asbilly92.
-
AuthorPosts
-
August 17, 2016 at 7:57 am #191449
asbilly92
ParticipantI'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/August 18, 2016 at 8:18 am #191531Christoph
MemberHi,
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.
September 13, 2016 at 3:50 pm #193117asbilly92
ParticipantUsing 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?
September 13, 2016 at 8:35 pm #193131Christoph
MemberHi,
it's better to use a dash and not an underscore.
animation-elements.js
September 16, 2016 at 6:57 am #193235asbilly92
ParticipantOK 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 😉
September 16, 2016 at 9:31 am #193242Christoph
MemberHi,
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.
September 16, 2016 at 9:45 am #193246asbilly92
ParticipantOK 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!
September 16, 2016 at 3:21 pm #193259Christoph
MemberNowhere 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.
September 20, 2016 at 3:57 pm #193440asbilly92
ParticipantOH ok I got it now ! I will give it another try!
Thank you!
September 21, 2016 at 10:20 am #193473asbilly92
ParticipantOK 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!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.