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.
Thanks for this post, Sridhar. I am trying to achieve the kind of text fadeout one sees in Agency Pro but on Minimum Pro, where the fadeout occurs on scroll down. I know I need to use animate.css’s FadeOut function but don’t know enough about js to figure out how to do it on scroll down. Would you consider doing a blog post on that? Thanks!
Wow…thank you so much! I just gave your name to a client of mine in Hong Kong who may need some StudioPress customizing done in a month or two. You are a fountain of knowledge!
I noticed from your video that the icons flash for a second, and then the animations begin.
Is there a way to get rid of the icons flashing when the user scrolls down to that section of the page, and just have the icons animate when a user reaches that point?
I was still getting it, and I noticed at the 20-21 second of your video above, the icons flash for a second before animating. Because I am animating tags, I changed my offset to 110% instead of 90%, and it works fine now.
This is exactly what I was looking for! I’m still a noob and I have a few question about the way you enqueue the script.
1. I see you used the “if ( !is_front_page() ) return;” does that allow the script to only be loaded on the homepage?
2. Does that help the performance of the site because it only loads the script if it’s needed?
3. How could I use this on another page of my site? using “is_page( ‘about’ )” ?
my animated elements does not hide but they are shown and when i scrolls downs then they animates. i want to add the style used in above template that the animated div does not show before i scrolls down .
Thanks for this post, Sridhar. I am trying to achieve the kind of text fadeout one sees in Agency Pro but on Minimum Pro, where the fadeout occurs on scroll down. I know I need to use animate.css’s FadeOut function but don’t know enough about js to figure out how to do it on scroll down. Would you consider doing a blog post on that? Thanks!
Done. http://www.sridharkatakam.com/fade-away-element-scrolling-fade-back-scrolling-wordpress/
Wow…thank you so much! I just gave your name to a client of mine in Hong Kong who may need some StudioPress customizing done in a month or two. You are a fountain of knowledge!
Hi,
I noticed from your video that the icons flash for a second, and then the animations begin.
Is there a way to get rid of the icons flashing when the user scrolls down to that section of the page, and just have the icons animate when a user reaches that point?
I do not remember whether the flashing happens/is noticeable. If it is indeed a problem, just use CSS3 transforms like in Step 3 of http://www.sridharkatakam.com/using-waypoints-jquery-animate-fade-elements-scrolled-wordpress/
I was still getting it, and I noticed at the 20-21 second of your video above, the icons flash for a second before animating. Because I am animating tags, I changed my offset to 110% instead of 90%, and it works fine now.
Hi,
This is exactly what I was looking for! I’m still a noob and I have a few question about the way you enqueue the script.
1. I see you used the “if ( !is_front_page() ) return;” does that allow the script to only be loaded on the homepage?
2. Does that help the performance of the site because it only loads the script if it’s needed?
3. How could I use this on another page of my site? using “is_page( ‘about’ )” ?
1. Yes
2. Yes. We should try to load scripts only where needed.
3. Yes. Instead of
if ( !is_front_page() )
you would use
if ( !is_page(‘about’) )
[…] Jack In The Box is kind of similar to Waypoints about which I wrote here and here. […]
very nice plugin .but i want to use it in this manner means like in this template .any help will be appreciated
http://www.shegy.nazwa.pl/themeforest/hype/ios/image/
my animated elements does not hide but they are shown and when i scrolls downs then they animates. i want to add the style used in above template that the animated div does not show before i scrolls down .
regards.
Set their opacity to 0 in style.css.