How to render a mobile in HTML5 / CSS3 / Javascript

Question

I am developing a website to promote my app and want to render a mobile which will display different images in transition. Some like done on these pages:

• http://www.whatsapp.com/ (Uses a background image phone with Carousel)

• http://skyroapp.com/ (Uses a background image with video on top of it)

Can anyone point me to resources with ready-made background images for different devices and best practices to render the same?

Answer 1

I would look at JQuery carousels and image sliders, then format them to fit in a div within your phone image. Some of them handle video as well as images... here's a quick hit I found

http://designscrazed.net/free-responsive-jquery-carousel-slider-plugins/

I've used Flexslider myself and found it to be very configurable:

http://flexslider.woothemes.com/

But depending on what you need for features, you might check out Wow Slider:

http://wowslider.com/

Combine that with a mask layer for your phone frame:

http://www.techrepublic.com/blog/web-designer/how-to-use-the-css-clip-and-mask-properties/ http://www.vanseodesign.com/css/clipping-and-masking-examples/ https://stackoverflow.com/questions/10965776/lightweight-jquery-slider-w-mask-overlay

Answer 2

It may not be 100% what you are looking for but we use http://placeit.net at our work and found it to be very good. It is not a free service but is relatively inexpensive.