Jump to content
Search Community

Scroll to div on mouse scroll up/down

tun712 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Need help to scroll when mouse wheel is used. Scroll Up or Down as per mouse action.
I'm trying to create  moveUp() &   moveDown() function,  to scroll according mouse wheel action
On scroll, remove class of current div :- .active and add class :- .active to scrolled div (div in viewport), by default first div has class .active.

See the Pen zXZKYN by tun712 (@tun712) on CodePen

Link to comment
Share on other sites

8 hours ago, tun712 said:

code is not working with jquery-3.4

 

That demo was made 5 years ago and uses an old version of jQuery. Lots of things have probably changed in that time and it would be beyond the scope of the GreenSock forum to hunt down the differences.

 

8 hours ago, tun712 said:

  how to hide previous - next arrows for first & last slide?

 

You'd need to add some logic to see if you're on the first or last slide. If on the first, you can set or tween the opacity of the left arrow to 0. If on the last, you'd do the same to the right arrow.

 

8 hours ago, tun712 said:

How to animate even & odd elements on scroll complete?

 

You'd need a listener to check when the slide is in position and then play a tween/timeline. To alternate even and odd, check out the cycle property of staggers.

https://greensock.com/docs/TimelineMax/staggerFrom()

 

Happy tweening.

  • Like 1
Link to comment
Share on other sites

Hi @tun712,

 

As @PointC mentioned its an 'old' example.

 

But there are 'helpers': https://github.com/jquery/jquery-migrate/#usage

 

NOTE: To upgrade to jQuery 3.0, you first need version 1.12.x or 2.2.x. If you're using an older version, first upgrade to one of these versions using jQuery Migrate 1.x, to resolve any compatibility issues. For more information about the changes made in jQuery 3.0, see the upgrade guide and blog post.

 

Best regards

Mikel

 

 

  • Like 1
Link to comment
Share on other sites

@ Mikel

 

Hey Mikel,

Thanks a lot,  you tried with jquery 3.4. I've not tested it  with my code yet, but I'll check it.

 

I was working with your previous code for Horizontal slider

Is it possible to help  with this?

 

https://codepen.io/anon/pen/ZZrvVR

Link to comment
Share on other sites

@both Thanks ! ?

Horizontal is not tried yet, working on vertical. It's working with  jquery 3.4

 

But I've little problem, I'm unable to add or remove class active to nav li a 

 

var  $navButtons =   $("ul.nav li a").filter("[href^=#]");  this is not working for me. Below is my code to add navigation, please check

 

	var navList = "";

	$(".slide").each(function (i) {		
		navList += "<li><a href='#" + (i + 1) + "' class='slide-" + (i + 1) + "'></a></li>";
	});

	if ($('ul.nav').length < 1) {
		$("<ul class='nav'></ul>").prependTo($(".slides-container").parent());
	}
	
	$('ul.nav').html(navList);

	$("ul.nav li a").on('click', function (e) {
      e.preventDefault();
    });

 

 

 

Now I've little simplified scrolling code to find out problem, please check below

 

var $window = $("section");
var $navButtons = $("ul.nav li a");
var $slidesContainer = $(".slides-container");
var $slides = $(".slide");
var $currentSlide = $slides.first();	
//Animating flag - is our app animating
var isAnimating = false;
//The height of the window
var pageHeight = $window.innerHeight();
//Going to the first slide
goToSlide($currentSlide);
/**Adding event listeners**/
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
/**When user scrolls with the mouse, we have to change slides**/
function onMouseWheel(event)
{
  //Normalize event wheel delta
  var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;
  //If the user scrolled up, it goes to previous slide, otherwise - to next slide
  if (delta < -1)
  {
    goToNextSlide();
  } else
  if (delta > 1)
  {
    goToPrevSlide();
  }
  //event.preventDefault();
}
/**If there's a previous slide, slide to it**/
function goToPrevSlide()
{
  if ($currentSlide.prev().length)
  {
    goToSlide($currentSlide.prev());
  }
}
/**If there's a next slide, slide to it**/
function goToNextSlide()
{
  if ($currentSlide.next().length)
  {
    goToSlide($currentSlide.next());
  }
}
/**Actual transition between slides**/
function goToSlide($slide)
{
  //If the slides are not changing and there's such a slide
  if (!isAnimating && $slide.length)
  {
    //setting animating flag to true
    isAnimating = true;
    $currentSlide = $slide;	 
	  
	//Sliding to current slide
    TweenMax.to($slidesContainer, 1, { scrollTo: { y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this });   
	TweenMax.fromTo(".title span:nth-child(even)", 1, {y: "50%",opacity: 0}, {ease:SlowMo.ease.config( 0.4, 0.4),y: "0%",opacity: 1});
	TweenMax.fromTo(".title span:nth-child(odd)",1, {y: "-50%",opacity: 0}, {ease:SlowMo.ease.config( 0.4, 0.4),y: "0%",opacity: 1}); 	
  }
}
/**Once the sliding is finished, we need to restore "isAnimating" flag. You can also do other things in this function, such as changing page title**/
function onSlideChangeEnd()
{
  isAnimating = false;
}

 

 

Is it possible to convert nav li a into, 

<div  class="nav">

      <div  class="slide-1">Slide 1</div>

      <div  class="slide-2">Slide 2</div>

      <div  class="slide-3">Slide 3</div>

      <div  class="slide-4">Slide 4</div>

</div>

 

Link to comment
Share on other sites

@both Thanks ! ?

 

Horizontal scroll is working with jquery 3.4.   Need little help to add prev & next button for both  horizontal demo. My code is not working,

 

$(".btnPrev").on('click', function(e) {
    e.preventDefault();
    goToPrevProject();
    if (?????) {
        $(".btnPrev").addClass("hide");
    } else {
        $(".btnPrev").removeClass("hide");
    }
});
$(".btnNext").on('click', function(e) {
    e.preventDefault();
    goToNextProject();
    if ((?????)) {
        $(".btnNext").addClass("hide");
    } else {
        $(".btnNext").removeClass("hide");
    }
});

 

Link to comment
Share on other sites

It's difficult to continue offering assistance and troubleshooting your project without a demo and just looking at a pasted wall of code.  It's usually best to fork your own demo each time you have a new question so anyone helping you can see the progress you've made on your own. It also should not be your whole project. Just enough to demonstrate the problem/question. 

 

Thanks.

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

hello, 
I am totally new here so sorry if this is off topic but I saw this is kinda related to sliding and stuff I am facing this problem which I can't solve. I hope someone can help me. 

Need help to scroll when the mouse wheel is used. I want to have some accordion images and want them to span horizontally by mouse wheel to their 100% width. I have no idea why my code is not working at all.


See the Pen oRvjGr#code-area by nargess-shabani (@nargess-shabani) on CodePen

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...