It's hard to explain the effect I want and the only place I have seen this navigation so far is on the tumblr login/home page: https://www.tumblr.com/
It scrolls down a section on mouse scroll similar to this: http://alvarotrigo.com/fullPage/ but manages to miss out the sections in between anchors when the dot navigation is used. So using the navigation you can scroll straight from dot 1 to dot 5 without scrolling past dot 2, 3 and 4. And it maintains the scrolling effect rather than jumping down to the 5th anchor.
I'm not sure whether it would be best to try and load the content of the next div/iframe dynamically depending where the user is on the site or have all the divs laid out and just move them around with css depending on where the user is currently on the site.
If anyone has any ideas that would be great, thanks for your time
As suggested by #Barbara Laird, you should be using pagePiling.js to achieve that same effect.
Related
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
i'm having a real hard time implementing ScrollMagic Section Wipes and smooth scroll to anchors. The thing is i can use the links to scroll down but not up! I can imagine this happens because the underlying sections are stuck at top and there is really nothing to scroll to.
I have an example of what i mean in: http://www.globovac.net/scroll
In this example, if i click "UNITS" i get a blue section, that's perfect. I need to click "HOME" and the blue section goes down and shows the first green one again.
Can someone help me, i would really like to implement ScrollMagic but it's useless without a proper menu. Thank you all in advance!
EDIT:
What i basically would like to do is a combination of this anchor navigation:
codepen.io/grayghostvisuals/pen/EtdwL
with this Section Wipes example:
http://scrollmagic.io/examples/basic/section_wipes_natural.html
How hard can this be?...
Does anybody knows how to implement horizontal scrolling on event? I am trying to replicate this functionality: http://www.spotify-valentines.com/#/home
First, it scrolls fullpage to the right. Then, it scrolls half way to the right. Then it scrolls full page, also to the right, and finally it becomes a normal screen with vertical scrolling.
The site seems to be built with Angular, but I am not sure how this functionality is accomplished.
Thanks!
It can be accomplish by using fullPage.js.
Just create a single section with multiple slides in. Then you can create your custom buttons and associate them with the action $.fn.fullpage.moveTo() or $.fn.fullpage.moveSlideRight() or $.fn.fullpage.moveSlideLeft().
I created a site with a top navigation bar that has hyperlinks to anchors in the same page for different content.
I'm trying to create a hover effect on the navigation bar when a user scrolls past the corresponding anchor in the same page. For example, when I scroll past link1's anchor, I want the top navigation hyperlink for link1 to change to a different color.
I tried searching Google but can't find anything relevant to do this.
Can someone point me in the right direction or provide some code examples for how I might do this using HTML/CSS/Jquery/Javascript, etc?
Sounds like you want a ScrollSpy plugin.
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?