Parallax Effect for Background Images

General info:

  • File size <1kb
  • Integrates perfectly with Cwicly, feels almost native


Paste the following code to your desired location.
This can be:

a code block inside the editor

a custom code plugin of your choice


right inside the Cwicly Settings --> Custom Code

//  Simple Parallax
//  Author Piers Rueb

const simpleParallax = (elem, modifier) => {
    let paras = document.getElementsByClassName(elem);
    for (let i = 0; i < paras.length; i++) {
        paras[i].setAttribute('style', 'background-repeat: no-repeat; background-attachment: fixed; background-size: cover;background-position: center center;');
    const sp = () => {
        for (let i = 0; i < paras.length; i++) {
            let x = paras[i].getBoundingClientRect().top / modifier;
            let y = Math.round(x * 100) / 100;
            paras[i].style.backgroundPosition = 'center ' + y + 'px';


Credits/Source and more info:
GitHub - piersrueb/simpleParallax: Simple fixed background parallax effect in vanilla js.

Now you can use the following classes:

  • para-100 (big effect)
  • para-50 (medium effect - 50%)
  • para-25 (light effect - 25%)

Note, you can tweak the class names per your needs (e.g. parallax-medium).
Just change them inside the code, you can find them at the very bottom.

You want to add the classes to your block that holds the background image as virtual classes, e.g. a section block.

Instead of pressing enter or clicking the Create button, you want to hold shift in addition.

  • shift + enter or
  • shift + click

If everything done right, the class name appears as a virtual class in purple, not as a global class in green:


That’s it!


Background Parralax

If anything is unclear, please don’t hesitate to share your thoughts.
Hopefully, this helps you out until we (fingers crossed ) receive such a functionality natively in some way in Cwicly.



Works great. Thanks for sharing, @Marius.

1 Like

Thank you for your sharing, @Marius!

I’ve added a basic parallax effect to my site some days earlier.

Anyway, your solution looks great, too. I’ll keep it. :blush:

1 Like

I thought cwicly had a built in parallax feature, what is that for anyways?

Not yet, @JulianM.

In case you are referring to this:

It’s the CSS property background-attachment, which does basically the following:

The background-attachment CSS property sets whether a background image’s position is fixed within the viewport, or scrolls with its containing block.

:information_source: background-attachment - CSS: Cascading Style Sheets | MDN (

Thank you for sharing so easy to implement and works so well !

1 Like

Thanks for your feedback @JuGa, much appreciated.
Glad it works out for you :sunglasses:

1 Like

perfect for background.
but how can we do like this by cwicly ( one section of slider on top, the section below to cover it, like below)

or like this page:

You can put 2 elements inside same section and make first element sticky with top 0 px (or height of header if you have fixed / sticky header) and second element relative. Remember to change Z index so second element has higher index:

Rember that you need extra space under section to make it scrollable :slight_smile:

I just posted about a new tool in another thread, which could potentially do parallax through the GSAP ScrollTrigger ? (possibly)
And then this thread came up in my feed as recently updated haha.

But anyway, maybe it is useful to anyone on here as well:



thanks for the brief. it’s perfect for me . really appreciate!!