1. Homepage: Slider with videos & images on loop in header
1. Similar to https://redbull.com/ca-en/
where the video plays the moves onto the next item
2. Images zoom in slightly while on the slide same as on site above
One animation that will be delivered on homepage.
Use the same treatment on all pages (homepage and internal pages):
1. Be More Awake (sun burst) to be an Animation GIF file.
2. The main mattress shot will be a 360 degree file to rotate on top of the animation in all places
3. Site Wide: We are to animate the images and text as follows on all pages:
1. Fade in elements as area comes into viewport: title, background files, images and text with from 0% opacity to 100
All of these design items are anchors on the site http://prntscr.com/ncurz8
5. Nav Alt on all pages once user starts scrolling: design pending
6. Gifs to trigger as they are in view
7.XD does not allow for subscripting: can you superscript the Ⓡ
Copy is not final but 80% there to show length
Additionals (To be estimated separately)
1. Wake Your Best will be one of the following (still fades in as per above):
2. 3 side by side
2. “Luxury at its best” Horizontal scroll. Left or right - Once use clicks left or right we want to the mattress in view to rotate out and drop opacity while next mattress comes into full view and 100% opacity.
- This is the best example I could find to illustrate this effect: https://www.jqueryscript.net/demo/Creating-3D-Perspective-Carousel-with-jQuery-CSS3-CSSSlider/
3. Articles section on homepage and article page with preview images: these have cover overs on desktop
1. We would like quickly fade in each blocked image from 0% opacity to 100% in a scattered effect similar to this: https://codepen.io/colinhorn/pen/awoPrr
Reviews will not be visible at launch: to get design files with the reviews there and missing
5. Circle rotating mattress: should be 6 total. Goes to the product pages (main product page and 6 internal product pages)
Our Legacy will be single page
7.Cookies and aoda wcag 2.1 AA to be included. Alt text and direction included in copy deck (IMPORTANT!)
8. Find a store: GeoLocation + Maps.
Search field by store name. Store list will be managed by backend.
9. Articles will have: public tags, categories, and quiz result tags (based on 1 or many of the 6)
Animation Notes from Adobe XD.
Note 2: The mattress is to rotate as the user scrolls up and down in 360 similar to camera shown here http://jsfiddle.net/coma/sBTzG/13/
1. They want to be able to log in and add/remove/edit/delete stores in the store list
They want us to consider having the following plugin on the site to create micropages as needed: https://instapage.com/
3. Add/remove/edit/delete articles - homepage and article page
The quiz will trigger two things
1. The answers to Question 5 will trigger articles with specific tags (see copy deck)
2.The answers to Questions 1-4 will trigger answer to which mattress for majority of choices
If user answers do not lean towards one. System to pick at random.
Solicitar referencias y diseños por chat. A los interesados por favor presentar experiencia previa implementando sitios de características similares. Solo consultar si pueden desarrollar el trabajo en 1 mes (Máximo) con entregas semanales.
Idioma Ingles será requerido para conversaciones con el cliente.Category
: IT & ProgrammingSubcategory
: Web developmentWhat is the scope of the project?
: Create a new custom siteIs this a project or a position?
: ProjectI currently have
: I have specificationsRequired availability
: Full timeExperience in this type of projects
: Yes (I have managed this kind of project before)Roles needed