I'm looking to do something like this. I'm using code from this answer here but the answer is never made entirely clear. They are suggested to use this jquery plugin here but I haven't been able to get it to work. I would go with the first example's code, only, I'm using Foundation 4 and the progress bars are something that come with it and are simpler to create. Also, the animation code provided in the second example is a lot cleaner-- overall, the first example is kinda messy, code heavy, and redundant.
My code is live here. I'm working with the skill bars in the about section. Before the user gets to this point, the animation should be paused. Once the user scrolls to this part of the page, the animation should play.
EDIT: Also, if you have any suggestions to stop the bars from "breaking" out of their containers when you scale the page (this site is meant to be responsive), I would appreciate that as well.
EDIT2: I've noticed as I've been playing with this that overflow: hidden; on .progress fixes my "breaking" issue.. however, when you resize the window, the sizes stay at what they initialized at. I know realistically users visiting my site likely won't be resizing the window a whole lot, but for employers looking at it, it'll kinda be lame if it doesn't work properly. I'm having this same issue with the grumpy-cat button overlays where it initializes at the first size and doesn't resize the overlay after that. Suggestions to this would be really, really appreciated!
If you know where your skill bar is and you know where your screen is at, you only need javascript. (no plugins or weird stuff)
To get the vertical position of your screen it's simple:
window.pageYOffset
To get the vertical position of your div, you just need
div.offsetTop
In your case, I would give an id to the div that wraps all the skill bars and set a loop (window.requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame ) to check if you're within reach of the div (say, if the difference between the window offset and the div is less than some amount).
If the answer is yes, trigger the animation.
The best way to do the animation is by a css transition. (if you need a good intro to css animations here's a video that i found helpful: http://www.youtube.com/watch?v=VoncDvOfUkk )
You can set css animations from javascript.
The idea is that you would set all your "meter" widths to 0. Then in javascript do something like:
div.style.transition = "width 1s";
div.style.width = someValue;
My recommendation for the value to include in the div is some constant fraction of the "progress" div, as in with % as opposed to em or px. This technique should work. (in case you still have issues, you have a window.requestAnimationFrame loop going on so you can recalculate the values at each timestep... although... beware performance).
The reason you were recommended jQuery is because when you're going to have to update all the divs in order to animate them, just writing $(this).find('.meter') and then addClass('.expand') is so much easier.
Hope this helps
Related
It is possible to have 2 sticky elements on top of each other? Or use one of them as a background?
TLDR; I was able to make this work with a library (StickyKit) that does what I'm looking for, but performs badly with new async scrolling.
Example
JSFiddle with StickyKit - https://jsfiddle.net/cibulka/4nd3b0tt/ - (this does what I'm describing, but performs poorly, see below)
How I did it: I wrapped sticky elements in the 200% wrapper, and floated them to left. Then I moved 1 of them (margin-left: -100%) on top of the other. This way they are on top of each other, but still keep their height.
Why this does not work with position:sticky
One of many quirks with position:sticky is that it does not work if any of its parents is overflow:hidden. See this answer for more info: Why does `overflow:hidden` prevent `position:sticky` from working?
What I need to do here is to make the 2 elements overlay somehow without their container be overflow:hidden. Or should I do something else entirely?
What I'm using now
For the time being, I've ditched the "200% container" and set my image container (.sticky.bg, see the fiddle) to height:0. This makes images "stuck", but they do not become "relative" again once user scrolls to the bottom.
This is obviously not ideal.
Background
I was a happy user of StickyKit for a long time. Unfortunately, it does not work very well with asynchronous scrolling, which is employed by more and more browsers to improve performance. With the new Firefox Quantum (57), for example, StickyKit is pretty much unusable.
I've created an issue in StickyKit Github, but package seems to be abandonned by the author: https://github.com/leafo/sticky-kit/issues/252
Because of that, I am forced to deprecate StickyKit and move to native position:sticky (polyfilled with StickyFill). Unfortunately there is a couple of things position:sticky can't do and this is one of them.
There is also another issue I'm having with position:sticky: Position sticky: scrollable, when longer than viewport
What I'm looking for
A recommendation, basically, how to approach this issue. I'm up for using different JS/jQuery library, writing my own code or use some quirky CSS hack to hack position:sticky functionality.
Thanks in advance!
I've been trying to do something like this for quite a bit, and have tried a variety of methods from fake scroll bars and DOM-tricking code. Nothing seems to quite be as clean / functioning as I need it to be.
What I'm trying to do is have a horizontally scrolling div (with scrollbar), with a vertically scrolling div nested within it. Ideally the single horizontal scrollbar would scroll, and after a certain point--vertically scroll the "go-up" div next to it.
Here's an example diagram for those who need to visualize:
I think I have a solution that could work:
Basically I'm thinking that the horizontal "scene" could have overflow that equals the height of the "go-up" div. And after the horizontal width of the "scene" passes...you can, onScroll, shift the "go-up" container right using (ScrollLeft) and up using (ScrollTop).
Basically giving you the illusion of controlling it's vertical scroll with a horizontal scrollbar.
Check out the code here: http://jsfiddle.net/jPzqj/1/
I know how to pass a function at the end of the "scene"...currently I'm using:
$('#main').scroll(function(e)
{
if($(this).scrollLeft()>1430)
{
}
});
My only issue is I'm not quite sure how to approach the math that would allow me to shift the go-up container. How do I pass in the "scene" divs scroll value into the ScrollLeft and ScrollTop values of "go-up"...
Could anyone give me any advice on this at all?
Thanks.
You are totally off the right path, no vertical scrollbars are involved.
That is a good site (not the one that you make in 30 minute obviously), and the javascript is obfuscated, but if you are interested, you could watch the source with Firebug to understand what's going on.
It works by mixing a javascript library, some cool CSS3 Transform3D effects, and a nicely studied HTML to give you the effect of the screen scrolling up (actually, only the images are moving - and not scrolling - while the screen is always in the same Y position).
The same effect is used to create the percetion of depth, by moving the houses in background slower than the ones in front.
This effect is called PARALLAX SCROLLING .
A good javascript library you could start looking at for Parallax effects is Stellar.js
You can take a look at some great sites made with Stellar.js, especially Nike and Saucony.
Hope this answer saved you some time,
good luck on your studies ;)
EDIT
this is what you want: Jquery Parallax Scrolling effect - Multi directional
open the fiddle from the bounty-awarded answer and keep the right arrow key down.
McMaster-Carr, a few years back, completely redesigned their website and they now have these very cool 'scrolling box' sections for each product. I've been trying to duplicate that same effect only using css and html, but have had no luck so far.
Some key things I cannot accomplish using only html + css:
hidden scrollbars with the ability to still scroll
section headers that stop when scrolled to the top of a containing div
I've tried looking through their source code but I really want to start from scratch and recreate the effect, hopefully finding a much simpler way to recreate it.
If anyone has seen anything like this before or knows how to go about creating this type of layout, please help.
Here's a link to a page on the McMaster-Carr website that demonstrates that scrolling box layout:
http://www.mcmaster.com/#nylon-gears/=g1p46z
The technique j08691 linked to is the common way to do it - you'll have to use a bit of JS to find out where how much the site is scrolled. If you look at the source of the persistent header example, there is a line like
scrollTop = $(window).scrollTop()
simply replace this by the top position of your parent div (assuming it is, like in McMaster, fixed on the site)
scrollTop = $("div.MyParentDiv").position().top
Need your help.
I created a static semi-opaque banner which stays at the top of a website. When a user scrolls the website the entire container objects goes underneath the banner. I want all the objects (images, text..etc) getting blury effect as it goes underneath the banner.
Thanks
The only way you're going to be able to do this is by getting fancy with some CSS and javascript. CSS doesn't support blur directly, but you can emulate it with text-shadow. Images can also be blurred with a little jquery/css/javascript magic, but will be problematic because you can't partially blur an image (what happens when only part of the image is under the banner?). It could probably be done by layering your images and keeping track of their position on screen, but all of this seems like a lot of work for a very small return.
So, assuming you've decided to give all of this a shot, you're going to have to use javascript to determine which parts of the page have passed under the banner and apply the style to those parts. The difficulty of this task will scale with the complexity of your page layout. In a best case scenario, your banner and content container are both 100% the width of the html body. At this point, it would be fairly trivial to write some kind of scanner that traverses the dom every time you page scroll to find elements that the blur should be applied to. However, best-case-scenario is rarely the case at hand, at which point I'd recommend abandoning the effort to pursue something with a greater ROI.
This isn't possible with CSS nor jQuery. You might be able to do something with IE's filters, however that's IE only (of course), and will invalidate your CSS.
Currently, there is no way to do this, although something might come along in CSS 4 or something.
The Chrome nightly builds support some filters, however there isn't an alpha blur filter (yet, at least).
I've searched high and low for a tutorial but I can't find one.
It is really a simple task that I see in lots of websites.
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text.
It really shouldnt be this hard cuz I see it in lots of websites.
I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow.
Any suggestions?
Try this:
http://jsfiddle.net/bryanjamesross/vsQFE/4/
The trick is that you will need individual container elements with overflow:hidden and set widths for each link, otherwise the whole container will scroll, instead of each link. In my example, I contained each <a> inside <li> tags that had set widths and overflow:hidden.
Then it's just a matter of hooking up the jQuery and animating correctly.
edited: fixed an animation bug, and made a the code a bit easier to follow
Just add this to your element
onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'
Did it help?