I was wondering if there is a way to achieve an effect similar to Chris Coyier's: Scroll/Follow Sidebar using CSS3 animations?
I have a sidebar that scrolls down with the page as the user scrolls (simply using a fixed position div), but I would like to animate that sidebar to sort of bounce down and/or play catch up with the page as the user scrolls down.
Take a look at Chris' jQuery technique to see what I'm talking about.
The main thing I would like to know is if it is possible to achieve this effect using only CSS3 and no javascript.
Thanks in advance for any help!
No its not possible to get that effect without JavaScript unless you have some other sort of mechanism that allows you to check how far the user has scrolled, and change CSS properties of elements accordingly.
Related
A client of mine saw this awesome scrolling effect when clicking on a menu item: http://www.feedmusic.com/
I'm talking about the grey/purple overflow between the two anchor menu items.
I've been Googeling around for hours and can't find anything like this. Does anyone know how to achieve this?
Thanks in advance!
It's singlepage application with disabled scrolling. I haven't experience with singlepage, but here are ideas which looks like it could work:
Create two divs between content one gray and second purple (or one with two colors in the background). Then create scrolling via js (jquery) on button click.
If it's ajax loaded, there could be only 3 divs: one with current content, one with gray/purple background and third with new content and js should place the divs to required places. But first solution should be easier.
Implementation is up to you.
Behance has a column on the right side of the page, that once you scroll past a certain point, becomes fixed.
i.e. go to this page then scroll down to see example
http://www.behance.net/gallery/minke/7133409
Does anyone know how they do this? Is it with CSS and AJAX?
Thank you.
It can be done in the jquery way. Check this Stopping fixed position scrolling at a certain point?.
Or you can go with a jquery plugin jQuery-Stickem.
Click this link to see my concept image regarding the subject: http://i45.tinypic.com/k33c0i.jpg
Hi! Is it possible to do such custom "sliders" for overflowing content without the default Scrollers? It doesn't matter how the actual transition goes (could work just like the regular horizontal scrollbar for i care, just without the ugly default gray buttons/bar). Preferably i would like to do it just with CSS, but if not, i'll consider other ways to do it aswell. Or i'll just simply create another page to the remaining images.
http://www.visioville.fi/en/
Thanks!
You can get rid of the scrollbars by setting
overflow:hidden
in CSS, which will "clip" the DIV contents.
I don't think there is a pure CSS way to scroll it. That is easily doable with jQuery.ScrollTo - just bind hover() or click() events to your arrow icons.
Take a look at this site, I believe it will be of some use to you. It's what I've used in the past: http://jscrollpane.kelvinluck.com/
How can i change the appearance (not the color) of a scrollbar within a box with overflow? I know how to do it in flash, I need a way to do it without it. In fact, I want to know how they did this slider in the apple web site: http://www.apple.com/mac/
It seems they used css along with javascript, but that's all I know. Is it possible that they did it using DOM, DHTML, HTML 5, Ruby or PHP? I have no idea.
If you'd be kind enough to share the answer, I thank you in advance.
They basically re-created a fake scrollbar using images, CSS and some Javascript. When you drag the image, Javascript makes it move together with the mouse cursor and scrolls the box contents in the opposite direction. The real scrollbar is being hidden/deactivated using CSS.
Look here for some examples/tutorials: http://www.hiddenpixels.com/javascript/custom-javascript-scrollbar/
I am using AJAX modal popup in my project, but there is problem with it.
Now I decided to acheive similar behaviour using javascript
I am able to show popup using
document.getElementById('dv').style.display = "block";
Now I just need, how can I make background disable like in modal popup?
you create a div that spans the whole page but initial style is display:none; along with any other styles. i.e transparency 80% with background colour of black..
When you show dv change the display attribute of the div (above). Just make sure that the dv has a higher z-index than the background div and the background div has a higher z-index than the content on the page :)
Have you considered using a library for this? The most programmer-friendly and flexible I have found is NyroModal (jQuery based). The advantage of a library is it will deal with many subtle things that happen with modal dialogs, e.g. ensuring it works effectively across all browsers (and overcomes the various quirks around things like positioning), animating on and off, lightbox effect around it.
NyroModal lets you generate dialogs dynamically, whereas most libraries are geared owards simpler use cases such as "make all images clickable so they show up as lightboxed when the user clicks on them".