Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How Was This Effect Achieved?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #45774
    CodeGraphics
    Participant

    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.

    #139985
    Kitty Giraudel
    Participant

    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.

    #139988
    CodeGraphics
    Participant

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

    #139990
    Kitty Giraudel
    Participant

    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.

    #139991
    CodeGraphics
    Participant

    :) @Hugo, you must be funny.

    #139992
    Kitty Giraudel
    Participant

    I most certainly am.

    #139994
    Kuzyo
    Participant

    really cool effect, never see something similar

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

    #139996
    Kitty Giraudel
    Participant

    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.

    #139997
    Kuzyo
    Participant

    thanks @HugoGiraudel will be waiting

    #140002
    CodeGraphics
    Participant

    @Hugo, will be waiting also.

    #140034
    camdixon
    Participant

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

    Thanks man :P

    #140022
    Kuzyo
    Participant

    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 ?

    #140018
    Kitty Giraudel
    Participant

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

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

    #140320
    Kuzyo
    Participant

    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?

    #140324
    Kitty Giraudel
    Participant

    Z-index.

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘CSS’ is closed to new topics and replies.