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?...
Related
I currently have a really great vanilla JS script in place that smooths out the page scroll when the user is scrolling with the mousewheel. (Original script grabbed from here https://stackoverflow.com/a/47206289/9817996)
After adding a scroll to top link using
Scroll to top for simplicity, I have come across an issue where when this link is clicked, the page scrolls to the top then bounces right back to where it was.
Here is a Codepen showcasing the issue: https://codepen.io/kiaramelissa/pen/zYrYbbj
I have also tried creating a scroll to top button using Javascript but it does the exact same thing. I was wondering if anyone could assist with figuring out what is causing this?
I would ideally like to keep my smooth scroll as vanilla JS and not utilise any bulky plugins. Thanks in advance for any ideas!
This code works only when scrolling with the mouse wheel. But there is a problem with it.
update() function is constantly being called when scrolling down (up works ok). This is because moving is always true (delta always > 0.5).
if (Math.abs(delta) > 0.5)
If you put a console.log there you will see it for yourself.
I can't actually understand why the 0.5 is selected as a value, but if you make it 1 it will work for both scroll up and scroll down.
To further see my point, if you leave it as it is (0.5), and try to just scroll a little bit up after you scroll all the way down, you will see that the button works without bouncing back down.
After you make it 1, smooth scroll continues to work for both directions, and when the button is pressed, it stays up.
BUT the scroll to top (with the button) is not smooth! That is expected because your js code only works for mousewheel event, not with the # you used.
Let me just say that if your intention is to have smooth scroll when you press the button, and don't care about the mousewheel, then you will be better off with something like this:
css scroll-behavior or like this javascript scroll anchor without the need of your existing code.
If you want to keep the smooth scrolling when mousewheel is used, then you should use the javascript method from the above link, along side your existing code.
Also one more thing: If you press the button, before the scroll finishes (while easing out) it will jump to top and then it will bounce back where it was. That's expected, as js scroll code doesn't know anything about the button scroll behavior.
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.
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.
my question is about making all of the content on my webpage move when I go through different sections of the site. For example I am in the Home page and click on Contact, all the text,pictures,div tags, etc. should move left and out of the screen and the new info (from Contacts) should move from the right and to the middle of the screen where it should be. Something like a transition on a presentation... I think it should be something simple, but I'd appreciate if someone points me in the right direction. Thanks!
Not simple, but check out jQuery and animate:
http://api.jquery.com/animate/
I'm building a one-page site with the content area as large content boxes stacked down the page.
http://salondoreen.com/lowercasemenu.html
I'm looking for ideas on a way to use javascript to jump to each content box. With a one-page site like this, it takes a lot of scrolling to get to the bottom.
My idea is to somehow make this easier. If you are in one box, and you scroll down just a single click, I want the next box to scroll all the way up the page in one jump. That way the content stays easy and readable, and a box will never be half-on half-off the page. Theoretically you could scroll to the bottom of the page in less than ten clicks.
Does that make sense? I'm thinking of something similar to the home screen on android phones. It jumps horizontally between screens, no matter how little you swipe. There will only be one box on the page at time.
Disclaimer: I am a noob web developer, any and all help is appreciated. Thanks!
I would point you toward binding on the scroll event with jquery .scroll(), and using either IDs via http://myurl.com/derp#scrollhere style of links or use the jquery.ScrollTo plugin