5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
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 ?

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
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.

8273 posts Community Moderator
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Attended one of our Meetups around the world
+9 more
MSFX Moderator says

cheesy 1990’s effect :D

4140 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Located in Brazil
+3 more
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

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
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 ..

1484 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
OriginalEXE says

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

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
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
  • Has sold $1,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 4 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.

2002 posts
  • Has referred 50+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+9 more
bitfade says

cheesy 1990’s effect :D
cough! coff! cough!
672 posts
  • Has been part of the Envato Community for over 2 years
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+1 more
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