In Agency Pro, a Genesis child theme the welcome text content gradually fades away when scrolled down and appears in full opacity when scrolling back up. In this article I am going to provide an example of using Agency Pro's JavaScript in Minimum Pro. This can be applied in any WordPress theme.
Screencast:
In the above video I've applied the effect on 'home background image' div, a widget overlayed on Minimum Pro's body background image per my earlier post with slightly modified CSS.
Step 1
Upload the following files from Agency Pro's /js directory to active theme's /js directory:
- jquery.scrollTo.min.js
- home.js
Step 2
Edit home.js.
Delete
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Excellent! The instructions worked perfectly. Thank you, Sridhar.
Hi!
This is exactly what Im looking for but as a beginner, I have no idea what you´re talking about. Any easy code that I can just copy/paste into CSS/HTML/Javascript of my wordpress site?
is it possible in reverse? Fade in on scroll down, and fade away on scroll to top.
‘opacity’: window_scroll / 300
simply, thanks.
hi Tuomas,
its visible from the start, and when i scroll a little bit, it disappears and starting to fade in.
do you have a solution so its not visible from the start? 🙂
thank you
Thanks for the cheat sheet. I love this site! Any way to fade in the background image? If I use the custom-background class the whole screen fades out not just the background image…
I was able to do this by using the .backstretch class and the method you described above!