How to make parallax sections fixed?

On our demo, there is a project called Mod­ern Flat which behaves a lit­tle dif­fer­ent than the oth­ers. As shown in the below GIF ani­ma­tions, the par­al­lax sec­tions are fixed and over­lap each oth­er.

How to get the Parallax Sections to stay Fixed

There is a glob­al option to set the par­al­lax move­ment speed that can be found in Admin Pan­el → Appear­ance → Cus­tomiz­er → Lay­out Ele­ments → Con­tent → Par­al­lax Move­ment Speed.

It has five lev­els of speed – from Sta­t­ic, which actu­al­ly dis­able the par­al­lax effect, to Fixed, which is used to achieve the effect explained in this arti­cle.

Individually change the Parallax Sections Movement Speed

Using a small trick, we’re allow­ing you to change this option for each par­al­lax sec­tion. All you have to do is to find the Post ID for each par­al­lax sec­tion and then add it to Admin Pan­el → Theme Options → Cus­tom Code → Cus­tom JavaScript (foot­er) using the fol­low­ing snip­pet struc­ture:

parallax_speeds = { fixed: ‘#post-280-title, #post-283-title, #post-285-title, #post-294-title’, };

You can find the Post ID in the Edit Page or Edit Project URL. For exam­ple, the Post IDs for the above par­al­lax sec­tions are “280, 283, 285, 294”

Using the same struc­ture, you can play with all five Par­al­lax Move­ment Speed options: sta­t­ic, slow, medi­um, fast and fixed.

The “Shadowed Content” Effect

More than the fixed par­al­lax sec­tions, there is a “shad­owed con­tent” effect that we achieved by using two suc­ces­sive sub pages, both with the same fea­tured image with the fol­low­ing dif­fer­ences:

  1. The first sub­page, with con­tent inside the Descrip­tion, has the Fea­tured Image dark­ened by 50%
  2. The sec­ond sub­page, with­out con­tent, has the unedit­ed ver­sion of the Fea­tured Image

You can dark­en the image using a free online edi­tor like Pixlr Express.

This article applies to Mies, as they share the same underlying structure.

Updated on May 8, 2017

Was this article helpful?