Add a "cooldown" to this Javascript that is triggered by mousewheel - javascript

I'm working with a Squarespace theme and ran into a little bit of an experience I was hoping y'all may be able to help me fix.
The page has a series of images that scroll horizontally. By default, scrolling does nothing. The below code was provided on the forums to make the scroll control the images by clicking the left or right arrows.
I was wondering what the best and most efficient way to add a simple "cooldown" effect to the function so that there is full delay before the next scroll.
Currently, the scroll just cycles through 3 or four and is very sensitive. I feel that would annoy users.
Thank you in adv for any help. Here's the page in question: http://nicpadula.com/brand-design
<script>
$(function() {
$("body").mousewheel(function(event, deltaY) {
if (deltaY > 0){
$(document).ready(function()
{
$("div.arrow-wrapper.left").click();
});
}
else if (deltaY < 0){
$(document).ready(function()
{
$("div.arrow-wrapper.right").click();
});
}
});
});
</script>

Related

Run jQuery/Javascript Function w/GSAP only once?

I have a function that scrolls down/snaps to a div after the user starts to scroll (to avoid them having to manually scroll down to where the main content starts). I have used some GSAP to achieve this, however I don't think that will make much difference with the solution to this problem. However, while this function does exactly what I'd like, It won't then allow the user to scroll back up. It just glitches a little bit, as if I'm fighting with the function to scroll back up. I've tried a variety of answers from all the "run only once questions" on here, but none seem to work in this situation.
I want to basically kill the function after the first time it is initiated, or to tweak the function to only work on the first scroll at the top of the page (though I appreciate this would be much more complicated).
Thank you in advance of any help.
JS:
$(window).scroll(function () {
function headScrollToDiv() {
var dHeight = $(window).height();
if (dHeight >= $(this).scrollTop()) {
gsap.to(window, 0.4, { scrollTo: ".buffer" });
}
}
headScrollToDiv();
});

Make web menu smart, animation / viewport / on scrolling

I just started to do a new website, all things works great but I was not able to make a good menu:
I want an animation which always start when I go up and the menu changes, but its not working very fine, because I need this animation every time I go back up.
Thats the first problem, the second problem is about an Eventhandler I want to use for the different menus, because when I scroll the menu goes a little bit smaller and up again it is bigger. But when I scroll and then make a reload the menu returns to the big one altough Im not up again.
The last problem is about the browser width, I want that the scripts are running if the viewport is big enough otherwise it shouldnt run.
The menu I've created is a bit like the page of Oxford: https://ox.ac.uk
$(document).ready(function() {
$(document).on("scroll", function() {
if ($(document).scrollTop() > 120) {
$(".header").addClass("small");
$("#logo").css('display', 'none');
$(".site-table").css('display', 'none');
$("#b1-scroll").css('display', 'block');
$(".site-nav").css('top', '14px');
$(".site-nav").css('left', '25px');
$(".second-site-nav").css('top', '28px');
$(".second-site-nav").css('right', '85px');
} else {
$(".header").removeClass("small");
$("#logo").css('display', 'block');
$(".site-table").css('display', 'block');
$("#b1-scroll").css('display', 'none');
$(".site-nav").css('top', '50px');
$(".site-nav").css('left', '175px');
$(".second-site-nav").css('top', '100px');
$(".second-site-nav").css('right', '20px');
}
});
});
If its possible i want all the code running in this file.
I Hope you guys can help me with this problems altough they are quit difficult!
Thanks!
I think you are looking for a technique called 'Affix'! Check this out:
https://www.w3schools.com/bootstrap/bootstrap_affix.asp (A bootstrap implementation)! Let me know if it is want you want!

Revolution Slider - Advance once per mouse scroll

EDIT: Revolution Slider recently updated to Version 5 which by default supports mouse scrolling between slides without the need for additional javascript by the user and I've found it to work flawlessly.
Original Question:
I'm using a full screen Revolution Slider and by using the code found on the developers site I've managed to get the slides to advance using a mousewheel scroll.
The problem is that the slider is advancing more than one slide at a time depending on how much the user scrolls. I need the slide to only scroll once per mousewheel event. I tried using the solution found here but couldn't get it to work: Removing event after one scroll
I'm very new to Javascript so any help is much appreciated.
Here is the code I am currently using
(function() {
var slider = revapi1;
slider.parent().on('mousewheel DOMMouseScroll', function(event) {
if(event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
slider.revprev();
}
else {
slider.revnext();
}
});
})()
revprev() and revnext() is where moves happen.
Deeper you should find something like speed, steps_length...

Infinite Scroll Effect with javascript

anyone have a clue how to make a sroll effect like this?
http://www.eurekasoft.com
I know the content is repeated at the end to create the illusion but i would like to know how to achieve the seemingly never end scroll.
Thanks!
It appears that site is using Skrollr: http://prinzhorn.github.io/skrollr/
Scroll all the way down for links to the Github and more examples.
Deep down, it is using the function window.scrollTo() to set the scroll position, and probably setting DOM around that area so that it looks the same as where it was scrolled from.
https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L617
This works for me :)
here is the example: http://www.cancerbero.mx (only enable in Chrome and Safari)
// #loop is the div ID where repetition begins
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
var limit = $('#loop').position().top;
if(scroll >= limit){
window.scrollTo(0,1); // 1 to avoid conflicts
}
if(scroll == 0){
window.scrollTo(0,limit);
}
});
});

How to slowly move header while user scrolls the page?

I want to achieve the effect that is used on this Header on this example website:
http://anchorage-theme.pixelunion.net/
You will notice that as you scroll the page, the header slowly moves upward until it disappears from view. I want to achieve this same effect. I believe it will need some JS and CSS positioning but still have no clue how to achieve this. Is this done with parallax scrolling?
Would appreciate if someone could give me a quick example of the code used to do this with a element. So I can then use it on my own site.
Cheers.
the $(window).scroll(function () {...}) is the one you need here
$(document).scrollTop() is the amount of scrolled distance from the top
Use this:
$(window).scroll(function(){
if ($(this).scrollTop() > x){ // x should be from where you want this to happen from top//
//make CSS changes here
}
else{
//back to default styles
}
});

Categories

Resources