joelbesada / scrollpath Goto Github PK
View Code? Open in Web Editor NEWA plugin for defining custom scroll paths.
Home Page: http://joelb.me/scrollpath
A plugin for defining custom scroll paths.
Home Page: http://joelb.me/scrollpath
A+ ~ Joel Beasley
I have a Logitech mouse (Performance MX) with SetPoint installed. SetPoint installs a Chrome extension for "Smooth Scrolling" that seems to interfere with your plugin. I had to disable the "Logitech SetPoint Smooth Scrolling" extension in Chrome and reload the page in order to get things working.
From SetPoint:
From Chrome:
I just tested this on iPad2 with safari and chrome browser. I found far too many issues to consider this usable. Maybe future versions will change this, but I felt it necessary to mention before anyone attempts it.
Feature idea: support pgup, pgdn, home and end keys.
First off, you've done a great job on this, it looks well good.
Have you got any tips to get this - http://dabblet.com/gist/1966261 working without an iframe.
I know it's in the wish list for features and i was wondering if you had made any progress.
For my needs i only need to be able to use one instance on a page, just not on the whole page.
Any ideas?
have to force the scroll bar to show on webkit browsers in colorbox
First, this is an awesome plug-in that I definitely intend on using very soon.
I'd rather not support IE at all, but I always at least check things there. Everything works pretty well except the scrollbar. I haven't been able to get the click/drag to work at all in IE 7/8. Is this intended?
Hi great plugin,
A content of one of my divs is higher than the window so I have done a quick work around when I create another .lineTo(600, 3000, { name: "end"}); to allow for extra scrolling so I can see the rest of the content.
The only problem is the height of my div changes dynamically for cross browsing capability.
is there a way to make 3000 be called from a function? otherwise is there an easier work around allowing user to view all the content of div if is bigger than window size?
Hope this makes sense thanks again for a great plugging.
Hello, how are you?
First of all I'd like to thank and praise your work, it was a great job!
I've been development a website using this pluggin but I have a problem.
I'm trying to use scroll function on page but I can't, anything happens, for example:
$(document).ready(function () {
$(".wrapper").scroll(function() {
alert('test');
});
});
Also I tried to use "$.(window)", other div objects, ID reference but anyone worked, besides that, I tried to change css style ".wrapper div { position: absolute..." but also didn't work.
Could you see if I've been doing something wrong?
Thanks a lot
Gustavo Gerent
Hi guys, not woking in ipad.
have solutions? Screen media(); ? layout responsive?
while open issue, im going pratictice.
Open demo http://joelb.me/scrollpath/, show the path and scroll all the path. You will see the behaviour that differs to other browsers (not Opera).
I'm trying to figure out how you keep everything in the middle of the screen no matter the size of the browser window. If you were about to give me some incite on the technique that would be great. I've changed the code slightly to suit my use. Is is the key in the path or the css or the jscript??
Thanks in advance
By using the down arrow key to scroll I get quite funny results in FF - didn't test in other browser although I guess it'll be a xbrowser issue. Up arrow key works fine. When entering a rotation the position is somehow lost or erroneous.
When I setup a list of pages and scroll through them most are correctly positioned when I hit that section in the path, but some elements are positioned incorrectly. At first I thought it was my positioning settings, but if I click links set up with
$.fn.scrollPath('scrollTo'... );
everything is positioned correctly
I wish GITHub wouldn't call these feature requests 'issues'…
Anyway, I was wondering if your plugin supports animated SVG paths.
Is there a way to get the wrapper to start from the top left hand corner of the browser window instead of centered?
Love this script. Good work.
Is there a way to change the position of the path so that it is not relative to the center of the browser window? I would like to incorporate this into a DIV on a page with other elements, and only want the content within the DIV to scroll along the path, but with the path positioning being relative to the center of the DIV not the browser window. Is this possible?
I have one doubt, is it possible to use 2 path or is there any option to break path....
Hello,
I was wondering if it´s possible to style the links of the menu in order to see in which section I am. For example, when I navigate to section "3", that link has a different color.
Thanks
there's a way to set the scroll only in one sense (for example forward) with a close path?
It would also be great (and maybe better) to support SVG syntax paths as well.
I would love to be able to take an Illustrator path, export SVG, and use it as a scroll path.
and FYI Canvas API has plans add SVG syntax as well:
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-March/035239.html
Using Chrome (on Windows 7, 64bit), clicking the mouse wheel and dragging the mouse takes the scroll effect away from the path. After this the normal scrolling with the mouse wheel is blocked.
(I know not many people use this feature of actually clicking the mouse wheel, but I find it a useful function, especially on my tablet pen.)
Hi, I'm using your plugin to create a presentation website. It worked great but now i have 35 line drawings it gets really slow on initiating the website.
When its loaded it's fast but it hangs on the javascript to draw the lines when visiting the url. Google Chrome even crashes.
Any help on solving this issue is appreciated.
Maybe something to load the lines asynchronous? I think the canvas api should be able to load 35 lines...
Hey
Is it possible that I can fix a image to the path? The idea is that when I scroll down the image scrolls with the path.
many thanks
Hello!
First of all thanks for this great plugin! Helped a lot.
But I have a small question - how can I dynamically change the scrollSpeed? I need to slow it down when the user reaches a certain block, and then again increases when the unit leaves the field of view of the user.
It would be great if you could suggest how I can implement something like this:
$. fn.scrollPath ('changeSpeed', 10);
Thanks in advance!
I know this issue has been closed before, but has someone figured out how to add the bezierCurveTo function? It draws the path, but incorrectly...?? Any thoughts?
Thanks
Hi,
I tried plugin here.
http://mkweb.juplo.com/scroll_demo/
The problem is while coming back, the position of the element is getting changed.
(In this case CONTACTS -> SKILLS) . SKILLS div always position in wrong place if i came from the CONTACTS.
I think you can reproduce the problem.
Please checkout
Thanks
Hello,
i am trying to use your script for an oversized background-layer, to simply scroll / rotate etc. an oversized image (like 5000x5000px), as http://www.artofflightmovie.com/ shows off.
the well i made it working in a pretty low-way, but the performance is so heavy that i need a better solution.
any ideas how i could use/improve scrollPath to animate an oversized background image, instead of the content-wrapper?
thx,
john
Can I add this??
Can I add this??
Hi, I wonder if any ways to check current visibility.
Example:
if (svg/object on current viewport) {
so I can add some animation here
} else {
hide an animation
}
Hi there, i have download the source file, but when i run on my computer, the "show path" does not seem to be showing.
It's most likely engine's fault, but I think it could be worth looking into, if there could be some optimizations made..
Check it here http://junior.dev.f13.cz/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.