RE: [selectors] :in-viewport() psuedoclass for scroll-based animations & lazy-loading

Hi,

> On Jun 14, 2016, at 11:43, Florian Rivoal < florian@rivoal.net > wrote:
>
> I know there are tons of use cases for something like that, and LG was suggesting something along these lines earlier as well to deal with scroll effects on round displays, but I don't think this approach will actually work.

I had proposed a new type of pseudo-class, :region() pseudo-class.
:region() pseudo-class is a functional pseudo class for selecting an element in a particular area of the round display.

   :region( [ center || left || top || right || bottom ]? )

You can select the element which matches with center point of containing block by ":region(center)".
":region(top)" means the element which touches the top edge of containing block.

I propose about this for dynamic scrolling and scaling of list items on the round display.
On some of the latest smart watches, when an element in the list moves to the center of the screen it becomes bigger than the other elements, and I intended to implement this effect with :region().

However, this pseudo class is the layout-dependent selector.
For applying pseudo class, it requires changes in the layout, but the element coming inside the specified area doesn't change the layout.
So I thought this approach wouldn't work and didn't make more progress on :region() pseudo class.

I think IntersectionObserver[2] could be a solution for your problem.

Thanks,
Jihye

[1] https://lists.w3.org/Archives/Public/www-style/2016Jan/0255.html 
[2] https://github.com/WICG/IntersectionObserver/blob/master/explainer.md 

>> On Jun 14, 2016, at 09:25, Rachel Nabors <rachelnabors@gmail.com> wrote:
>> 
>> I would like to vouch for this. I already use waypoints.js to manually track everything that is in view so I can pause/remove animations that aren't visible. I do this for performance reasons and others do, too. It's in the wild already. Would love to see it official.
>> 
>> 
>>   
>> Rachel Nabors
>>> On Tue, Jun 7, 2016 at 5:40 AM Kseso <kseso9@gmail.com <mailto:kseso9@gmail.com>> wrote:
>>> Yestarday, Amelia Bellamy-Royds tweeted:
>>> I also want an :in-viewport psuedoclass for scroll-based animations & lazy-loading.
>>> (see tweet: https://twitter.com/AmeliasBrain/status/739865073745833984 <https://twitter.com/AmeliasBrain/status/739865073745833984> )
>>> 
>>> Today I want to know your opinion about a new css pseudoclass
>>> :in-viewport()
>>> where the value inside the function () defines a viewport area.
>>> The pseudoclass rule will be applied while any part of the element is inside this area
>>> 
>>> value for :in.viewport()
>>> [ <length> | <percentage> | auto]{1,4}
>>> The value may be negative.
>>> 
>>> For example:
>>> 
>>> .el {
>>>   opacity:0;
>>>   transition: .5s;
>>>  }
>>> .el:in-viewport(10vh 0) {
>>>   opacity:1;
>>>  }
>>> 
>>> <Gráfico1.jpg>
>>> ​
>>> 
>>> Could declared exclusion areas inside :in-viewport()?
>>> 
>>> :in-viewport(0 / 30vh 0) {}
>>> 
>>> <Gráfico2.jpg>
>>> -- 
>>> Curator of Web Animation Weekly
>>> Speaking & Workshops
>>> • Apr 05 –06 SmashingConf, San Francisco
>>> • Apr 21 Frontend Masters, online, CSS Animations and Transitions Master Class
>>> • May 18 –20 Front-Trends Keynote, Warsaw
>>> • Jun 01 CSSconf Nordic, Oslo

Received on Wednesday, 15 June 2016 02:32:19 UTC