pixelcog / parallax.js

Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
MIT License
3.53k stars 840 forks source link

But Does it Run Bootstrap? #275

Open ThisGuyHasTwoThumbs opened 5 years ago

ThisGuyHasTwoThumbs commented 5 years ago

hey,

I've got a Bootstrapped WP site and the parallax plugin seems to be half-working when implemented.

It firstly doesn't load the background image until F12 is pressed, which .. well won't work haha most user evens don't know what half the F buttons do.

Then it carries on, outside the container which is kinda ok, can be worked around but would be nice by default to keep to the container it's in.

HTML:

<div class="row full-width-div parallax-window"
     data-parallax="scroll"
     data-over-scroll-fix="true"
     data-image-src="<?php echo plugins_url('vendor-module/images/'); ?>/features-background.jpg"
>
    <div class="col-sm-12" id="features">
        <div class="row">
            <div class="features-container col-sm-6">
                <img src="<?php echo plugins_url('vendor-module/images/'). 'placeholder.jpeg'; ?>" class="img-responsive" />
                <p>TAGLINE</p>
            </div>
        </div>

        <div class="row">
            <div class="features-container col-sm-6 col-sm-offset-6">
                <p>YET ANOTHER TAGLINE</p>
                <img src="<?php echo plugins_url('vendor-module/images/'). 'placeholder.jpeg'; ?>" class="img-resposnive" />
            </div>
        </div>

        <div class="row">
            <div class="features-container col-sm-6">
                <h3>HEY, YOU GUESSED IT. A TAGLINE</h3>
                <img src="<?php echo plugins_url('vendor-module/images/'). 'placeholder.jpeg'; ?>" class="img-responsive" />
            </div>
        </div>
    </div>
</div>

so it uses data-* tags (I have tried using JS but same result).

Would you like CSS?

Thanks