Forums

Give help. Get help.

  • # March 22, 2017 at 2:10 pm

    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.

    # March 23, 2017 at 1:14 pm

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

    # March 24, 2017 at 6:36 am

    Demo or it didn’t happen. ;-)

    # March 25, 2017 at 3:00 am

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

    # April 8, 2017 at 3:04 am

    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..(

    # April 11, 2017 at 10:36 pm

    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

    # April 12, 2017 at 12:15 am

    At the end of animation i think would be better.

    # April 12, 2017 at 1:17 am

    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');
    
      ...
    
    });
    
    # April 12, 2017 at 1:39 am

    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?

    # April 12, 2017 at 2:35 am

    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;
    });
    
    # April 12, 2017 at 4:53 am

    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?

    # April 12, 2017 at 7:45 am

    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.

    # April 13, 2017 at 12:15 am

    It was a simple fix…

    codepen.io/ybBdOx

    # April 13, 2017 at 4:57 am

    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?

    # April 13, 2017 at 10:08 pm

    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.

Viewing 15 posts - 16 through 30 (of 51 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag