Sirabún presentation

Sirabún is the new Edelvives’ star project for the 3 to 5 year infant educational stage. In addition to the home page included within its general web, which we also designed, we have developed a website to present and publicize this new project.

The main concept was to create a live, dynamic site and show the content through visitor interactions. The page consists of two main screens:

1. An introduction where the main character of the Sirabún universe is presented through a series of small interactive games. We have designed this page with a layered motion effect that responds to the movement of the mouse; this effect, made with Javascript, gives the page a lively feeling.

2. The main project presentation page has been developed with a horizontal structure, as opposed to the classic vertical structure of most web pages. This is to harmonise with the diverse worlds that make up the Sirabún Universe.

Thanks to another effect developed with Javascript, the vector graphic elements that appear in each of the worlds continue on different planes as you navigate, creating the sensation of a stage set or improvised theatre.

Within each of these 5 screens, we explain what the educational project consists of, organizing the contents in modal windows and popovers, which allows us to take full advantage of the screen space. For the development of these content areas, a Bootstrap framework was used to facilitate column compositions and easily integrate a series of useful add-ons for the web.

Modal windows (or pop-ups) are endowed with interaction, presenting the contents according to the user’s clicks.

The last screen contains a simple game by which the user discovers the Sirabún elements available for the children’s educational classroom. Created by combining adaptive image maps with interactions developed in jQuery.

After the Edelvives presentation in Spanish the different publishing group brands’ websites are replicated in their respective languages.

Client: Editorial Edelvives
Languages: HTML5, CSS3, Javascript, Bootstrap Framework

See:
Edelvives proyecto Sirabún
Edelvives Comunitat Valenciana Airavun
Tambre Sirabún
Ibaizabal Sirabun

4-sirabun-parallax-horizontal-1
4-sirabun-parallax-horizontal-1
5-sirabun-parallax-horizontal-2
6-sirabun-parallax-horizontal-3
7-sirabun-parallax-horizontal-4