Category: Video

CSS3 vw & vh units, parallax video, ema cc => scroll2play

Some time ago I stumbled on this very nice parallax site of the new Mercedes A-Class. I really liked the effect of playing video while scrolling the browser window. This has inspired me to create a simple and lightweight library that could do something similar. That is why I brought to life scroll2play – a JavaScript lib that mimics video playback while scrolling your browser window.

You can see it in action on its demo page or by scrolling over the iframe below:



While building scroll2play I experimented with a few really fresh features of modern web browsers. The first are viewport relative units of measure vw & vh which allowed me to scale loaded image widths and heights to the size of the viewport. The second is the window.URL.createObjectURL function which creates a URL that is a reference to locally cached blob. In my case blobs were images loaded using XMLHttpRequest. I encourage you to learn more about these new cool features.

Lastly to export a sequence of still images out of my video content I used Adobe Media Encoder CC. You can learn how this can be done by watching my short video tutorial below:



BTW: Below is the complete footage of my friends and me riding on wakeboards 😉

CSS Regions in Adobe Edge Reflow

I just found out about this new and really hot release of Edge Reflow CC. It offers a really cool new feature: CSS Regions support. I got so excited about it that five minutes later I recorded this quick and dirty overview that goes through how you can get started with it 😉

If you want to learn more about CSS Regions or this new Reflow release, just follow these links:

Video Series – Getting Started With Reflow

As you probably know already, Adobe has just released a preview version of Edge Reflow CC. Just for this occasion, I recorded a series of five video tutorials that will guide you through your first steps with this awesome tool. You can watch the whole series in the embedded player below or you can view each video using the following links:

  1. Intro – This is the introductory episode of the Getting Started With Reflow video tutorial series. It briefly covers the basics of Adobe Edge Reflow as well as navigation within the tool.
  2. Defining Layout – This episode covers the first steps of the Getting Started with Reflow tutorial series. It shows how to use Reflow to define layout of your responsive design.
  3. Styling Elements – This is the third episode of the Getting Started with Reflow video tutorial series. It goes over the styling capabilities of Adobe Edge Reflow.
  4. Making Layout Responsive – This is the fourth episode of the Getting Started with Reflow video tutorial series. It covers an essential part of Reflow — making your layout responsive.
  5. Testing Layout – This is the final episode of the Getting Started with Reflow video tutorial series. It covers techniques for testing your design on different devices using Edge Inspect and Responsive Inspector tools.

Responsive Inspector (beta) released!

Responsive Inspector logoI’m really proud to announce a beta release of Responsive Inspector extension for the Google Chrome browser. It’s a little side project that I’ve been working on together with Filip Łysyszyn – a colleague from Adobe and a great UI/UX designer. In a nutshell, Responsive Inspector allows viewing defined media queries of visited websites. It is very useful when developing responsive web layouts as it can show what min-width or max-width media queries are specified in CSS stylesheets. In addition it also enables pixel perfect browser resizing, taking and saving whole page screenshots, CSS media query code viewing, and sharing web designs on Behance service as Work In Progress.

You can find it here in the Chrome Web Store. Remember it is a beta release, so if you find any bugs or you would like to share your feedback with us you can use this contact form. Below you will find a screen shot of Responsive Inspector in action and a short video with an overview of all of its features.

Responsive Inspector screen shot

Edge Animate – DPS Integration

In this new episode of the Piotr On The Edge video series I demonstrate how you can integrate HTML5 animations built using Adobe Edge Animate with DPS-based (Digital Publishing Suite) magazines.

The following topics are covered:

  • A quick intro to Edge Animate
  • Adding DPS navigable links in Animate – using navto:// technique
  • Publishing animations for DPS
  • Placing animation in InDesign/DPS
  • Previewing the article on a device using Adobe Content Viewer

Video Tutorial – Animating Over A Curved Path with Edge Animate

Last night I did a deep dive webinar on Edge Animate at Adobe TechLive (you will be able to watch it here soon). During the session I covered how you can animate HTML elements over a curved motion path. I haven’t found a really good explanation of this topic in other places so I thought I would record my approach to it and share it with others!

Winter sports with Edge Animate

Winter sports season has begun for good (at least in my region ;)) and I thought it would be nice to see how Edge Animate can help us express our hobbies. So what you see below was entirely built with HTML5/JavaScript using Animate and Illustrator 😉 If you want to learn how to do it yourself please join my “HTML Animation with Edge Animate” online session during the Create the Web live event next Tuesday (January 15, 2013 @ 1:00 PM EST – 4:00 PM EST).

The Create The Web online event is part of new initiative from the Adobe Evangelism team called Adobe Tech Live. The event is a replay of a world wide tour that was held by Adobe at the end of 2012. So if you missed it nearby, please join us on January 15:

  • 1:00PM – 1:30PM EST: Web Standards and the Future of CSS by Alan Greenblatt
  • 1:30PM – 2:00PM EST: HTML Animation with Edge Animate by Piotr Walczyszyn
  • 2:00PM – 2:30PM EST: Responsive Design with Edge Reflow and Edge Inspect by Holly Schinsky
  • 2:30PM – 3:30PM EST: Mobile and Web Application Development with PhoneGap Build and Edge Code by Ray Camden
  • 3:30PM – 4:00PM EST: Q&A by Everyone