In the comments section of Parallax animations in Genesis using Stellar.js article, a user asked:
As always, this is excellent, Sridhar. Of course, there will be questions.
The first one for me: How can I apply this to an existing widget area? I use the Dynamik child theme for Genesis and there are numerous predefined widget areas that can be turned on and off. Iād like to target one (or two) of those.
Thank you for your continued help.
In this tutorial I show how we can use jQuery to inject the necessary markup for setting up responsive parallax scrolling for background image of an existing section in Dynamik.
This tutorial has been written with Static Homepage EZ set with the "EZ Home 1 2" layout. If you are using a different layout, the CSS may need to be adjusted accordingly.
Step 1
a) Upload jquery.stellar.min.js to child wp-content/uploads/dynamik-gen/theme directory.
b) Create a file named say, jquery.stellar.init.js having the following code in the same location:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Hi Sridhar,
How can i overlay the text (h1, h4) with a dark color, because my background image has a bright color?
Thanks in advance
Are you asking about setting a dark background color to the widget title?
Yes Shridhar, i want a dark background overlay for the text, so it is better readable.
Thanks for your help.
Add this CSS: http://pastebin.com/raw/j8s403eh
If it does not work, you may have to change the CSS selector. Provide me the URL of your site in that case.
Thanks a lot Sridhar,
This works perfectly