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.
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.