Re: position: pointer

On Sat, Oct 13, 2012 at 1:06 AM, Jussi Kalliokoski <
jussi.kalliokoski@gmail.com> wrote:

> On Fri, Oct 12, 2012 at 11:20 PM, Lea Verou <lea@w3.org> wrote:
>
>> I agree the use case needs to be addressed, but I'm not sure about the
>> position proposal. This only addresses a very limited number of use cases.
>> For instance, suppose we have a radial gradient and we want its center to
>> follow the mouse pointer [1]. Or, a shadow that moves its offsets as the
>> mouse moves, to look more natural [2]. Or the infamous parallax effect. We
>> still won't be able to do things like that.
>>
>> I think the most flexible solution would be a new unit (e.g. mx for
>> horizontal and my for vertical) that describes the offsets of the mouse
>> from the viewport. Akin to vw and vh, 100mx would represent the horizontal
>> offset of the mouse from the left edge of the viewport and my the vertical
>> offset from the top. Not sure if scrolling should affect this or not.
>>
>> That way, position: pointer would be:
>> position: absolute; /* or fixed */
>> left: 100mx;
>> top: 100my;
>>
>> Thoughts?
>>
>
> A very interesting idea! However I don't quite like it in this form, and
> certainly doesn't seem like a better alternative for the use cases of
> `position: pointer`, it doesn't give any added value there and is clunky
> for the features you proposed it would enable (e.g. you don't want the
> box-shadow to vary 1920px on 1080p resolution). Not sure it would be as
> good for accessibility either; it doesn't make sense for a gradient to
> follow the caret, or the focused element, but for a tooltip it might be a
> good idea.
>
> However, when you take it out of the competitive setting, I think these
> two ideas could coexist quite nicely! It doesn't really make sense to add a
> unit that is an offset to something else, so I'd rather it was relative,
> i.e. 0.5mx is half the mouse's X position, this would make parallax easier
> to achieve. But even then, you'd have to design for each screen size
> separately (for example using media queries, but still a hassle) if you
> wanted reasonably sized box shadows, so let's refine it a bit further; What
> if:
>
> 1mx = mouseX / viewport width
> 1my = mouseY / viewport height
>
> so if you wanted a box-shadow to move 4px depending on the mouse x
> coordinate:
>
> box-shadow: calc(2px - 4mx);
>

Eh, forgot the rest of the parameters, but for example:

box-shadow: calc(2px - 4mx) 0 1px black;


>
> Parallax background relative to mouse:
>
> background-position: 40mx 0;
>
> These two proposals serve different use cases, imho. Thoughts?
>
> Cheers,
> Jussi
>
>
>> [1]: http://tweeplus.com/
>> [2]: http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html
>>
>>
>> On Oct 8, 2012, at 20:08, Jussi Kalliokoski wrote:
>>
>> Hi everyone,
>>
>> I wanted to discuss the possibility of adding a new `position` type
>> called `pointer`. I came up with the idea as I was thinking about how
>> limited `title` attribute tooltips are, which made me check out the JS
>> libraries for the purpose, which are crappy as well, and I think JS
>> shouldn't be needed for "simple" positioning of elements like this (there
>> may be a few cycles to save here as well). The idea is pretty simple, it
>> works kinda like absolute or fixed position (in that the element is
>> floating), but the given coordinates are relative to the main pointer
>> position.
>>
>> This would let you make tooltips in pure CSS and HTML (not to mention
>> that you could recreate those stars flying around the mouse from the 90s
>> with just CSS and HTML ;). I made a small demo [1] [2] to give a better
>> picture of what I mean. The actual demo uses a silly JS shim, and I think
>> the smoothness speaks for itself about how unsuitable JS is for this kind
>> of functionality.
>>
>> Looking forward to feedback!
>>
>> Cheers,
>> Jussi
>>
>> [1] (code) https://gist.github.com/3853601
>> [2] (result) http://labs.avd.io/position-pointer/
>>
>>
>>
>