Animation with HTML + CSS + JS - Japanese Nissan Note Promotion Site
Maybe you have already seen the Nissan Note promo site, but in my opinion it’s worth it that web designers pay attention to it.
Very simple, but elegant and original reception: a huge sheet with pictures turns into an animated presentation with a quick scrolling page.
Do not open the link on the mobile Internet! The page size is more than 20Mb.
Nissan Note Promotion Site
')
The effect is excellent - visitors will definitely like the site, especially with the quality of Japanese networks.
According to information from Google Chrome:
We have a div (#container) with 100% height and absolute positioning; a div (#frames) with a fixed width is nested inside it. In turn, #frames contains divs with “scenes” with the display: hidden property.
Each scene contains a div with photo (s) of the background (.frameBG) and several div'ami () fixed height, covering the entire area of a particular photo. The height of the covering divs is always a multiple of the image height.
During scrolling, the top property of #container changes. When scrolling down, #container goes up.
As you scroll, the visible part of the divs with "scenes" get the display: block, the rest -hidden none;
The presence of divs covering photographs is due to the need to determine the value of the display property for a particular scene. But how this mechanism works, until the end I have not yet understood.
In any case, this method seemed to me very curious and if there is time, then you can think of variations on the subject.
Very simple, but elegant and original reception: a huge sheet with pictures turns into an animated presentation with a quick scrolling page.
Do not open the link on the mobile Internet! The page size is more than 20Mb.
Nissan Note Promotion Site
')
The effect is excellent - visitors will definitely like the site, especially with the quality of Japanese networks.
Some technical statistics
According to information from Google Chrome:
- total number of requests: 289;
- Size: 25.98Mb;
- download time on my laptop: 1.3 min;
- the number of "useful" pictures: 46 (I counted so much);
Principle of operation
We have a div (#container) with 100% height and absolute positioning; a div (#frames) with a fixed width is nested inside it. In turn, #frames contains divs with “scenes” with the display: hidden property.
Each scene contains a div with photo (s) of the background (.frameBG) and several div'ami () fixed height, covering the entire area of a particular photo. The height of the covering divs is always a multiple of the image height.
During scrolling, the top property of #container changes. When scrolling down, #container goes up.
As you scroll, the visible part of the divs with "scenes" get the display: block, the rest -
The presence of divs covering photographs is due to the need to determine the value of the display property for a particular scene. But how this mechanism works, until the end I have not yet understood.
In any case, this method seemed to me very curious and if there is time, then you can think of variations on the subject.
Source: https://habr.com/ru/post/151884/
All Articles