Geek Answers Handbook

Converting a navigation bar to a fixed header for a horizontal parallax website

The name may seem a little strange, but I will try to explain as best as possible, so that minimization.

I am currently using the FullPage.js plugin with my site to create a horizontal slide effect. Check out the site now to see what I mean. http://carrotcrunchpvp.comule.com/

As you can see, the navigation bar is a click in the middle of the page when you enter where everything is rotated and so on. When I move to the right using the arrow, I want the navigation bar to “click” so that the Ethos link moves to the upper left side, the privacy policy link is adjacent to this (horizontal), and then the path to healing. Then the logo will slide directly up to form the middle of the navigation bar. The Catholic Church NZ will step to the right and next to the logo, contact us, we will correct it a bit on the right, and the page will be delivered in the extreme right position on the navigation panel, which will be located at the top of the page. It will essentially create a title bar navigation

Look at the illustration for a better idea:

enter image description here

Black lines are the path of transformation. However, it is not as simple as it seems, I could do this with CSS3 transformations ...

Now my problems, I'm capable of using CSS, but I lack JQuery and Javascript knowledge. I am not sure how to approach this. This is due to the fact that I want this conversion to happen when you click on the next page on the main page or on one of the other pages with a lot of content. Essentially, it will turn into a fixed header. However, when I return to the main page, you will need to animate back to the original navigation bar ...

How would you do that? This is the task that my IT teacher made me do during the holidays, and I'm struggling to figure out how to logically do this.

- , , , , . , , - , - IMO...

+4
1

fullPage.js, afterSlideLoad afterSlideLeave.

javascript, , fullPage.js fp-viewing-xxxx body.

.

  • .
  • fp-viewing-horizontal-1
  • fp-viewing-horizontal.

css - :

body .menu,
body.fp-viewing-horizontal .menu{
  //your home menu styles/animations
}

body.fp-viewing-horizontal-1 .menu,
body.fp-viewing-horizontal-2 .menu,
body.fp-viewing-horizontal-3 .menu,
body.fp-viewing-horizontal-4 .menu,
body.fp-viewing-horizontal-5 .menu,
body.fp-viewing-horizontal-6 .menu,
body.fp-viewing-horizontal-7 .menu{
  //your fixed menu styles/animations
}
0

More articles:


All Articles