Snap scroll

Developer
Mikita
Size
2,732 Kb
Views
6,072
  1. Snap scroll Previews
  2. Snap scroll HTML Codes
  3. Snap scroll CSS Codes
  4. Snap scroll JS Codes

How do I make an snap scroll?

What is a snap scroll? How do you make a snap scroll? This script and codes were developed by Mikita on 19 January 2023, Thursday.

Snap scroll Previews
IQ Test

Snap scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Snap scroll</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="full"> <span>section 1</span>
</section>
<section class="long is-1"> <span>section 2</span>
</section>
<section class="long is-2"> <span>section 3</span>
</section>
<section class="short"> <span>section 4</span>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Snap scroll - Script Codes CSS Codes

html,
body { height: 100%; font-family: sans-serif;
}
section { text-align: center; color: #fff; font-size: 0; line-height: 0; vertical-align: middle;
}
section span { font-size: 3rem; vertical-align: middle;
}
section:before { content: ''; display: inline-block; height: 100%; vertical-align: middle;
}
section:nth-child(1) { background: #c54;
}
section:nth-child(2) { background: #5c4;
}
section:nth-child(3) { background: #45c;
}
section:nth-child(4) { background: #c5c;
}
section.full { height: 100%;
}
section.long { height: 1200px;
}
section.short { height: 150px;
}

Snap scroll - Script Codes JS Codes

var body = $("body"), win = $(window), lastScrollTop = 0, pending = false, sections = $('section'), activeSlide = null;
win.on('scroll', scrollHandler);
function scrollHandler(e) { if (pending) return; var scrllTop = win.scrollTop(), winHeight = win.height(), sectionOffset; for (var i = 0, len = sections.length; i < len; i += 1) { sectionOffset = $(sections[i]).offset().top if ( scrllTop >= sectionOffset && scrllTop + winHeight > sectionOffset ) { activeSlide = sections[i]; } } if ( checkDirection(e) === 'down' && scrllTop + winHeight >= $(activeSlide).offset().top + $(activeSlide).outerHeight(true) ) { scrllTo( $(activeSlide).next().offset().top ); } else if ( checkDirection(e) === 'up' && scrllTop < $(activeSlide).next().offset().top && scrllTop + 100 > $(activeSlide).next().offset().top) { scrllTo( $(activeSlide).offset().top + $(activeSlide).outerHeight() - winHeight ); }
}
function checkDirection (e) { var top = win.scrollTop(), result = null; if (lastScrollTop > top) { result = 'up'; } else if (lastScrollTop < top) { result = 'down'; } setTimeout(function(){ lastScrollTop = top; }, 0); return result;
}
function scrllTo(offsetTop) { pending = true; $("html").velocity("scroll", { offset: offsetTop, duration: 500, easing: "linear", complete: function(elements) { pending = false; } });
}
Snap scroll - Script Codes
Snap scroll - Script Codes
Home Page Home
Developer Mikita
Username MikitaLisavets
Uploaded January 19, 2023
Rating 3
Size 2,732 Kb
Views 6,072
Do you need developer help for Snap scroll?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mikita (MikitaLisavets) Script Codes
Name
Loader
Note scales
Particle system
Accordion card
Simple pure CSS3 donut chart
Angular chart directive
Math Trick
Spin menu
Cards Menu
Rollers
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!