16 comments

  • Zach ReedZach Reed, 7 years ago

    The only problem I have with these effects is that it's super jarring when you initially hover them. Like it's a very harsh "jolt" effect the second you start your hover, then it gets smoother after you have started hovering it. It would be nice if it was a smoother transition.

    8 points
    • Chloe SilverChloe Silver, 7 years ago

      Came here to congratulate the nice effect, and to say this ^ Otherwise it's really nice for desktop experiences :)

      0 points
    • Dirk HCM van BoxtelDirk HCM van Boxtel, 7 years ago (edited 7 years ago )

      Hit this up in your browser:

      * { transition: all .1s; }

      Not as responsive anymore, but makes it slightly less jarring.

      .edit: hmmm... I wonder if you can animate transition duration values...

      0 points
      • A. M. ­DouglasA. M. ­Douglas, 7 years ago

        In response to your edit, are you not looking to use a cubic-bezier function? This is trivial, just use a transition-timing-function or specify the cubic-bezier in the shorthand you composed.

        0 points
        • Dirk HCM van BoxtelDirk HCM van Boxtel, 7 years ago

          Not sure.

          I want to accomplish the initial (within 2 ms) hover animation to have 0.2 or 0.3 seconds of animation delay for easing purposes, while further hovering will be at 0.

          0 points
          • Thomas Michael SemmlerThomas Michael Semmler, 7 years ago

            You could use a keyframe animation for the initial firing of the animation, with animation-fill-mode: forwards;. It'd need some queueing in some way, with javascript probably. But its possible.

            Though I personally wouldn't like that. The immediate interaction feedback is valuable.

            0 points
          • A. M. ­DouglasA. M. ­Douglas, almost 7 years ago

            So you want transition-delay:

            0 points
    • Pedro BotelhoPedro Botelho, 7 years ago

      Thanks for the feedback! We've included a second demo in which a CSS transition was added so the initial hover (and the whole movement) feels more smooth. You can find it here. (Hard reload required)

      0 points
  • Andy MerskinAndy Merskin, 7 years ago

    Heh, great timing! I made and posted something similar a few days ago by writing a simple Vue.js component + mostly used CSS to handle the rest:

    Check it out: Parallax Depth Cards on CodePen

    4 points
  • Jansen Tolle, 7 years ago

    Excellent work! I've seen the effect that inspired this and was very curious how they achieved it.

    1 point
  • Justin Rands, 7 years ago

    You'll lose this effect completely on mobile. Nice though.

    0 points
    • Dan CoatesDan Coates, 7 years ago

      Not necessarily, you could have the parallax effect tied to the device accelerometer rather than a mouse position.

      2 points
    • Ismail JadunIsmail Jadun, 7 years ago (edited 7 years ago )

      atvImg accomplishes a similar effect that works on mobile. Actually, I think the effect is smoother

      1 point
  • Jovana AndjelkovicJovana Andjelkovic, 7 years ago

    Nice!

    0 points