I always wanted to show light on a website in a way of realtime, which means the lighting a certain object can change according to the movement of the mouse. I read a lot of website then one day I came across an amazing solution on
29a.ch created by Jonas Wagner. Then I fellow him on Twitter and asked if I could use this technique in my project. He's so nice that he gave this permission.
The I read some of him code. What I have to do is to create two image, one is for the normal face, and then use Photoshop or other better tool to revert its color, then the javascript file will use a certain maths principle to help calculate the alpha and color of the position of the mouse above the face image.
 |
| The face image |
 |
| The Reverted Image (by PS) |
In my experiment, I used a picture I took of a castle in Highland, then use Photoshop to make it looked darker and created another image as the lighting image by 'revert' tool. The experiment went good on Chrome and Safari, you may visite it by this
link.
 |
| The result of this experiment |
The I read some of him code. What I have to do is to create two image, one is for the normal face, and then use Photoshop or other better tool to revert its color, then the javascript file will use a certain maths principle to help calculate the alpha and color of the position of the mouse above the face image.
No comments:
Post a Comment