Trouble setting up Parallax.js

Question

I'd like to use Parallax.js for a project, but so far I've had trouble getting it to play nice with an existing site.

Here's where I'm getting hung up:

I want to apply the plugin to an element whose height scales to fit the content inside it, and has a min-height of 300px

Parallax.js seems to override this & modifies the height based on screen size, can I prevent this?

So far, I haven't been able to "see" anything. The documentation mentions making the target div transparent, but I've had no luck

Codepen Example I'm trying to emulate: Simple Parallax Scrolling parallax.js

My Codepen: Existing site, want to add parallax to #hero

CSS I used to achieve a "simple" fixed BG effect

#hero {
background-image: url("http://pixelcog.github.io/parallax.js/img/stellar-spire-eagle-nebula-1400x900.jpg");
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: overlay;
background-position: 0 0;
background-attachment: fixed;
}

Any advice/suggestions/constructive criticism is welcome! Already spent an embarrasing amount of time pulling my hair out over this.

Elected to not include parallax.js in my codepen's JS box, as it only served to further "goof things up" for the time being. — Androbaut, Nov 09 '16 at 22:23
Little update: no opposed to using a different method to achieve the same effect, just trying to get that sweet, sweet parallax working properly — Androbaut, Nov 09 '16 at 23:26

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I want to apply the plugin to an element whose height scales to fit the content inside it, and has a min-height of 300px

Parallax.js seems to override this & modifies the height based on screen size, can I prevent this?

Have you tried wrapping your #hero and applying parallax to the parent? So that the inner bock is left alone by the parallax script (while being moved by its parent)?

Scripts like sliders or parallax, etc. work by automating the application of the needed CSS rules to an element, as you found out. When this happens and it conflicts with your CSS, dodge the fight and move your content away from the effect of the script's style rules.

In other words give the script a wrapper to work on, and keep the content for yourself, away from the greedy tentacles of the script that's giving you nightmares.

Trouble setting up Parallax.js

1 Answers1