Sensing "half in view?" about jquery.inview HOT 5 CLOSED

The code already does notify you if a sliver of the object has scrolled into view, whether it came into view from the top or the bottom. If you're looking for a half in-view solution, then you'll have to extend it yourself. I'm not sure why half in-view would be of any use though.

from jquery.inview.

Showing is better than explaining! Have a looksee at what I'm doing with your wonderful plugin (and forgive the ratty JS--still sussing things out): http://rachelnabors.com/alice-in-videoland/book

Specifically, have a look on something like a tablet in landscape mode. If one frame, say the blinking eye, is "mostly in" with just the tiniest sliver of the frame beneath it showing, the frame beneath it has started its animations before the reader has finished watching the rabbit run past the eye!

Could be this just isn't the perfect plugin for this job, or maybe I need to extend it, as you've said (although, I'm not sure where I'd start).

from jquery.inview.

Can't you just put a smaller-sized invisible element inside the bigger one,
and then check whether that smaller element comes in to view? Something
like:

.big-element {
position: relative;
}

.big-element > .inview-element {
position: absolute;
top: 50%;
height: 1px;
visibility: hidden;
}

Then bind inview to the $('.inview-element')

On Mon, Aug 26, 2013 at 7:34 PM, Rachel Nabors [email protected]:

I'm using this plugin to fire events that animate things as a person
scrolls down a page. Unfortunately, I don't have a way to know whether only
a small sliver has scrolled into view or an entire frame has! Waiting for
bottom means the opportunity has passed.

So is there a way to look for a "halfway point?" Or anticipate it?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/8
.

from jquery.inview.

That's so... hacky... :( I guess I could attach it to actual elements in the page and crawl up the DOM to attach the triggering class to the parent.

from jquery.inview.

Aha! I see what you're doing. Cool idea! Unfortunately, this script won't do what you need and I'm afraid that even if it did, you would still be unsatisfied w/ the result.

Might I propose another solution to this problem?

I've seen some cool HTML 5 comic books in the past. I can't find the best one I remember, but here are two links that are similar to what I was thinking:

http://www.soul-reaper.com/
http://www.nevermindthebullets.com/strip.html#1-1

I think, for your purposes, you want to be more in control over the animation and scroll rate. This way, you can achieve the effect you need. You can do this a few different ways. I'd suggest animating the scrollbar with jQuery. If you want to kind of pause on each frame, you can do that as well. You just need to create an array of animations to play through, one at a time.

Have a look at this Vizio V-Key page I did last year. If you click on the computer icon at the top-right, you'll get a smooth animation. Click the left arrow and you'll get another smooth animation to return you to the left of the page.

Employ a technique like this, but trigger the initial animation on DOM ready and you can do some clever things.

Best of luck!

from jquery.inview.