Parallax functionality

Using Concrete / Help
#1

Hi,
Is there any parallax block available for 9.1? Neither Atomik nor current 9.1 compatible themes have that functionality.
Anyone knows?
Thank you!
V.

#3

Hi David,
Is there a way to do a parallax in the Hero zone?
I have tried the parallax functionality in other areas as well in Modena, but it won’t let me configure the size of the background image and it displays huge no matter what configuration setting I choose.
Thank you!
V.

#4

This feature has been around for a while but for some reason never really worked for us. There is a tutorial at How to add Parallax to a Layout Background with the included Custom Template :: Concrete CMS
We eventually made jarallax work for us. With some skills you could tweak this plugin. You can have image, text or video parallax effect.
GitHub - nk-o/jarallax: Parallax scrolling for modern browsers

#5

Thank you kfog!
No, there’s no way I can convert a WP plugin into a Concrete block… :slight_smile:

#6

There are many interpretations of Parallax. At its simplest, it can be a fixed value for a background attachment. background-attachment - CSS: Cascading Style Sheets | MDN

For example,

  • Create a content block with your overlay text (or any other block)
  • Use block design to disable the grid container so it goes full width.
  • Use block design to add a background image
  • Use a header item attribute to create a class ‘my-parallax’ with style background-attachment: fixed (or otherwise add the class to the page or theme)
  • Use block design to add that class to the block.

You can do similar with areas, layouts and containers.

More complex parallax is often described as the Ken Burns effect, where text and images zoom or scroll at different rates. The swiper and vegas displays for my Omni Gallery addon both provide that kind of effect.

#7

Hy John, could you explain what is a header item attribute? I know how to add the css to the page, but I would like to learn about this other option. Thank you!
V.

#8

Not much documentation. Some at Concrete CMS SEO optimization

The attr name is actually Header Extra Content. It dumps whatever you put into it into the page header. So you could add <style>....</style> with your css in it.

1 Like
#9

Awesome, thank you John!