Curser changes CSS3 text-shadow values

[Till]

Hello, I want to realize a website attracting with a visual gimmick: Selected elements have reactive shadows based on CSS3. My idea: If you move the cursor, the elements' shadows change related to the cursor. That means the cursor works like a light or torch and live influences the text-shadow value(s). Is it possible to realize this kind of dynamic and reactive shadow with CSS3 or do I need to use both CSS3 and JavaScript? For instance, moving the cursor would change a div's text-shadow values from

div {
    text-shadow: 5px 5px 10px #000000;
}

to

div {
    text-shadow: 2px 10px 10px #000000;
}

. Any idea how to realize this?

Edited March 21, 2017 by Till

[Ingolme]

You will need Javascript to do some math and calculate the shadow's direction, then generate a text-shadow value for it.

[totololo]

Hello till,

I think you must used JQUERY library for realised your animation.

if i have few times to do that, I look for but not before 3 weeks.

faithfully

[Ingolme]

Goodness, no. In this case jQuery does not have some magical pre-built solution to the problem.

You need to have a mousemove event. Each time the event fires, subtract the element's position from the mouse's position. That will give you a direction vector which you can use to generate text-shadow coordinates.

There are details you need to take into account:

• The pivot point of the element starts off at the top left corner. You probably want the pivot point to be in the middle of the element, the middle is at [x + width/2, y + width/2]
• The vertical coordinates for text-shadow might be inverted.