Otrivin Sea
At the end of 2009 by request
We have developed a project that advertises Otrivin Sea from the cold. Saatchi & Saatchi provided us with creativity and all the materials. The created project consists of two parts: the enticing banner and the target mini-site ( landing page ) to which the interested user had to go by clicking on the banner.
An interactive banner offers to erase the stuffy city and breathe in the healing sea air. The user can do it himself with the help of the Otrivin Sea spray.
If the user’s runny nose has taken all his strength so much that he cannot move his hand or mouse, the healing spray in 10 seconds activates the effect of the banner and gives you a picture of the sea.
The technology of streaming video download without caching, was not chosen by chance. The initial version of the banner completely loaded the video of the sea, and then played it when you hover on the banner. The loading indicator served as the outline of the Otrivin bottle, which was filled with color.
')
But it was necessary to realize interactivity, so that the user himself could erase the stuffy city and see the sea. Considered the option to show the user pictures of the sea, while the video is not loaded. But this option was rejected, since on some sites the weight of the banner-container should not exceed 25 Kb. The banner was overloaded with graphics, which were compressed, the additional image of the sea did not fit into this restriction.
Moreover, the user could hover the cursor immediately after uploading a banner to the site, or after any period of time. That is, it was impossible to determine the video cache time, it was necessary to show the first portion of the downloaded video clip.
The optimal solution was the following: streaming video download without cache. Users with any Internet speed almost instantly will be able to erase the city (use interactive). At users with low speed of the Internet, at the same time, the video of the sea will slow down. If the Internet speed is normal, the user will not notice the download process.
4 seconds we considered the optimal duration of the video clip for its looping (so that the transition at the gluing point was not so sharp) and fast loading.
A click on the banner leads to the landing page . The variant with the full-flash page - did not fit, since it was necessary to be indexed by search engines. As an exit, it was decided to make a videophone on a flash using sound.
The end result was as follows: first, the user sees a picture of the sea in the background, and after a while the picture is smoothly replaced with the video of the sea. Sound - the sound of the surf - can be turned off using a special button (and the sound does not disappear abruptly, but gradually subsides).
Animation of switching sections on the page is made on javascript. The page itself is made using html + css + js + flash + video.
With the help of interactive, we clearly demonstrated the effect of the drug: they gave the advertising message an emotional coloring and helped the user to feel the life-giving power of the sea. Breathe the sea, Habrachelovek! :)
We have developed a project that advertises Otrivin Sea from the cold. Saatchi & Saatchi provided us with creativity and all the materials. The created project consists of two parts: the enticing banner and the target mini-site ( landing page ) to which the interested user had to go by clicking on the banner.
An interactive banner offers to erase the stuffy city and breathe in the healing sea air. The user can do it himself with the help of the Otrivin Sea spray.
If the user’s runny nose has taken all his strength so much that he cannot move his hand or mouse, the healing spray in 10 seconds activates the effect of the banner and gives you a picture of the sea.
The technology of streaming video download without caching, was not chosen by chance. The initial version of the banner completely loaded the video of the sea, and then played it when you hover on the banner. The loading indicator served as the outline of the Otrivin bottle, which was filled with color.
')
But it was necessary to realize interactivity, so that the user himself could erase the stuffy city and see the sea. Considered the option to show the user pictures of the sea, while the video is not loaded. But this option was rejected, since on some sites the weight of the banner-container should not exceed 25 Kb. The banner was overloaded with graphics, which were compressed, the additional image of the sea did not fit into this restriction.
Moreover, the user could hover the cursor immediately after uploading a banner to the site, or after any period of time. That is, it was impossible to determine the video cache time, it was necessary to show the first portion of the downloaded video clip.
The optimal solution was the following: streaming video download without cache. Users with any Internet speed almost instantly will be able to erase the city (use interactive). At users with low speed of the Internet, at the same time, the video of the sea will slow down. If the Internet speed is normal, the user will not notice the download process.
4 seconds we considered the optimal duration of the video clip for its looping (so that the transition at the gluing point was not so sharp) and fast loading.
A click on the banner leads to the landing page . The variant with the full-flash page - did not fit, since it was necessary to be indexed by search engines. As an exit, it was decided to make a videophone on a flash using sound.
The end result was as follows: first, the user sees a picture of the sea in the background, and after a while the picture is smoothly replaced with the video of the sea. Sound - the sound of the surf - can be turned off using a special button (and the sound does not disappear abruptly, but gradually subsides).
Animation of switching sections on the page is made on javascript. The page itself is made using html + css + js + flash + video.
With the help of interactive, we clearly demonstrated the effect of the drug: they gave the advertising message an emotional coloring and helped the user to feel the life-giving power of the sea. Breathe the sea, Habrachelovek! :)
Source: https://habr.com/ru/post/81637/
All Articles