5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says

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 ?

5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says

Bugger me:

http://www.mantlelabs.com/flashlight/#.UJXnmYWkCHk

and

http://home.comcast.net/~vonholdt/test/flashlight.htm

Any other links ?

Albeit the one above isnt what I am after.

8194 posts Community Moderator
  • Attended a Community Meetup
  • Community Moderator
  • Has been a member for 6-7 years
  • United Kingdom
  • Contributed a Tutorial to a Tuts+ Site
  • Won a Competition
  • Contributed a Blog Post
  • Beta Tester
  • Bought between 50 and 99 items
+4 more
MSFX Volunteer moderator says

cheesy 1990’s effect :D

4140 posts
  • Bought between 1 and 9 items
  • Brazil
  • Exclusive Author
  • Has been a member for 6-7 years
  • Referred between 1 and 9 users
  • Sold between 5 000 and 10 000 dollars
tsafi says

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 :P

5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says

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 ..

1466 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says

Why don’t you use jQuery and on hover, just change css background of the body element?

5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says

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…

44 posts
  • Sold between 1 000 and 5 000 dollars
  • Exclusive Author
  • Bought between 1 and 9 items
  • Has been a member for 4-5 years
aiglemedia says

Do you want an effect like the bottom 2 boxes on my website home page.

http://aiglemedia.com/

Move your mouse on AS3 fireworks image or Fireworks pro image at bottom.

Except i have a square image and you want circular.

1999 posts
  • Elite Author
  • 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
  • Bought between 10 and 49 items
+4 more
bitfade says

cheesy 1990’s effect :D
cough! coff! cough!
615 posts
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 2-3 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
Typps says

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.

by
by
by
by
by
by