Total Page Scroll Control

[Mottie]

I have a jQuery plugin named visualNav that works well with page blocks that are smaller than the viewport. It also allows you to cancel the scrolling animation on user interaction.

This demo even updates the hash as well as scrolls horizontally with a different easing setting.

Eventually, I’d like to rewrite it in plain JS and use CSS/polyfill for the smooth scrolling.

[Funkaholik]

Actually that .fading effect is fooing with my other transitions that i have .. can’t handle it at all err

[Shikkediel]

Demo or it didn’t happen. ;-)

[Funkaholik]

what was bad about it is that i couldn’t recrate that bug with a pen but i’ve already fixed it .. ))

[Funkaholik]

i’m actually was working with your script on mobile friendly layout
which you can check here or here
And stuck on the very last step – when you’re in mobile view you can click menu and then when you click any of the menu links it should
throw you to the page section and close itself .. but none of my attempts were succesfull..(

[Shikkediel]

Let me reply on the original topic…

throw you to the page section and close itself

Instantaneously or animated? And if case of animation, should the menu close directly or at the animation end? Here’s one approach in any case:

codepen.io/ybBdOx

[Funkaholik]

At the end of animation i think would be better.

[Shikkediel]

I’ve placed the line of code you created (hide visibility of the menu) inside the callback then…

var target = $('.fading'), guide = $('#nav'),

...

$('html, body').animate({scrollTop: destination}, 500, function() {

  if (!guide.hasClass('toggle')) guide.addClass('toggle').removeClass('show');

  ...

});

[Funkaholik]

i’m just thinkin how to kick some extra animations within the page sections
say you scroll to id=”two” it becomes visible by having a class .fading and then some extra anim/trans happens
with inside elements .. which way to choose to run those?

[Shikkediel]

I’d use the callback inside the callback…

$('html, body').animate({scrollTop: destination}, 500, function() {

  if (!guide.hasClass('toggle')) guide.addClass('toggle').removeClass('show');

  if (goal.length) {
    goal.fadeTo(250, 1, function() {
      if (item == '#two') $(item).css('filter', 'blur(2px)'); // this specifically
    });
  }

  pilot = false;
});

[Funkaholik]

You’ve added fx to id but i was talkin’ about inner elements..)
For example how to change color of icons in the end when you scroll to that section or using navbar
Pretty much add some fx to any inner elements of sections and kick them as you focus on that page section?

Maybe make some extra classes with fx’s and add them to inner elements when user focused on id’s?

Ahh don’t pay attemtion to that .. i’ve already figured this

But did you noticed that if you click between neighbor links in the navbar fading fails to start in time?

[Shikkediel]

Yeah, that was just a random effect I added to the earlier pen. You can pretty much do anything you want based on the condition of landing on the specific id itself.

if (item == '#two')

But did you noticed that if you click between neighbor links in the navbar fading fails to start in time?

Not sure what that means, not seeing anything particular myself.
Okay, think I know what you mean.

[Shikkediel]

It was a simple fix…

codepen.io/ybBdOx

[Funkaholik]

Currently thinkin on how to erase jquery fades from js and just run animations in css.
In the previous pens i’ve added animate.css and seems like animations were working as it should
you scroll to a section and transitions happens
But .. i’ve deleted previous pens and in the last few animates.css doesn’t work((
i don’t quite understand why, cdnjs fail or else .. that’s very strange.
Or maybe it’s because of js changes? Whatcha think?

[Shikkediel]

Definitely because of using JS, CSS animation requires changing classes. It would overcomplicate things though, jQuery 3.0 is now using requestAnimationFrame so the performance difference is likely negligible.

[Author]

Posts