I am just playing with an idea, and it isnt something I have come across before.
What I was thinking, is set a background image. for a large div, or page. But hide it
Then as the user moves the mouse across the page / div. A circular say 200px diameter disc, around the mouse pointer, reveals the background image in that circular element.
Bit like a pitch black night and you shine a torch and reveal what is shone in the light.. but seriously fluid.
Anyone come across anything like this. The initial bg image is to be hidden, even on page load.
User then thinks its just a normal web page, with text and other layered divs etc etc.. but as they move their mouse portions of the background are revealed as they move around the page.
Make sense ?
Any other links ?
Albeit the one above isnt what I am after.
Don’t get me wrong that effect was very popular in 2003-2006 when we work with flash; this was one of the most annoying and boring effect people as me to do and every flash course I teach on the second lesson with light shadow and mask we teach the students in 2 clicks how to do it , please don’t remake it, it will be a crime against humanity
It was actually for a sneak preview of something.. Hmm never mind. I guess you dont get what i was asking.
I am after pure light bg version,... Not sure whats cheesey about it or indeed why you would think its something from the 90’s ..
Why don’t you use jQuery and on hover, just change css background of the body element?
I figured jquery would be the only way …
What i was trying to acheive is …imagine normal web page text divs blah on white background, then as you move mouse a circular portion of a image bg is revealed, behind the text n stuff etc…
- Sold between 250 000 and 1 000 000 dollars
- Author had a File in an Envato Bundle
- Has been a member for 5-6 years
- Author had a Free File of the Month
- Won a Competition
- Author was Featured
- Author has had an Item Featured
- Bought between 10 and 49 items
Just put together a jsfiddle. The concept is interesting as an exercise because you want to try to do this in a minimalistic way. The easiest way I could think of is to slap a background image on an absolutely positioned div. And have the div move to the mouse pointer coordinates.
The reason I’ve used a background image is because css has a background-position property that lets you pick an area of the image, in this case I give it the mouse pointer coordinates as I did with the div and push the div lower on the stack with a low z-index order. It gives the illusion that there is an image in the background. I don’t think illusion is correct because it’s actually behind all content in the page that does not have a lower z-index order ^^
There is still some edge cases to workout like what happens when we’re on the borders of the viewport and perhaps positioning the div in an area other than the default left top edge of the screen.
I’ve added a yellow background because the image is a little big and takes a while to load. hotlinked to a random creative commons image on flicker for the exercise.
The jsfiddle: http://jsfiddle.net/ale55andro/yzyBH/
You also need to workout the initial hiding and showing of the div, when the mouse pointer is over the document. I don’t want to put much work into it other than throw out a quick and dirty working prototype of your concept.