Interactive HTML Timeline Representation Infographic
- or -
Post a project like this2263
$$
- Posted:
- Proposals: 4
- Remote
- #1856729
- Completed
Description
Experience Level: Intermediate
Estimated project duration: less than 1 week
General information for the website: Single page interactive 1-year calendar timeline
Num. of web pages/modules: 1
Description of every page/module: This interactive timeline illustrates events around the world on every day from Feb 2018 - Jan 2019.
1. Structure and Background:
(see attachment) We want to create a snake-like structured timeline where the user would need to scroll down to see information for the entire year. We would like in the background to be images of four seasons, and would correspond to each period of the year. So, from end September to end of November: Autumn picture, end of November to mid-March: Winter picture, from mid-March to end of May: Spring picture and end of May to beg of September: Summer picture. See 4 images attached in the documents.
2. Format:
On this snake-like structure we want to represent each day of the year, with one of two different types of markers. One type will be small for less important events and the other will be bigger for popular events.
Smaller Marker:
Each smaller dot will be associated with a date, which should figure under or above the dot (as shown on the attached mock-up drawing). The date will be written in this format: '1 Jan'.
Bigger Dots:
We want the bigger dots to have not just a date but also the name of the event. For example, as the drawing shows, on 14th of July, “National Day of France” is written beside the big dot.
In addition to this, next to the bigger dots, we would like to include a (background) image, which we will provide, relating to the event. Go to next Section to find the festivities (with their images included), for which we would like to make a bigger marker on the structure.
3. Features:
Clicking on the bigger and smaller markers, dates or images should open a detail layer box that shows names of the event, location / country in which the event happens and a little bit of further information. This information should be in a nicely designed visualisation overlaying the main layer, with a slight halo effect around it, but not overshadowing the full screeen. This info layer would open whether you click on the bigger or smaller dots, and should close when you click on an (x) or outside that layer.
4. Images / Graphics:
Images will be provided for all 4 backgrounds and 29 main events (with the bigger marker), but may need to be modified, and designed by your graphic designers to fit uniformly with the theme of the overall page.
The background images indicating seasons will need to be made lighter and background / poster-ized so that they don't draw too much attention from the main content.
Main event images may need to be cut to remove background elements, so that the images sit on a transparent background so that they merge nicely with the main content. The images shouldn't just look like square blocks on the background.
Data for the events (365 events, 1 for each day) will be provided in an Excel sheet. You will then need to put it into the HTML or XML or some suitable format.
****************
Description of requirements/features:
The page will sit on a WordPress template, so your HTML + HTML 5 + AJAX + CSS etc. will need to sit within the constraints of WP. You can create a new template file just for this page, by adapting one of the existing templates.
All elements will have to be SEO friendly, so no Flash or convoluted JavaScript will be allowed. The page must load in under 1 second, so images will need to be resized and optimised for fast loading.
This project is urgent and we need a RAPID turnaround on it (no longer than 5 days).
Num. of web pages/modules: 1
Description of every page/module: This interactive timeline illustrates events around the world on every day from Feb 2018 - Jan 2019.
1. Structure and Background:
(see attachment) We want to create a snake-like structured timeline where the user would need to scroll down to see information for the entire year. We would like in the background to be images of four seasons, and would correspond to each period of the year. So, from end September to end of November: Autumn picture, end of November to mid-March: Winter picture, from mid-March to end of May: Spring picture and end of May to beg of September: Summer picture. See 4 images attached in the documents.
2. Format:
On this snake-like structure we want to represent each day of the year, with one of two different types of markers. One type will be small for less important events and the other will be bigger for popular events.
Smaller Marker:
Each smaller dot will be associated with a date, which should figure under or above the dot (as shown on the attached mock-up drawing). The date will be written in this format: '1 Jan'.
Bigger Dots:
We want the bigger dots to have not just a date but also the name of the event. For example, as the drawing shows, on 14th of July, “National Day of France” is written beside the big dot.
In addition to this, next to the bigger dots, we would like to include a (background) image, which we will provide, relating to the event. Go to next Section to find the festivities (with their images included), for which we would like to make a bigger marker on the structure.
3. Features:
Clicking on the bigger and smaller markers, dates or images should open a detail layer box that shows names of the event, location / country in which the event happens and a little bit of further information. This information should be in a nicely designed visualisation overlaying the main layer, with a slight halo effect around it, but not overshadowing the full screeen. This info layer would open whether you click on the bigger or smaller dots, and should close when you click on an (x) or outside that layer.
4. Images / Graphics:
Images will be provided for all 4 backgrounds and 29 main events (with the bigger marker), but may need to be modified, and designed by your graphic designers to fit uniformly with the theme of the overall page.
The background images indicating seasons will need to be made lighter and background / poster-ized so that they don't draw too much attention from the main content.
Main event images may need to be cut to remove background elements, so that the images sit on a transparent background so that they merge nicely with the main content. The images shouldn't just look like square blocks on the background.
Data for the events (365 events, 1 for each day) will be provided in an Excel sheet. You will then need to put it into the HTML or XML or some suitable format.
****************
Description of requirements/features:
The page will sit on a WordPress template, so your HTML + HTML 5 + AJAX + CSS etc. will need to sit within the constraints of WP. You can create a new template file just for this page, by adapting one of the existing templates.
All elements will have to be SEO friendly, so no Flash or convoluted JavaScript will be allowed. The page must load in under 1 second, so images will need to be resized and optimised for fast loading.
This project is urgent and we need a RAPID turnaround on it (no longer than 5 days).
Projects Completed
28
Freelancers worked with
23
Projects awarded
75%
Last project
24 Apr 2024
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies