- This topic is empty.
-
AuthorPosts
-
June 23, 2013 at 3:35 pm #45774
CodeGraphics
ParticipantGo 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 #139985Kitty Giraudel
ParticipantDo 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.
June 23, 2013 at 3:44 pm #139988CodeGraphics
ParticipantOk. 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 #139990Kitty Giraudel
ParticipantSo? 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 #139991CodeGraphics
Participant:) @Hugo, you must be funny.
June 23, 2013 at 3:47 pm #139992Kitty Giraudel
ParticipantI most certainly am.
June 23, 2013 at 4:11 pm #139994Kuzyo
Participantreally 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 #139996Kitty Giraudel
ParticipantThis 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 #139997Kuzyo
Participantthanks @HugoGiraudel will be waiting
June 23, 2013 at 5:05 pm #140002CodeGraphics
Participant@Hugo, will be waiting also.
June 23, 2013 at 10:26 pm #140034June 24, 2013 at 3:22 am #140022Kuzyo
Participanthave 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 #140018Kitty Giraudel
ParticipantA very, very, very dirty proof of concept. Many adjustments required.
http://codepen.io/HugoGiraudel/pen/8d43c3d359c5c7ef3cb71ac3b399801b
June 25, 2013 at 5:33 am #140320Kuzyo
Participantnice 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?June 25, 2013 at 5:41 am #140324Kitty Giraudel
ParticipantZ-index.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.