I'm trying to make a webpage that scrolls horizontally using fullpage.js.
I have the divs set-up and it works perfectly when I click the dot menu or use my keyboard to control it. Now I need it to work with scrolling.
So When I scroll down, I want to go to my 2nd div anchor point (just like it does when I press my right arrow key).
Is this possible in anyway? So far I only found this example but does that mean I have to pay incase I want this functionality or am I missing something?
Just set:
scrollHorizontally: true
In your instantiate function.
You can find all the available properties for fullpage here:
https://github.com/alvarotrigo/fullPage.js#fullpagejs
Edit: updated answer. Misread question.
Related
I know that it is not a very precise question, but I do not know where to start, I have an example which is the objective design, however I cannot find any solution and / or documentation to help me make this type of layout.
More specifically this is the scroll effect that I want to do, http://modern8.com/d5-process/
It should be noted that I have already tried with FullPageJS and I have not been able to recreate it, if you can see the effect consists of applying fixed and relative position according to the scroll but as I indicate, I do not know where to start.
I really appreciate the help you can give me.
The effect is the same as in pagePiling.js but pagePiling.js uses snap scroll so you'll snap to each section. There's no scrollbar.
The closer you can get with fullPage.js is by using the paid Parallax extension with autoScrolling: false (to avoid snap) and placing the whole content of the section inside the fp-bg element.
There's an article about it here.
https://alvarotrigo.com/blog/how-create-tumblr-website-effect/
I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?
Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.
Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)
I'm working with fullPage.js, an amazing scrolling framework.
I need to have the site working like this:
As you can see in the .jpg when the site loads and people click or scroll to the right using the slideshow, there are 4 slides there, when they catch the last one users can only go down. No other behavior is allow.
Now I have this working just for the horizontal line, in the following way:
People can not go back because there is no previous button.
When people get to the last horizontal slide the next button navigation disappear.
Now I need to create another section down and I need that one just works on the last slide numbered as 4 in the jpg. Not allow to pass there in the slide 1, 2 or 3.
Any ideas? How can I do that?
You could disallow the vertical scrolling until the user reach the last slide.
You could use the functions setAllowScrolling and setKeyboardScrolling provided by the plugin together with a callback such as 'afterSlideLoad'.
Thank you so much for reply. I found a solution changing the framework and working with Parallaxjs.
http://stolksdorf.github.io/Parallaxjs/
Very versatile for this purpose. !
I have an array of divs which are dimensionally larger than its container (parent). I have overflow set to hidden on the container and call the JQuery Overscroll on the map to give it the feel of an iPhone http://www.azoffdesign.com/overscroll.
I am having an issue tackling how to implement a tracking arrow for when the user scrolls the array and the center div (home) goes into overflow out-of-sight. When the user scrolls "home" out of view into the overflow region, I would like an arrow to appear at the inside edge of the container and follow it around the edge wherever it goes out of view. It makes sense to me to use an image for the arrow, then rotate it so it points in the correct direction as "home" gets moved around.
Here is my fiddle with the base work > http://jsfiddle.net/virtuapete/QVQ5r/1/
So there are 3 elements to this to make it work properly... the image following "home' as it moves around in overflow, rotation of the image with respect to where home is (so the arrow always points to "home" and then simply hiding the arrow once home becomes visible within the container.
I am pretty sure I have seen this effect before and to begin tackling the issue I started looking up scroll follow techniques since that would be a close 1-dimensional example of this concept. Kind of like a multi-directional scroll follow almost. I have reached the point where I have completely confused myself now and I am def not strong enough in my skills to meld diff code snippets I have found into the desired result yet!
I found a jsfiddle ( http://jsfiddle.net/hj57k ) of something that could be along the lines of what I want, without the div following the object (in that example the cursor) once it has left the container boundaries. Any help would be amazing as i am just stuck on how to get going... getting the div to follow the object around the sides would be a great start and I could probably take it from there...
Have a look: http://jsfiddle.net/green/F8gd4/ or http://jsfiddle.net/green/GpG3U/.
Here is updated fiddle for multi directional scrolling.
Just add four line javascript like this
$(".container").overscroll({
direction: 'auto'
});
Jsfiddle Demo
i am working on a site that scrolls horizontally. before i put the jquery scroll.to plugin in, i have some work that needs to be ironed out with the anchors.
you can see in the example, when you click to go to box 2, it doesn't go to the right location. then when you click back to box 1 or home, it's placed the content flush to the left side.
this is very similar to a previous question, but it's not answered.
You can see this. This is working great. You can see the source code and try. It is using jquery plugin to smooth scroll.
SEE THIS