Is there a javascript library which lets me do the horizontal scrolls effect kind like github does when you click on a file/folder.
Preferrably jQuery plugin.
thanks
Looking at the source for github, it seems they use jQuery.animate to slide the content to the left.
$("#id").animate({
marginLeft: "-1200px"
});
Example on jsfiddle
For a more in-depth answer, GitHub actually wrote about how they've assembled their directory structure on their blog.
But yes they're using jQuery for the actual effects themselves. They mention using slideTo() in that post, but in the end it's really just an $.animate() effect.
maybe you want to look into jQuery.ScrollTo, a jQuery plugin really usefull for this kind of effects.
You could have like github a div with a overflow:hidden containing your slides or pages and above the same kind of links than in the jQuery.ScrollTo example page.
Related
I'll start by linking you what I'm talking about.
I'd like to know how to make such a scroll like that, you just need to scroll once and boom you'll get to the next section.
Thus, how to make a one page website (yeah, maybe I'll add some more sections but wanted to know what are the properties to do that)
This is what I mean by one page websites.
Try FullPage; it supports both vertical and horizontal sections.
There are lots of libraries available. I would suggest Fullpage for this kind of CSS. It will provide you some extra features like horizontal scroll within Vertical scroll which will make you site attractive.
Hope this will help.
You can use class for each section of your page and then by using of that classname and jquery you can do the same.For more information and demo you can check the link below.It may help you.
You can check the demo and solution below here the one page section scrolling is given in great way.
Check this demo
I like the way the image slider in this page works and I've been looking for a way to do it. But the information seem to be limited out there.
Site: http://stevenmengin.com/
Thanks
I think you need fullPage.js jQuery Plugin for fullscreen scrolling. You can get it from the link below:
http://alvarotrigo.com/fullPage/
I am looking for a jquery plugin that has a scrolling image effect where the previous and next images are still visible but smaller on either side of the current image/frame.
Similar to this one: http://www.eogallery.com/ but smoother with the side images centered
I know I have seen it before but I haven't been able to find it after extensive searches.
Anyone know a plugin like that?
Thanks, especially for leading me to the name of the effect "carousel"
I found what I think is the best example here: http://codecanyon.net/item/jquery-carousel-evolution/full_screen_preview/490018
not a plugin but you can see the the source:
http://www.roxon.in/scripts/tutorials/NavGallery_jQuery_Tutorial_01/index5.html
Maybe you can check this one:
http://www.bkosborne.com/jquery-feature-carousel
The plugin has a lot of configuration and options
I recently came across one of Google's projects "What do you love" and saw a nice feature there.
If you visit http://www.wdyl.com/#monkeys
On your left you will see a small box that allows you to scroll the page "Quiet Cool" I thought when I saw it ))) I looked over the internet to find jQuery plugins or Tutorials on how to do similar thing (jQuery/javascript is not my strong side), but I couldn't find any.
So could anyone please explain how to make similar "Api/Feature" and provide code snippets if possible, that would really help. Ohh an jQuery solution is preferable.
As is so frequently the case, your best bet is to open your browser's Developer Tools and look at what's actually going on there! In this case, it looks like a static background (the grey boxes) with a blue frame on top of it, somehow made draggable, that calls one of the window scrolling functions after doing a bit of proportions arithmetic to determine how far to scroll.
Here is a simple demo I put together to show you how to animate the scroll of a page: http://jsfiddle.net/jasper/3cnKn/1/
In my example, the basic idea is to bind to a click event for some links and animate the scrollTop of the html element:
$('#nav').find('a').on('click', function (event) {
event.preventDefault();
$('html').animate({scrollTop : $(this).attr('data-scrollTop')}, 500);
});
I'm looking to recreate the layout that's present at this site:
http://prettytasty.tumblr.com/archive/
The only way to accomplish this is using absolute positioning, however it appears that they're using javascript to dynamically position each image entry on the page. Is there a jquery plugin or example that accomplishes this or something similar?
I realize javascript is the last thing you want to have to depend on for layout, but I'm just curious and would like to see how it is accomplished.
The effect you see on that particular page is actually created with prototype.js, but for jQuery you're probably looking for the jQuery Masonry Plugin