31 comments

  • Alex ChanAlex Chan, 5 years ago

    I would not want to be the person responsible for slicing up all those poster layers. Does this effect appear on all movies/shows? That's a lot of production work.

    7 points
    • , 5 years ago

      That was actually my main take away from this little exercise. I spent as much time finding/slicing assets to remake the posters as I did writing the code.

      1 point
    • Ian GoodeIan Goode, 5 years ago (edited 5 years ago )

      The effect is required for app icons only, and it's only recommended for in-app images. It's such a mountain of work that I imagine it's an effect that'll be reserved for featured or promoted content.

      0 points
    • Geoff YuenGeoff Yuen, 5 years ago

      A lot of After Effect guys do this with flat photos. What a crazy amount of work!

      0 points
    • Jeff French, 5 years ago

      I'm sure it could still a reasonable amount of work, but I also imagine that the people creating these likely have access to the original, 'already masked' artwork, and can just create (or recreate) the 3D art without going 'backwards' to mask already composited images.

      0 points
    • Luke JonesLuke Jones, 5 years ago

      I know someone who used to specialise in slicing stuff up with a pen tool for movie posters and the like.

      I don’t envy their job.

      0 points
  • Mac PankiewiczMac Pankiewicz, 5 years ago

    FramerJS: http://share.framerjs.com/ndbnniojf2in/

    4 points
  • Andrew RasmussenAndrew Rasmussen, 5 years ago

    I like the attention to detail where if the mouse goes out of the browser window it animates back to a default state. Though once the mouse reappears in the window it snaps rather than animates to the new state.

    2 points
    • Daryl GinnDaryl Ginn, 5 years ago

      Isn't this default browser behaviour?

      0 points
      • Ben Markowitz, 5 years ago

        Considering that all had to be programmed I'm not sure you could call it default browser behavior.

        0 points
        • Daryl GinnDaryl Ginn, 5 years ago

          You don't get it.

          1 point
          • Ben Markowitz, 5 years ago (edited 5 years ago )

            I'm sorry?

            All I was saying is I have to programmatically turn easing/transitions back on based on entry/re-entry to the window. You can't leave the easing/transitions turned on when it's following the mouse or it gets janky.

            I'm detecing a mouseleave event on the window, when that happens, I enable transition effects with easing and animate the poster back to it's default state (programmatically resetting the 3d rotation and the parallax movement of each individually layer). At that point, I again disable the transition effects.

            So it's not default behavior.

            6 points
  • Kilian Valkhof, 5 years ago

    Very cool! How about adding the glare as well? You can see it in the video at 0:25 on the spongebob poster for example: https://www.apple.com/tv/

    1 point
  • alex esn, 5 years ago

    cool effect

    0 points
  • David WDavid W, 5 years ago

    Really nice! Great job. I seriously hope that we will see more effects on the web as well. I made one as well, but in After Effects: https://dribbble.com/shots/2238562--Apple-TV-parallax-effect

    0 points
  • Juha Tauriainen, 5 years ago

    I signed up just to tell you that I kind of cried a bit when I looked at the js http://benmarkowitz.com/posters/js/main.js

    So many duplicated selectors and calculations.. You could get it a lot smoother simply by caching and removing duplication.

    0 points
    • , 5 years ago (edited 5 years ago )

      Honestly I put this together really fast just to see how close I could get to the effect. I'm a designer by trade and not a js engineer, but I will give it some TLC later and see if I can clean it up a bit.

      Sorry it made you cry.

      5 points
    • Kyle BavenderKyle Bavender, 5 years ago

      Welcome to DesignerNews, Juha!

      I'm not sure signing up just to critique a designer's admittedly "hacked together" JS solution is going to win you many friends around these parts.

      Thank you in advance for considering how to constructively build the DN community's knowledge in the future.

      5 points
    • Ix TechauIx Techau, 5 years ago

      I wish your comment was more in the lines of:

      "Great idea! Had a look at the Javascript and saw that there were lots of duplication. This could probably be improved, here's how I would do it:

      [examples]"

      ...see how much friendlier that was, even though it's expressing the exact same opinion?

      4 points
  • Nathan GathrightNathan Gathright, 5 years ago

    Awesome. Although there's a bug with the shadow in Chrome: http://cl.ly/image/0g06123i230J

    0 points
    • Ben Markowitz, 5 years ago (edited 5 years ago )

      Ohh, thanks for the tip! Curious if it's still doing it, as I've made some tweaks throughout the morning and I'm not seeing it.

      You in Chrome on PC or Mac?

      0 points
      • Vansh DassaniVansh Dassani, 5 years ago

        There's also a bug on the moonrise kingdom poster, when you slide the mouse to the bottom left side of the screen

        0 points
      • Nathan GathrightNathan Gathright, 5 years ago

        Mac. and it's fixed now, but there's a diffferent issue now http://cl.ly/image/1l1j0V0z313L

        1 point
        • Ben Markowitz, 5 years ago

          Yeah I'm aware of that one. Annoyingly chrome is much more buggy with this stuff than safari for some reason. I'll try to get it sorted out later.

          0 points
        • Ben Markowitz, 5 years ago (edited 5 years ago )

          Frustratingly all these shadow bugs are introduced because in chrome 3d animations + css blur filters cause a lot of visual artifacts so I had to come up with a workaround.

          Should be fixed now though!

          0 points
  • David DarnesDavid Darnes, 5 years ago

    Awesome! I was able to sort the CSS, but not the JS annoyingly.

    0 points