I want to achieve such a function as paragraph sliding (I don't know how to explain paragraph sliding)
So I just put it on the website for you to see
(It may take a while to enter)
https://grayraven.tw/
Like this one after another
I tried to write it myself, but there was no response after I wrote it
Below is my code
var mousewheel = (/Firefox/i.test(navigator.userAgent)) ?
"DOMMouseScroll" : "mousewheel";
var IDK = 1
slide.addEventListener(mousewheel,
function (e) {
if (e.wheelDelta > 0 || e.detail < 0) {
IDK + 1
$("html,body").animate({scrollTop: $("#" + IDK ).offset().top}, 1000);
} else {
if(IDK=1){
console.log("NO")
}else{
IDK - 1
$("html,body").animate({scrollTop: $("#" + IDK ).offset().top}, 1000);
}
}
}, false);
If you can tell me how to write, thank you very much
My English is not very good, please forgive me
Did you mean this?
//Set each section's height equals to the window height
$('section').height($(window).height());
/*set the class 'active' to the first element
this will serve as our indicator*/
$('section').first().addClass('active');
/* handle the mousewheel event together with
DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
e.preventDefault();//prevent the default mousewheel scrolling
var active = $('section.active');
//get the delta to determine the mousewheel scrol UP and DOWN
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
//if the delta value is negative, the user is scrolling down
if (delta < 0) {
//mousewheel down handler
next = active.next();
//check if the next section exist and animate the anchoring
if (next.length) {
/*setTimeout is here to prevent the scrolling animation
to jump to the topmost or bottom when
the user scrolled very fast.*/
var timer = setTimeout(function () {
/* animate the scrollTop by passing
the elements offset top value */
$('body, html').animate({
scrollTop: next.offset().top
}, 'slow');
// move the indicator 'active' class
next.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
} else {
//mousewheel up handler
/*similar logic to the mousewheel down handler
except that we are animate the anchoring
to the previous sibling element*/
prev = active.prev();
if (prev.length) {
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop: prev.offset().top
}, 'slow');
prev.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
}
});
body, html {
margin:0;
padding:0;
overflow:hidden;
}
section {
height:100vh!important;
font-size:30px;
display:flex;
justify-content:center;
align-items:center;
color:white;
}
.bg1{background-color:#FAAD80;}
.bg2{background-color:#FF6767;}
.bg3{background-color:#FF3D68;}
.bg4{background-color:#A73489;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="bg1">First</section>
<section class="bg2">Second</section>
<section class="bg3">Third</section>
<section class="bg4">Fourth</section>
Related
I have a section based on scrolling. The idea is that you scroll you travel from 1 to 2 to 3 then you progress to the next section.
All works fine except 1 glitch - if mouse does not move and only the wheel is used, after the 1,2,3 is over, the scrolling stops working and does not allow to scroll further downwards and same happens for the upwards.
I've checked and found some articles explaining that it can be a Chrome issue because it works fine for me on Edge, Safari. I see this issue only in Chrome.
Any ideas would be appreciated.
Here is my fiddle where you can see it in action.
jQuery(document).ready(function($){
var $container = $('#scrolling-container'),
top = 0,
lastScrollTop = 0,
proceedFlag = true;
var scroller = function(event) {
top += $container.height() * (($(this).scrollTop() > top) ? 1 : -1);
var firstBarItem = jQuery(".bf-content:first-child");
if (top == 0 || top <= lastScrollTop){
// upscroll code
var previousBarItem = jQuery(".bf-content.active").prev();
if(previousBarItem.length && previousBarItem.hasClass('bf-content')){
jQuery(".bf-content.active").removeClass('active');
previousBarItem.addClass('active');
}else{
jQuery('html, body').stop().animate({'scrollTop': jQuery(".top-section").offset().top}, 300, 'swing', function(){
var $target = jQuery(".top-section");
$target.focus();
});
}
} else {
// downscroll code
var nextBarItem = jQuery(".bf-content.active").next();
if(nextBarItem.length && nextBarItem.hasClass('bf-content')){
jQuery(".bf-content.active").removeClass('active');
nextBarItem.addClass('active');
}else{
jQuery('html, body').animate({'scrollTop': jQuery(".bottom-section").offset().top}, 150, 'swing', function(){
var $target = jQuery(".bottom-section");
$target.focus();
});
}
}
lastScrollTop = top;
if(proceedFlag){
$container.stop().animate({scrollTop: top}, 300, 'swing', function() {
$(this).clearQueue().one("scroll", function() {
$(this).one("scroll", scroller);
jQuery('html, body').stop().animate({'scrollTop': jQuery("#scrolling-container").offset().top}, 300, 'swing');
jQuery("#scrolling-container").focus();
});
});
return;
}
}
$container.one("scroll", scroller);
});
I'm trying to get the correct scroll direction via jQuery's "scroll" event.
For this, I'm using the solution here: https://stackoverflow.com/a/4326907/8407840
However, if I change the direction of my scroll, the offset returned by scrollTop is incorrect on the first time. This results in the following behavior:
Wheel down -> down
Wheel down -> down
Wheel up -> down
Wheel up -> up
Wheel down -> up
Wheel down -> down
... and so on, I think you get it.
var ACTIVE_SECTION = null;
var ANIMATION_DURATION = 700;
$(document).ready(function() {
ACTIVE_SECTION = $("section:first-of-type").get(0);
var prevPosition = $(window).scrollTop();
$(window).on("scroll", function() {
doScrollingStuff(prevPosition);
});
});
function doScrollingStuff(prevPosition) {
var ctPosition = $(window).scrollTop();
var nextSection = ACTIVE_SECTION;
// Remove and re-append event, to prevent it from firing too often.
$(window).off("scroll");
setTimeout(function() {
$(window).on("scroll", function() {
doScrollingStuff(prevPosition);
});
}, ANIMATION_DURATION + 100);
// Determine scroll direction and target the next section
if(ctPosition < prevPosition) {
console.log("up");
nextSection = $(ACTIVE_SECTION).prev("section").get(0);
} else if(ctPosition > prevPosition) {
console.log("down");
nextSection = $(ACTIVE_SECTION).next("section").get(0);
}
// If a next section exists: Scroll to it!
if(typeof nextSection != 'undefined') {
var offset = $(nextSection).offset();
$("body, html").animate({
scrollTop: offset.top
}, ANIMATION_DURATION);
ACTIVE_SECTION = nextSection;
} else {
nextSection = ACTIVE_SECTION;
}
console.log(ACTIVE_SECTION);
prevPosition = ctPosition;
}
section {
width:100%;
height:100vh;
padding:60px;
box-sizing:border-box;
}
section:nth-child(1) { background:#13F399; }
section:nth-child(2) { background:#14FD43; }
section:nth-child(3) { background:#4EE61E; }
section:nth-child(4) { background:#BEFD14; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="sect1">Section 1</section>
<section id="sect2">Section 2</section>
<section id="sect3">Section 3</section>
<section id="sect4">Section 4</section>
Here's a pen, where you can see my implementation: https://codepen.io/EigenDerArtige/pen/aVEyxd
I am trying to accomplish an autoscroll to the next or previous section, whenever the user scrolls or swipes up/down... Therefore I only fire the "scroll"-event once every second, to prevent multiple scrolljacks all happening at once... However the above behavior seems to result in the user being scrolled to the wrong section.
I've been trying for a couple of hours now to get it working, but to no avail. Help is greatly appreciated!
The problem lies in the assignment prevPosition = ctPosition.
Each time the scroll handler runs, var ctPosition = $(window).scrollTop(); is good for determining scroll direction, however it's not the value that should be rememberad as prevPosition.
prevPosition needs to be $(window).scrollTop() as measured after the animation has completed.
Try this :
$(document).ready(function() {
var ANIMATION_DURATION = 700;
var ACTIVE_SECTION = $("section:first-of-type").eq(0);
var prevPosition = $(window).scrollTop();
$(window).on("scroll", doScrollingStuff);
function doScrollingStuff(e) {
$(window).off("scroll");
var ctPosition = $(window).scrollTop();
var nextSection = (ctPosition < prevPosition) ? ACTIVE_SECTION.prev("section") : (ctPosition > prevPosition) ? ACTIVE_SECTION.next("section") : ACTIVE_SECTION; // Determine scroll direction and target the next section
// If next section exists and is not current section: Scroll to it!
if(nextSection.length > 0 && nextSection !== ACTIVE_SECTION) {
$("body, html").animate({
'scrollTop': nextSection.offset().top
}, ANIMATION_DURATION).promise().then(function() {
// when animation is complete
prevPosition = $(window).scrollTop(); // remember remeasured .scrollTop()
ACTIVE_SECTION = nextSection; // remember active section
$(window).on("scroll", doScrollingStuff); // no need for additional delay after animation
});
} else {
setTimeout(function() {
$(window).on("scroll", doScrollingStuff);
}, 100); // Debounce
}
}
});
i am searching for a slider which should change the slides vertically on scroll.
This is the refrence Url : https://www.uber.com/ The Mobile slider
Please help me,i am trying to do this since7,8 hours.
this is the code i am trying to use.
$(document).ready(function() {
// var totalheight=$(window).height();
// $('.carosel-section').css('height',totalheight);
//Set each section's height equals to the window height
//$('.moveable').height($(window).height());
$('.moveable').first().addClass('active');
$('.carousel-wrap').on('mousewheel DOMMouseScroll', function (e) {
e.preventDefault();//prevent the default mousewheel scrolling
var active = $('.moveable.active');
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
if (delta < 0) {
//mousewheel down handler
next = active.next();
if (next.length) {
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop: next.offset().top
}, 'fast');
// move the indicator 'active' class
next.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 100);
}
} else {
prev = active.prev();
if (prev.length) {
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop: prev.offset().top
}, 'slow');
prev.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
}
});
});
Have you tried looking at Parallax.js? I think that is what you are looking for. The examples on the main page should give you a quick start!
When the mousewheel is scrolled on the body of a page this event can be captured. I'd like this event to trigger a target element to scroll.
#target is a scrollable element that is never the height of the page. I'd like to capture the mousescroll event anywhere on the page so even if the cursor is not over the element the element still scrolls.
$( 'body' ).on( 'DOMMouseScroll mousewheel', function () {
// Scroll #target instead of body
});
Thanks to this post for showing me how to capture scroll wheel events: Capturing Scroll Wheel Events
You can have a look at this.
http://jsfiddle.net/ZtGva/7/
JS
$(function () {
var myCounter = 0,
myOtherCounter = 0;
var scroll = 0;
$("#target").scroll(function () {
myCounter = myCounter + 1;
$("#log").html("<div>Handler for .scroll() called " + myCounter + " times.</div>");
});
//Firefox
// $(document).bind(...) this works as well
$('#body').bind('DOMMouseScroll', function (e) {
if (e.originalEvent.detail > 0) {
scrollDown();
} else {
scrollUp();
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('#body').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta < 0) {
scrollDown();
} else {
scrollUp();
}
//prevent page fom scrolling
return false;
});
function scrollDown() {
//scroll down
console.log('Down ' + scroll);
if (scroll < $('#target').find('div').height() - $('#target').height() + 20) {
scroll = $('#target').scrollTop() + 5;
$('#target').scrollTop(scroll);
}
};
function scrollUp() {
//scroll up
console.log('Up ' + scroll);
if (scroll > 0) {
scroll = $('#target').scrollTop() - 5;
$('#target').scrollTop(scroll);
}
};
});
Note I added a div for height calculation
<div id="target"><div>.... </div></div>
You can clean up this code a bit by caching some jquery variables but the idea is there
Im trying to make 2 buttons, one called "up" and one called "down".
Those should when I hold down my mouse on one of them, it should scroll up or down the whole page.
I tried with this code, but it didn't worked well.
Up
down
<script>
$(document).ready(function() {
$("#down").hover(function () {
scroll_page("down");
}, function() { $('.content').stop(); });
$("#up").hover(function () {
scroll_page("up");
}, function() { $('.content').stop(); });
});
function scroll_page(direction) {
var scrolled = $(window).scrollTop();
if (direction == 'up') {
var scroll = scrolled + 100;
}else{
var scroll = scrolled - 100;
}
$("html, body").animate({ scrollTop: scroll }, "fast");
}
</script>
Does anyone have any ideas what to do?