- This topic is empty.
June 23, 2013 at 3:35 pm #45774
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.June 23, 2013 at 3:39 pm #139985
Do you ever read the source? :D
Ok. But i think the effect on the home page is more than css hover. Because the text also responds and fades.June 23, 2013 at 3:45 pm #139990
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.June 23, 2013 at 3:46 pm #139991
:) @Hugo, you must be funny.June 23, 2013 at 3:47 pm #139992
I most certainly am.June 23, 2013 at 4:11 pm #139994
really cool effect, never see something similar
@HugoGiraudel do you know some sort of tuts to achive this effect?June 23, 2013 at 4:14 pm #139996
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.June 23, 2013 at 4:28 pm #139997
thanks @HugoGiraudel will be waitingJune 23, 2013 at 5:05 pm #140002
@Hugo, will be waiting also.June 23, 2013 at 10:26 pm #140034June 24, 2013 at 3:22 am #140022
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 ?June 24, 2013 at 4:32 am #140018
A very, very, very dirty proof of concept. Many adjustments required.
http://codepen.io/HugoGiraudel/pen/8d43c3d359c5c7ef3cb71ac3b399801bJune 25, 2013 at 5:33 am #140320
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 :)
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?June 25, 2013 at 5:41 am #140324
- The forum ‘CSS’ is closed to new topics and replies.