Trying to get to parralax scrolling in a very wrong way!

Hi everyone!

I am working on my portfolio and of course so far we only went through the HTML CSS AND JQUERY sections BUT with my ambition and ideas i am jumping the gun and getting myself into something I have never seen before…

What i am trying to accomplish is something like parallax scrolling, navigating through the sections on a single page website through scrolling - example -> LE MUGS I started reading up on JS functions and i am starting to understand them slowly. I am sure there is much simpler way to accomplish what I am trying to do but like i said i just started learning how to code 4 days ago so don’t judge me please :slight_smile:
I am happy how far i got with the knowledge I have but now i am in a stalemate… its not even about the portfolio anymore haha

my questions are:

  1. Why don’t my function “scrollmagnet” stop once it gets through the first “IF”? I tried “break;” but it doesn’t work. It just works through all the else if statements (which all turn true with my var getting +1 on each of them) and i end up on the bottom of the page in a flash.
  2. How can i fix that?
  3. Since there is not a command that is opposite of .scrollTop how do i get my page to scroll back up? I guess the question is how do i know if the user is scrolling up or down?
  4. Once the function is done i want to recall the function again on my next scroll if that makes sense. I wasn’t able to figure that out either, the function gets called once takes me to the bottom of the page and i can scroll freely after that. can i recall a function inside the IF statement?
  5. Whats a good way to accomplish what I am trying to do on my portfolio?
    oh and 6. How do I make the migration from from section to section smooth unlike the instantaneous teleport that’s happening here? (I skipped READ and SEARCH for this last one, I just thought of it)

THANK YOU in advance for taking your time to look this through and deal with my shenanigans i owe you a beer :slight_smile:

Screenshot_1
Here’s the link to my Codepen - EDIT

The example you are trying to follow uses 2 parallax plugins.
They are #2 & #4 in this list https://jqueryhouse.com/12-jquery-parallax-plugins/

I would recommend using one of these for your portfolio.

Thank you for the advice @JohnnyBizzel !

1 Like