fancyScroll

I seems have found the problem, check my email.

Thank you flGravity to help me, the problem is going to be fixed with new version of the script, isn’t it? now it works with all browsers with no problems he is very friendly and helpful and he fixed all what i have asked…great experience!!! i ll remember you!

Thanks for question! Setting “offset” attribute to 0 will sync “fancyscroll-background” with actual scroll, if you meant this

yes! “offset” attribute that set for “fancyscroll-background” div affects background-image position, not position of div element itself

Hi, first of all you need to avoid setting initial background position with ‘left’ or 50% for fancyscroll-background divs, use only pixels. If that is not the case, I need to see your work in action to get better understanding of the problem.

Thanks! I never worked with parallax. But as far as I know in parallax animation is based on changing background-position property depending on page scroll. My plugin works a bit differently. First of all it allows to configure “offsets” for backgrounds. The result is that backgrounds move with different speeds and possibly in different directions. Along with this my plugin allows assign click listeners to elements (like menu items) and make them scroll page to the specific position applying easing. The combination of these two effects is what you see in preview : )

make sure browser finished loading page, because plugin init code start only when everything is loaded including images. Thanks!

I just uploaded new update to fancyScroll plugin and tested it in IE7 ,8 and it works fine for me. What I would recommend you is to clear browser cache, and then reload page and wait until it is completely loaded.

The purpose of my plugin is to create composed background animation when page is being scroll, but if you are interested only in “TOP” button, then first of all you need to create a long page (to have something to scroll), then activate my plugin with this code:

window.onload = function(){
    new fancyScroll({
       easingFunction: 'easeInOutCubic',
       easingTime:1200,
       topButtonText: 'Top',                        //topButton text
       topButtonClass: 'fancyscroll-topButton',     //topButton class
       topButtonShowAfter: '0px',                   //show topButton only after scrolling N pixels
       topButtonTarget: document.body,                //anchor element for topButton (DOM element or ID)
      topButtonHash: '#/',
       });
};

There is no need to create any markup. Just activate plugin and that’s all you need.

Thanks!

I didn’t notice any problems in safari. But below are some guideline how you can improve its performance.

Basically this script is already optimized for performance as it’s written in pure JS without any unnecessary code what can slow it down. You have few options, however. First of all, to make it work smoother you can try images with lower resolution. The smaller the size the faster browser will render it. This is very important to know if you have a lot of animated background images. Also you can increase easing(animation) time to give browser additional time to render images before their position will change again.

Hi!

Make sure you have used addScroll() method to add click handlers to the links in menu. Please read in documentation how to do this.

To do this you need to write your own JS code that would add class to the menu item when you click it. This is merely a few lines of code.

I don’t know how can i do this? Please help me.

Do you use a menu from my example page or have own menu?

Here is jQuery code that works with UL list. It adds “menu-active” class to the LI element when link inside is clicked.

$('#mainmenu a').click(function(){    
    $(this).parent().addClass('menu-active').
    siblings().removeClass('menu-active');
});

replace ”#mainmenu” with any other ID of UL list. See http://jsfiddle.net/qAsmM/1/

Yes, it’s maybe works but don’t for mousewheel. You support via email?

yes. I do.

The code’s already optimized for best performance, however if you use a lot of high-resolution images such problem can arise.

Ok. That’s odd. I’m just using the green boxes that came with the demo. It did get better on the iPhone and iPad when I adjusted the “easingRate”, but then Chrome (Mac) didn’t like that.

I also noticed that the navigation is a little buggy on the iPad … After clicking on “page 2” or “page 3”, I need to manually scroll to the top before the links work again. Have you noticed that? Wondering if there is anything I can do to patch that. This is just happening on the iPad, not iPhone.

Not the end of the world, but I’d like to polish it up if possible. Any insight would be great!

Thanks!

Navigation in demo is not a part of fancyscroll plugin, you should create your own navigation and then use my plugin API to link site sections to menu items. In documentation I explain how to do this. Regarding performance I can add that this plugin mainly targets on desktop browsers rather than mobile devices with limited resources.

My plugin works a bit differently. It uses long page with sections, where every section has some content and a background. The background is animated with the plugin what makes it move faster/ slower as main content.

Thanks! I corrected it.

Great! Is there any documentation showing how to do this?

Yes, documentation comes with the plugin

Great! Bought!

.fancyscroll-content {
 width: 50%;
 left: 0;
 right: 0;
 margin: 0 auto;
}

Hello! Fancyscroll is content scroller plugin it does not load pages or content.

use low resolution images what will speed up things