Fullscreen Video Opening Animation with CSS3

samuel HTML5 154 , , , ,

With this tutorial we want to show you how to create a similar video opening effect to the one seen on momentsapp.com. If you click the “Watch the video” button on the Moments App page, you will see a new image appearing on the photo stack which contains a video. The animation is a slight rotation of the frame and a subtle scaling of the video, which already starts to play. The whole wrapper expands to full screen without any play controls; just the closing cross will be shown. Once the video ends, or, if the user clicks on the closing cross, the video will simply disappear.

Related Post

DPlayer is a HTML5 danmaku video player to help people build video and danmaku easily. Features Danmaku Screenshot Hotkeys Quality Read more

Clean HTML5 Video Player with PlaylistFeatures:

Vidbg.js is a html5 jQuery video background plugin.When resizing is set to true (default) the video will resize automatically when Read more

Lazy Load XT is a mobile-oriented, fast and extensible jQuery plugin for lazy loading of images/videos with build-in support of Read more

Gifshot is a javascript library that can create animated GIFs from media streams, videos, or images.

Modal Video is a jQuery plugin to show videos on modal boxes.  Features Beautiful transition Accessible for keyboard navigation and Read more

A full-screen video presentation, that is resized and animated to become the content of a mobile device.

canvid is a tiny dependency free library for playback of relatively short videos on canvas elements.

Go