tun712

Scroll to div on mouse scroll up/down

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

Share this post


Link to post
Share on other sites

Hi @tun712,

 

I really do not understand your intentions.
What should happen to the elements '.pane'?

 

Just for fun - maybe it fits into your concept - here's a forked version of @Shaun Gorneau`s smart version 'pseudo-window' and scroll:

 

See the Pen MRppEb by mikeK (@mikeK) on CodePen

 

 

Happy tweening ...

Mikel

  • Like 3

Share this post


Link to post
Share on other sites

check following link, one page scroll

I'm trying to create something like this, as I have many animations as per clients needs.

 

Go from one section or div to other with single mouse scroll, it may be upwards or downwards .

Share this post


Link to post
Share on other sites

Here's the vertical version of my demo:

See the Pen MzWzyv by PointC (@PointC) on CodePen

 

Maybe that'll give you some ideas. Happy tweening.

 

  • Like 2

Share this post


Link to post
Share on other sites

@both Thanks

 

@mikel   I'm using jquery-3.4.0.min for my other code,

See the Pen JGbBzB by mikeK (@mikeK) on CodePen

code is not working with jquery-3.4

 

 

@PointC  In your

See the Pen YRzRyM by PointC (@PointC) on CodePen

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

 

Using both sliders for my project, thanks.

Share this post


Link to post
Share on other sites

I have 10 <span> elements on each slide. How to animate even & odd elements on scroll complete?

 

For e.g. On scroll complete animate even <span> from top to center & odd <span> from bottom to center

Share this post


Link to post
Share on other sites

It's like following ,

 

<span>H</span>

<span>E</span>

<span>L</span>

<span>L</span>

<span>O</span>

<span>T</span>

<span>H</span>

<span>E</span>

<span>R</span>

<span>E</span>

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thanks

 

Just one problem, how to make it work with jquery-3.4 ?

Share this post


Link to post
Share on other sites

Sorry, I have no idea. As I mentioned, jQuery has probably changed a lot in 5 years. You'd need to go back through that demo and find out which part of the jQuery dependency makes it break when using 3.4.

 

You could also look at converting it to not use jQuery. This site can help with that.

http://youmightnotneedjquery.com/

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi @tun712,

 

Here's a first try with jquery 3.4 ...

 

See the Pen yrPQEX by mikeK (@mikeK) on CodePen

 

 

But you should test it thoroughly!

 

Kind regards

Mikel

 

 

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi @tun712,

 

Here is a modification for a horizontal scroll function:

 

See the Pen eoyrWK by mikeK (@mikeK) on CodePen

 

 

Happy scrolling ...

Mikel

 

 

  • Like 2

Share this post


Link to post
Share on other sites

I just made this as an answer to another forum question, but it may help. It's just a basic starter for full screen slides with a wheel listener. No jQuery necessary. ;)

 

See the Pen EJWpry by PointC (@PointC) on CodePen

 

Happy tweening.

  • Like 1

Share this post


Link to post
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>

 

Share this post


Link to post
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");
    }
});

 

Share this post


Link to post
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

Share this post


Link to post
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.