I am an independent WordPress web consultant with 10 years of experience in WordPress theme installation, customization, administration, maintenance, support, documentation, troubleshooting and PSD/design to WP.
This was great – thanks! Would you know how to register additional Home Section widgest in Parallax Pro, beyond the standard 5?
Thanks so much!
At the end of functions.php you will find the “genesis_register_sidebar” block. Copy paste that and change the id, name and description.
Then in front-page.php inside the “parallax_homepage_widgets” function copy paste “genesis_widget_area” block wherever you want the new section to appear and specify the id from earlier step.
After following your directions, my youtbue iframe no longer shows the video…all the animations work, but how can i fix the video to show?
Thanks so much!
I carefully executed each step and I think I did most of it right. However, the content is loaded already. So when opening the page you can see everything already. Now, if you go scrolling down the page the content flashes as if it is appearing. Only the effect now is not cool because the content was visible already it more or less resembles a camera flash now….
The opacity is already set to 0. It works correctly after I’ve scrolled past each element once. However, initially the contents are not hidden when loading the page. Any idea??
You do posess amazing skills to spot problems fast. Everything works great now. If i may ask one last question though: Is it possible to adjust the load buttons sooner? Because the last one will not load this way because it’s to close to the bottom of the page not allowing to fully scroll over it.
If not possible, no worries. Ill just add a longer footer!
Remember that you can also create a Waypoint on a different element than the one to which you are setting classes for animation. Instead of “this”, you would specify the selector for the target element.
Skridhar, I’m back and have another problem. The animations used to work perfectly but somehow I messed them up. I redid all the files so I am pretty sure the code snippets are entered correctly. However, the problem is: when opacity is set to 0, all the elements are hidden and stay that way when scrolling down. When i set opacity >0, all the elements are fully visible from the start and stay that way. How can I make them appear the way they should to again?
Hope you can help me out so that I won’t need to disturb you on this matter again!
Sridhar,
I find your teaching & instructions simply stupendous. Thank you for sharing your knowledge so freely on the web. I am using the Genesis sample and do not find front-page.php so I couldn’t Step 3. Could you please guide me further.
Thank you very much,
Santosh
Are you trying to use parallax.js or Stellar for the Parallax animations? The error you pasted indicates that you are trying to use parallax.js but in your functions.php I see Stellar.
Yes I had used Stellar using your other tutorial earlier to install a header. Then I came to this one and wanted to implement the animation.
I feel like groping in the dark. Can you send me your WP and FTP logins so I can troubleshoot?
I logged into your site and added the needed code in functions.php, adjusted the code in style.css and waypoints-init.js. I’ve added fadeIn animation to “#home-parallax-section .wrap”. But note that it might not be that effective due to it being above the fold. Scroll animations have the maximum impact when you apply them to elements that appear upon scrolling, not those that appear on page load near the top.
Your work is amazing! Thank You Sridhar. I will be spending more time on this blog to learn more for sure.
I tried the best I could, and added/editted everything as I though. But, the areas with the animated text were just blank. So I backtracked and removed everything.
Area where I think I went wrong was trying to find the correct place to do step 1.
I uploaded the animate.min.css into:
Server Home/domains/horseshorsepower.com/html/wp-content/themes/parallax-pro
Should I have added it to this folder?:
Server Home/domains/horseshorsepower.com/html/wp-admin/css
I could not find the folder “child theme directory/css” which in this case would be “/parallax-pro/css”
Thanks very much for this tutorial! I have run into one issue that I was hoping you would be aware of a fix for. When you pull up a site running this code on a mobile device – the widgets “blink” when you scroll up and down.
Hi,
I have followed these directions, have even cleared everything and started from scratch, numerous times and I am unable to get this to work. My site is currently in development stage. I am unsure of what is I am doing wrong. what do you need from me to help me through this.
I moved step by step carefully through your explanations.
Nevertheless it does not work at my project. The content of the widgets of the homepage is completly blank. No content will be shown and of course no animation 🙁
I did check the correct folder, but no mistakes.
Thank you so much for this code exercise as it worked out perfectly for me on Parallax Pro! I will be a regular at your site going forward and really appreciate your expertise.
The text won’t show up after following the steps. I did use your other tutorials though where I replaced the front page section 1 with a slider. Any help is welcome!
Is there a way to disable to animation it loads the first time? It would be much cleaner if the animation loaded only once on scroll and then stayed at the opacity 1.
Is there a way to disable to animation after it loads the first time? It would be much cleaner if the animation loaded only once on scroll and then stayed at the opacity 1.
This was great – thanks! Would you know how to register additional Home Section widgest in Parallax Pro, beyond the standard 5?
Thanks so much!
At the end of functions.php you will find the “genesis_register_sidebar” block. Copy paste that and change the id, name and description.
Then in front-page.php inside the “parallax_homepage_widgets” function copy paste “genesis_widget_area” block wherever you want the new section to appear and specify the id from earlier step.
After following your directions, my youtbue iframe no longer shows the video…all the animations work, but how can i fix the video to show?
Thanks so much!
Can you provide the URL of your site?
http://bit.ly/1nTclSo But i had to remove the changes because the site is live.
Here’s the iframe code inside a text widget of Home Section 1 :
[youtube http://www.youtube.com/watch?v=dYw4meRWGd4?vq=hd720;rel=0;showinfo=0;color=white;controls=2;modestbranding=1;autoplay=1;frameborder=0;fs=1;%5D
do you have a test site you could try with, or should i put one up?
Many thanks. I really enjoyed your horizontal opt-in code – it’s working great on the same site!
Thank you very much, Sridhar! Your tutorials are fantastic!
I’ve added this code to a version of Parallax Pro I’ve been playing around with:
http://themes.imageperceptions.com/parallax/
Thanks again!
Hello!
I carefully executed each step and I think I did most of it right. However, the content is loaded already. So when opening the page you can see everything already. Now, if you go scrolling down the page the content flashes as if it is appearing. Only the effect now is not cool because the content was visible already it more or less resembles a camera flash now….
How can I fix this
Thanks in advance!
Set their opacity to 0 in style.css.
The opacity is already set to 0. It works correctly after I’ve scrolled past each element once. However, initially the contents are not hidden when loading the page. Any idea??
Can you provide the URL of your site?
http://www.ohiobear.com
Closing brace is missing at the end of http://pastebin.com/raw.php?i=FUDiDtg2. Add it and reload page and check again.
Sridhar,
You do posess amazing skills to spot problems fast. Everything works great now. If i may ask one last question though: Is it possible to adjust the load buttons sooner? Because the last one will not load this way because it’s to close to the bottom of the page not allowing to fully scroll over it.
If not possible, no worries. Ill just add a longer footer!
thanks for all the help
Try playing with the offset value. http://imakewebthings.com/jquery-waypoints/#docs
Remember that you can also create a Waypoint on a different element than the one to which you are setting classes for animation. Instead of “this”, you would specify the selector for the target element.
Skridhar, I’m back and have another problem. The animations used to work perfectly but somehow I messed them up. I redid all the files so I am pretty sure the code snippets are entered correctly. However, the problem is: when opacity is set to 0, all the elements are hidden and stay that way when scrolling down. When i set opacity >0, all the elements are fully visible from the start and stay that way. How can I make them appear the way they should to again?
Hope you can help me out so that I won’t need to disturb you on this matter again!
Hi William, did you ever figure the opacity thing out?
Sridhar,
I find your teaching & instructions simply stupendous. Thank you for sharing your knowledge so freely on the web. I am using the Genesis sample and do not find front-page.php so I couldn’t Step 3. Could you please guide me further.
Thank you very much,
Santosh
Create that file locally and upload it to your child theme directory using a FTP client or cPanel file manager.
Namaste and Thank You very very much!!!
After executing all the steps I got a white screen with the following error:
wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.min.css' ); // load Waypoints // Source: http://imakewebthings.com/jquery-waypoints/ wp_enqueue_script( 'waypoints', get_stylesheet_directory_uri() . '/js/waypoints.min.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_script( 'waypoints-init', get_stylesheet_directory_uri() .'/js/waypoints-init.js' , array( 'jquery', 'waypoints' ), '1.0.0' );Paste the code present in your child theme’s functions.php at http://www.pastebin.com and give the link.
http://pastebin.com/xLMkK60n . Thank You for your time and attention.
Are you trying to use parallax.js or Stellar for the Parallax animations? The error you pasted indicates that you are trying to use parallax.js but in your functions.php I see Stellar.
Yes I had used Stellar using your other tutorial earlier to install a header. Then I came to this one and wanted to implement the animation.
I feel like groping in the dark. Can you send me your WP and FTP logins so I can troubleshoot?
http://www.sridharkatakam.com/contact/
I logged into your site and added the needed code in functions.php, adjusted the code in style.css and waypoints-init.js. I’ve added fadeIn animation to “#home-parallax-section .wrap”. But note that it might not be that effective due to it being above the fold. Scroll animations have the maximum impact when you apply them to elements that appear upon scrolling, not those that appear on page load near the top.
Your work is amazing! Thank You Sridhar. I will be spending more time on this blog to learn more for sure.
Hi,
I added a version of this code to my site, but is kind of glitchy. As you scroll down the content is visible and before it fades in. Any reason why? http://entreemobile.com.216-70-114-136.8dfb-5ln5.accessdomain.com/#
Thanks in advance!
Hey thanks for this, I really want to try it out.
I’m a total beginner, and I can’t even do step 1.
I know how to upload files via the cpanel, but how do I actually get that file that you linked to.
Can I just upload it as a “.txt” file? If not, how do I get the “.css” file, and “.js” file?
I aplogize for the extreme newb question.
Thanks
nevermind, figured it out, i’m an idiot.
I tried the best I could, and added/editted everything as I though. But, the areas with the animated text were just blank. So I backtracked and removed everything.
Area where I think I went wrong was trying to find the correct place to do step 1.
I uploaded the animate.min.css into:
Server Home/domains/horseshorsepower.com/html/wp-content/themes/parallax-pro
Should I have added it to this folder?:
Server Home/domains/horseshorsepower.com/html/wp-admin/css
I could not find the folder “child theme directory/css” which in this case would be “/parallax-pro/css”
Thanks in advance.
Thanks very much for this tutorial! I have run into one issue that I was hoping you would be aware of a fix for. When you pull up a site running this code on a mobile device – the widgets “blink” when you scroll up and down.
Sorry I realize that may have been a bit unclear.
When I say “blinking” this is different from the fadeIn/fadeOut animations.
Hi,
I have followed these directions, have even cleared everything and started from scratch, numerous times and I am unable to get this to work. My site is currently in development stage. I am unsure of what is I am doing wrong. what do you need from me to help me through this.
Thanks
Dear Sridhar,
I moved step by step carefully through your explanations.
Nevertheless it does not work at my project. The content of the widgets of the homepage is completly blank. No content will be shown and of course no animation 🙁
I did check the correct folder, but no mistakes.
Do you have any hints?
thanks
Joachim
Hi Joachim, did you figure things out as to why the widget content is blank?
Great job, as usual, Sridhar! Worked perfectly on my Parallax Pro / WordPress 4.0.
Thank you so much for this code exercise as it worked out perfectly for me on Parallax Pro! I will be a regular at your site going forward and really appreciate your expertise.
Hello Sridhar,
The text won’t show up after following the steps. I did use your other tutorials though where I replaced the front page section 1 with a slider. Any help is welcome!
Thanks,
Stefan
Hi Sridhar, looks like waypoints.min.js is no longer available. Should I use this one instead? https://github.com/imakewebthings/waypoints/blob/13ae054b649b5e0df9a549abb4a0420eac67bea8/lib/jquery.waypoints.min.js
Sridhar,
Is there a way to disable to animation it loads the first time? It would be much cleaner if the animation loaded only once on scroll and then stayed at the opacity 1.
Thanks,
Kent G.
Sridhar,
Is there a way to disable to animation after it loads the first time? It would be much cleaner if the animation loaded only once on scroll and then stayed at the opacity 1.
Thanks,
Kent G.
Hi Sridhar,
I would love to try this out but waypoints.min.js is no longer available.
Any chance you could update?
Thanks, Lindy.
Hi Lindy,
Try using https://raw.githubusercontent.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js.
You need to replace reference(s) to waypoints.min.js with jquery.waypoints.min.js.
[…] Adding scroll animations in Parallax Pro […]