Scrolling 100vh sections on mouse scroll

935
March 05, 2017, at 1:13 PM

This is a general question, but I'm trying to find some code examples and the term used for this type of behavior and how to implement it.

Example: https://pixelheads.nl/

Each section is fully scrolled into view on scroll.

Answer 1

Looking to the javascript of the example, we can see that the page works with all the elements, one after the another, but when he puts the command overflow:hidden; the page not shows the scroll bar.

To give the effect for all the pages, there is an effect "translate3d" and the page "scrolls". To show the second page:

transform: translate3d(0px, -622px, 0px);

For the third:

transform: translate3d(0px, -1244px, 0px);

I dont found the command into the page to get the mouse wheel, but you can put a event that will be fired when you scroll the page.

$("body").bind("mousewheel", function(e)
{
    var delta = e.originalEvent.wheelDelta; // give you the direction
    // here you apply the transform on the page.
});

I'm not sure if this example page is using any framework, but i found this question that can help you, if you dont want to do from the beginning. The library mencioned at this question is the same as Michael Coker commentary (alvarotrigo.com/fullPage).

scroll a full page height up or down with jQuery/Javascript

I know that the response is not complete, but can give you some directions.

Rent Charter Buses Company
READ ALSO
JQuery Scroll Event keeps firing when you scroll more

JQuery Scroll Event keeps firing when you scroll more

So I have a scroll event that fires when the user scrolls to a certain point on the siteIt works until you hit that point and want to keep scrolling, then it will fire continuously with every single scroll

447
How to implement emoji in textarea similar to gmail and facebook

How to implement emoji in textarea similar to gmail and facebook

How would I go about this? Are they images? How can I make it so that when the user types ':D' it turns into a face emoji? A general explanation would be greatI have no idea how you can put images in textareas

450
create table dynamically and merge cells and rows html jquery

create table dynamically and merge cells and rows html jquery

i want code or demo of create table dynamically and merge cells and rows html jquery

476
Jquery range-slider which changes the content of a span element when the value changes

Jquery range-slider which changes the content of a span element when the value changes

I am trying to make a jquery range slider for a web hosting website that will change the content of a span element when the range slider moves depending on the valueSo for different values, different content on the span element

334