Hi,
On the example site below, you will see that the top section (hero) “Are you tired…” sticks and as you move down the page the red block 'and how many strategic…" moves over the top of the hero banner.
https://www.atkearney.com/why-were-different
Is this achievable using the sections in cornerstone or does it need additional css?
Any advice would be much appreciated.
Thanks
Paul
The top section “Are you tired…” doesn’t stick for me… it scrolls regularly as you scroll the page down.
BUT… to answer your question, as if it did stick… that is most definitely doable! This would be a breeze with Pro.
I noticed that your title says “Pro” and your question says “cornerstone”… like said above with Pro it would be a breeze to setup… but the question is are you using cornerstone with X or are you in fact using Pro?
Hi,
Thanks for replying.
The top banner did stick as the red block moved over it, it must of changed there end.
I meant Pro…I’m using pro and it seems they are using something called scroll magic to achieve this movement / effects on the page.
In Pro. Create a bar after / lower than the bar containing the menu.
2 In your newly created bar… section… for background click advanced. put in a background image… select parallax. And also select for it to not scroll with the page.
3 Now all added bars / sections will scroll while that one is locked in place.
Is there not an easier way to make that top section stick in the page editor?
Did you select advanced and make it parallax AND not scroll with page?
These are the settings but I’ve not selected an image as I want only a white background and large words on the section. Essentially this is the page I want it to work on http://acquire-international.com/why-were-different/ and this is the page where it demo’s how it’s done - I want to replicate it. They are using Scroll Magic by the looks of it.
I want the blue section ‘How many recent senior hires’ to move over the Do you want to win section.
PS. I have no idea re the CSS code that is needed to subtract the menu height - does that CSS go in global css?
Thanks for your help/advice 
Take a look at this code… this is what your after, it’s really simple… are you able to go from here?
http://jsfiddle.net/xMpu4/224/
If not… I can code a page on a site I’m working on with Pro… the site is of an adult industry model, but I can do a page just for you that wont show anything “adult”. and then I could save and export it as a page and attach here for you to import.
Let me know…
A page for me to import would be amazing - Thank you !!
PS; don’t mind the adult cont whatever is easier as I can always swap it out.
Thanks again - very kind of you.
Hi,
Have you managed to code that page yet?
Sorry about the delay… I will do it now.
Ironically, the top section doesn’t do it anymore (viewing it today) lol… 3 sections down now its the section “We offer a clear alternative.” that the effect is on.
But I understand you want that top section to do it… I’m on it now…
Hi,
No worries re delay, I appreciate this is a kind gesture.
The effect with the top block sticking and the blocks below overlapping is now the the AT Kerney homepage https://www.atkearney.com/
Do you also know where the best place is to pick up pre coded css for process visuals like the ribon chart on this page? http://iooilandgas.com/capabilities/
Thanks
Paul
It is possible.
Make an image on illustrator, create the text and then cut out the shape of the text from the back ground.
Then once you have this, set it as the top layer and then set the texture as the bottom layer.
This way when you scroll down, you will see the parallax effect through the text.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.