Tagged: CSS3

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 😉

Navigation Drawer Pattern With Topcoat CSS Library

Recently I have been playing around with the Topcoat library. Essentially Topcoat is a set of pure CSS-based components for building high performance HTML applications. These apps can be either hosted HTML web apps or native apps packaged with PhoneGap/Cordova. In the app that I’m currently working on I wanted to have a slideable navigation bar that follows the so-called Drawer or Off Canvas UI pattern. Topcoat itself doesn’t come with a built-in implementation of it but all the necessary components are there, so it was just a matter of few lines of CSS and JavaScript to have it running beautifully. In my implementation I also used a simple media query for high-resolution screens like on tablets or desktops where slideable navigation is not necessary. Continue reading →

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

PhoneGap and Force.com in 69 minutes

I’m proud to present a series of seven video tutorials that teach how to build PhoneGap applications connected to Force.com (Salesforce). It is over an hour of content that goes step-by-step from project set up to packaging of applications ready for multiple platforms.
Continue reading →

Native scrolling in jQuery Mobile/PhoneGap applications

In one of my previous blog posts I covered how to fix flickers and jumps during page transitions when using jQuery Mobile with PhoneGap. The good news is that flickers were eliminated with latest release of PhoneGap 2.1 and its departure from using IFrame for JavaScript to Native bridge. Unfortunately issue of 1px jumps is still there, but that is by design in jQuery Mobile. So this means my solution with additional div element hosting application content is still valid.
Continue reading →

Intro to BackStack a Backbone.js views navigation library

Recently I’ve been working on several projects using PhoneGap/Cordova. These projects had a common requirement, and that was to have a custom UI look while preserving the interactions and feel that are common to mobile devices. Because of the custom UI look requirement I didn’t want to use any of the available mobile UI frameworks like jQuery Mobile, Sencha Touch, or jQTouch. Of course, those frameworks are really great and can save you ton of work, but at the same time they come with their own look-and-feel that often can be hard to re-skin to achieve what the app designer has proposed. That is why I decided to stick with pure HTML/CSS elements as much as possible and in some cases to build missing components from scratch. That is how BackStack came to life. In few simple words BackStack is an extension for Backbone.js that allows you to navigate between app views with nice mobile-style slide transitions, fade transitions, and no-effect transitions.
Continue reading →