4 ms·

How did you make that awesome demo? Is that just js + 100 hours of labor or what?

• amccloud 14y ago
  It's just few images sliding. The iphone is a video.
  • PhrosTT 14y ago
    I'm so used to right clicking and looking for Flash as the only indicator of video. /forgets video tag.
• partlysean 14y ago
  Glad you like it! To record the footage, I used the app Reflection (reflectionapp.com) to AirPlay my iPhone's screen to my MacBook Pro. Everything was edited using Final Cut Pro X. The trickiest part was the status bar. When you AirPlay an iOS device, the status bar changes to a blue color, and I just wouldn't have it. I made a custom black status bar in Photoshop and keyframed the crap out of it to cover the blue one. Then I exported the video from FCPX, compressed and converted it with Handbrake (handbrake.fr), and embedded it into the webpage using the HTML5 <video> tag. Originally, the iPhone image I used on the homepage was angled rather than head-on. Using some clever CSS transforms, I skewed the video to fit perfectly in the angled iPhone. Unfortunately, transforming the video left us with poor aliasing and we opted for the head-on approach to keep the quality high. If there's anything else you'd like to know, feel free to ask!
  • degenerate 14y ago
    Very cool! It looks like your CSS is still referencing one of the old, skewed screenshots: http://www.getjustlanded.com/static/images/homepage/app_screenshot.png?v=-133100619 http://www.getjustlanded.com/static/images/homepage/app_scre...
    • partlysean 14y ago
      Oh snap! Nice catch there. I'll have to push an update. Thanks!