search

pixelcog / parallax.js

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

Non-Body scroll #221

Closed Nick-lab closed 6 years ago

Nick-lab commented 6 years ago

I have the body set to always static and a fuax body element is what scrolls how would i update to specify the scrolling element? (the reason why i do this is for a mobile side nav menu can open and push the "body" to the right).

wstoettinger commented 6 years ago

have you tried using the mirrorContainer option to set it to your element?

Nick-lab commented 6 years ago

no have not, didn't see that in the options section of the parallax page is that a beta option?

wstoettinger commented 6 years ago

it's not beta but it's also not that well tested either! It's main intention is to move the parallax further to the front, I'm not sure, however, if it also influences the scrolling behavior! would be a nice feature addition though!

Nick-lab commented 6 years ago

okay i'm having a little bit of trouble figuring out how to set this script up, i have confirmed that the script is loaded however i cannot figure out how to direct it to the correct elements. iv'e tried passing a object when calling the Parallax element but nothing shows up.

<body>
    <div class="side-nav">
    </div>
    <div class="new-body">
        //contect box that spans 100vw
        <div class="background img marg-pad">
            //parallax container to fill the content container
        <div class="background-img offset-top">
                 // this contains the image
        <div class="parallax-bg globe"></div>
        </div>
          /* 
             static content here
         */
        </div>
    </div>
</body>

am i on the right path? if not i would love some direction and help. :)

wstoettinger commented 6 years ago

try adding the class parallax-slider to your background-img div and then call

$('.background').parallax({
    mirrorContainer: '.new-body'
});

this will look for any .parallax-slider within .background and create the parallax-mirror in .new-body.

It might also help to provide the naturalWidth and naturalHeight options.

Nick-lab commented 6 years ago

i think you meant mirrorSellector :)

Nick-lab commented 6 years ago

well they are there its just not catching the scoll

wstoettinger commented 6 years ago

it's mirrorContainer in the v1.5 release and mirrorSelector for v2 alpha. Could you post or pm me a link of your implementation?

Nick-lab commented 6 years ago

yea here is the development link http://smi.swdlab.com/ the background that was going to be parallaxed is the one with the orange splash I removed the links and implementation atm as i was just going to make them fixed backgrounds but if you can assist me i would love you forever :) i suppose i'm only having issues with it as i dont know how the code works and i'm pretty amateur with js

Nick-lab commented 6 years ago

didn't have an issue implementing it on one of my simple sites just got it up and going on a ticket sales site and it looks beautifull.

wstoettinger commented 6 years ago

is just pushed a new commit to the alpha branch which should implement the desired functionality.

Have a look at those two options:

  mirrorSelector: 'body',
  scrollingSelector: null,

you can set them both to #body-container in your case.

if you also change 

<div class="background img marg-pad">
  <div class="background-img offset-top">
    <div class="parallax-bg splash"></div>
...

to:

<div class="background img marg-pad parallax-window">
  <div class="background-img offset-top parallax-slider">
        <div class="parallax-bg splash"></div>
...

you should be able to initialize the parallax with: 

$('.parallax-window').parallax({
    mirrorSelector: '#body-container',
    scrollingSelector: '#body-container'
});

please note that mirrorSelector can change for each window while scrollingSelector is set for all parallax windows when it is encountered the first time.

I hope that helps!

Nick-lab commented 6 years ago

OMG thank you so much 0_o you are the coolest dude ever. going to go try it now

Nick-lab commented 6 years ago

absolutely brilliant thank you so much 👍

wstoettinger commented 6 years ago

:blush: :smile: good to hear that it's working! please let me know, if you encounter any problems with the v2! especially when it comes to browser support and performance issues in different browsers!

Nick-lab commented 6 years ago

will do ill keep testing it on other sites as well. one of these days i might add some to it as well :)