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 (