How Was This Effect Achieved?

[CodeGraphics]

Go here: http://www.adhamdannaway.com
Hover over the image horizontally as if you are dragging your cursor to extreme right or left, and the guy will just be changing with the typography ‘Designer’ and ‘Coder’.

Then open: http://www.adhamdannaway.com/contact
Wait for five second, the image will change. Then hover over the face of the guy and the former image will be revealed as if it’s a kind of lens.

How was this effect achieved. Again, did you notice how the pages load? Ajax? It seems jquery is really powerful and subtle.

[Kitty Giraudel]

Do you ever read the source? :D

The effect on home page is a simple hover effect, no big deal. Regarding the contact page, it’s only two images placed on top of eachother, revealed on hover, following the cursor with JavaScript.

[CodeGraphics]

Ok. But i think the effect on the home page is more than css hover. Because the text also responds and fades.

[Kitty Giraudel]

So? Progressive opacity decrease isn’t a very hard thing to do. :)

Edit: seems to be conditioned by mouse cursor. So JS involved. Simple enough I guess.

[CodeGraphics]

:) @Hugo, you must be funny.

[Kitty Giraudel]

I most certainly am.

[Kuzyo]

really cool effect, never see something similar

@HugoGiraudel do you know some sort of tuts to achive this effect?

[Kitty Giraudel]

This seems a little bit too specific to be the topic of a tutorial. Or maybe the author has writen about it somewhere.

I’ll try to replicate this effect if I get some free time tomorrow. Shouldn’t be too hard.

[Kuzyo]

thanks @HugoGiraudel will be waiting

[CodeGraphics]

@Hugo, will be waiting also.

[camdixon]

@Hugo, Looking forward to seeing your solution as well.

Thanks man :P

[Kuzyo]

have another question about this site when you click on page about, all content appears one after another it was made with http://api.jquery.com/delay/ or ?

[Kitty Giraudel]

A very, very, very dirty proof of concept. Many adjustments required.

http://codepen.io/HugoGiraudel/pen/8d43c3d359c5c7ef3cb71ac3b399801b

[Kuzyo]

nice realization @HugoGiraudel

I have tried play a little too, but my knowledge of JS and jQuery is primitive as a result my code too :)
http://codepen.io/Kuzyo/pen/fzsiF
I have question why when I first hover over my red block width works fine but when I then hover over black nothing happens? Can somebody explain?

[Kitty Giraudel]

Z-index.

[Author]

Posts