In the comments of my post titled How to apply Parallax effect from Parallax Pro in any Genesis theme Antxon asked,
Your tutorials are simply awesome! I am relatively new to Genesis and I was wondering how can you add the after_header parallax effect and before_footer for Centric Pro? I have made a mess and I am back to square 1, thank you so much in advance!
Recently I wrote a post on using Stellar.js for setting up a Parallax background image in Enterprise Pro and am going to show how we can do the same in Centric Pro.
We shall apply fixed background images to .home-featured and .home-widgets-6 sections and use Stellar.js for the parallax effect.
Step 1
Upload jquery.stellar.min.js to wp-content/themes/centric-pro/js directory.
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!
You rock buddy! Thank you so much for this tutorial and for providing a response so quickly! I have gone through the tutorial and the Parallax Effect is now fully working!
Thank you so much Sridhar! Keep up the good work!
Cheers,
Antxon
Awesome! Can you do a tutorial on adding a video to one of the other widget areas? (2,3,or4)
Thanks!
Do you have an example of how you want them to look like?
Basically like this:
http://awesomescreenshot.com/0ae2fozx42
Like a spot to throw some embed code or something
http://www.sridharkatakam.com/adding-video-section-centric-pro/
Awesome!!!! You are the best!
And the OSCAR for wordpress goes to Sridhar Katakam
thanx
still a few questions from a newbie
when i add this , what about updates ? or do i have to create a child theme ?
or maybe add in in the dynamik extender but where ?
thanx again
Thank you..Now don’t ask me to give a thank you speech. I get nervous on stage.
99% of the cases you do not update a child theme, especially one that has been customized. So just customize your child theme to your heart’s content and not worry about updates.
Hi Sridhar,
Recently you advised to use Mobble plugin instead of wp_is_mobile, see http://www.sridharkatakam.com/conditional-mobile-check-wordpress/
New insights?
Keep up your excellent work.
Best, Herman
I’ve seen StudioPress themselves use wp_is_mobile() in Parallax Pro. I think it is okay to use it for general lightweight tablet+mobile detection.
I’ve just read some details about this topic at http://www.shambix.com/wordpress-best-practices-frameworks-and-php-to-the-rescue-of-responsive-web/. Go through it.
Hi Sridhar,
I’m completely lost with Parallax implementation in Centric Theme.
The issue is that the parallax background image is obscured by blue background color of Centric theme.
I’ve fist seen this with your Stellar Parallax implementation (http://www.sridharkatakam.com/add-parallax-background-header-footer-sections-centric-pro/).
I then switched to Parallax theme implementation (http://www.sridharkatakam.com/apply-parallax-effect-parallax-pro-genesis-theme/) and again same issue.
I’m using Genesis Extender and to make sure there’s no plugin conflict I disabled ALL plugins but Extender, nothing changes.
I then moved css/code to Centric’s style.css/functions.php and disabled Genesis Extender, again nothing changes.
Do you have any idea what going on here? See http://situsku.nl/centric/ home-widgets-3 and home-widgets-6.
Thanks for any clues.
Best regards,
Herman
Can you switch back to Stellar and post when done?
Hi Sridhar,
Done, see bottom part of row with contact form (especially at smaller screen sizes).
Best regards,
Herman
Yes, there definitely is a problem. I have not been able to figure it out by a quick glance.
I shall look in detail.
In the meantime if you can post in Stellar’s Github support, that will be helpful.
Done, see https://github.com/markdalgleish/stellar.js/issues/85
Thanks a lot Sridhar!
I seem to be having the same issue. I have customized the theme quite a bit . . . I hooked the parallax sections to section 3 and 13, all works great for section 3 but on section 13 only the blue color of centric is showing. Using inspector, I can see the image is behind the blue, but for some reason this is happening: background-position-y: -2695px;
Any ideas of how to fix this?
Thanks so much!!
Hey Sridhar,
I was able to implement this perfectly, however my scroll effect seems laggy.
Take a look and let me know what you think http://www.mswm.co
It just seems rigid to me when scrolling. Is that fixable, or am I just seeing things?
Looks fine to me.
I can say it is a bit laggy with IE11 and even slightly more with Safari for Windows. In FF works like a charm!
But if you check the demo for Parallax Pro theme in IE or Safari you could see the same laggy behavior. So, it’s common issue, the only way to manage it is to decide if using the solution from tutorial or not.
Thank you Sridhar for excellent tutorial. Maybe there is another js for the same user experience and you might want kindly to share your thoughts regarding implementation.
How can I insert picture on the header or before head on the centric pro?
How can I insert picture on the header or before head on the centric pro? can you help me to setup?
I’ve followed your other tutorials fine but just cant get this to work on my site. What am I missing?
This is what I was looking for! NOW anyone know how I can reference a video instead of the BG Image?
Great tutorial Sridhar!
Thanks
Everything worked great, except the background doesn’t seem to be scrolling too. Any Ideas?
http://www.underminedesign.com
Hey Josh how did you get this solved?
Thanks!
Hi Sridhar,
Thank you for all your posts. They are very helpful. Can I add the parrallax effect on any widget section by copying the same process as you did here for the header and footer?
Also, on mobile devices the images are skewed/not showing up at all. I know the code describes it as “Enqueue Stellar only for non mobiles” , but is there a added bit of code to make it show up properly on mobiles as well?
Thank you
And also do you know of this interrupting the showing of “livicons” vector icons. After inserting this code, it took away these icons from my page.
( http://codecanyon.net/item/livicons-for-wordpress-animated-vector-icons/5003666?WT.ac=search_thumb&WT.oss_phrase=livicons&WT.oss_rank=1&WT.z_author=DeeThemes )
Is it possible to create a parallax background for the logo of a site?
Hello Sridhar Sir I am one of your daily visitor, I tried all steps bu the Parallax effect was missing. So I found a Solution for the Problem.
.home-featured {
background-image: url(‘images/picjumbo.com_IMG_7925-1600×1050.jpg’);
background-attachment: fixed;
}
.home-widgets-6 {
background-image: url(‘images/picjumbo.com_IMG_6533-1600.jpg’);
background-attachment: fixed;
}
Hi, Nice tutorial! Thanks for that!
Just one thing: it seems the images are not responsive. Is there anything I can do to show them right on smartphone and tablet?
http://sridharkatakam.com/forums/topic/centric-pro-parallax-image-mobile-responsive/#post-5876