Đã hoàn thành

Cinemagraph with JavaScript and PNG

What is a cinemagraph?


A cinemagraph combines photography and video to ‘unfreeze’ a photo very subtly, capturing the moment just before and after a still is taken. The more subtle the movement in the frame, the more effective it becomes.

“More than a photo, but not quite a video”:

See some examples here:

[url removed, login to view]

[url removed, login to view]

[url removed, login to view]

[url removed, login to view]

What’s different about ours?


We’ve shot a series of cinemagraphs along the length of a street.

We want to join them together and pan along the entire street within a 16x9 frame, giving the impression that we have created a really epic cinemagraph. We also want to play a music track while the image pans.

The challenge – build our cinemagraph


Image format / animation:

In this instance, due to the size of the panoramic image being created, the animated GIF format would be impractical as the file size would be huge.

We therefore would like to use a combination of layered PNG images and JavaScript to create a similar effect. We’d like to create a container (using a DIV or similar) that looks like a normal 16x9 animated GIF, but actually acts as a mask for our content.

We’ve shot our street scene, and all the assets are currently being prepared in PNG format.

There are two layers of images – a static background layer made up of 19 separate PNGs, and animated sections that fit over that layer. These sections are cropped so that we only need to load the portion of the image necessary to display the animation. There is also a static PNG at the very end of the sequence containing some graphics to do with the project - we'll supply this.

We’ll supply a guide showing which animated sequences fit where in terms of layering over the background images.


We’ll need to pre-load a certain amount of content before the music can start and the image can begin panning from left to right. We'll need to display a preloading message while this is happening. We'll provide a design and artwork assets for this.

The amount of content we’ll need to load in advance will be dependent on the user’s connection speed.

We’ll need to load enough of the background segments and animated overlays to allow the image to start panning, and continue to the end uninterrupted.

We also want to play the audio track, so we’ll need to buffer enough of that so it will also begin playing when the image starts panning, and will continue uninterrupted (Obviously this assumes a reasonably consistent connection speed).

Scaling to fit desktop and mobile


We’d like this project to work on both desktop and (popular) mobile browsers. The frame size for desktop / tablet should be 960 x 540, and we should display a scaled down version for mobile devices – this frame size should be 560 x 315.

Browser compatibility


The piece needs to work in all modern browsers both on the desktop and on mobile devices:







Mobile Safari (iPhone and iPad)

Android (phones and tablets)

Kĩ năng: CSS, HTML, HTML5, Javascript

Xem nhiều hơn: cinemagraph png, cinemagraphs png, javascript cinemagraphs, cinemagraph png file format gif, cinemagraph javascript, cinemagraph audio, cinemagraphs javascript, work in png, what version of android do i have, what is an android tablet, what android version do i have, t mobile android phones, the challenge series, spring for php, speed up android, safari for android, safari browser for android, png work, need for speed android, i need pans design

Về Bên Thuê:
( 5 nhận xét ) London, United Kingdom

ID dự án: #1315035

Được trao cho:


Hi, we are a group of programmers located in Sheffield, UK, proud to offer 7 years of experience in LAMP/.NET/JS/JQuery/CSS. I would like to offer our services in relation to your project. Our team has recently worke Thêm

$399 USD trong 2 ngày
(26 Đánh Giá)

4 freelancer đang chào giá trung bình $412 cho công việc này


Hi ashfel, I've made a project similar to this one before. It included a panorama instead of street and it also had a preload with a simple animation to allow buffering. I can make this using HTML5, CSS3 and JavaScript Thêm

$400 USD trong 4 ngày
(2 Nhận xét)

Hi Sir Dolphinesoft is a professional Software Development Company providing complete IT solutions. website designing, software development and internet marketing and full featured web services including B2B and B2C e Thêm

$250 USD trong 30 ngày
(0 Nhận xét)

hello sir please check pmb

$600 USD trong 6 ngày
(0 Nhận xét)