HTML + CSS + JS Animation - Japanese Nissan Note Promotional Site

    You may have already seen the Nissan Note promo site, but in my opinion it is worth it for web designers to pay attention to it.

    Very simple, but elegant and original trick: a huge sheet with pictures turns into an animated presentation when you quickly scroll through the page.

    Do not open the link on the mobile Internet! Page size is more than 20 Mb.
    Promotional site Nissan Note

    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.98 Mb;
    • loading 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 embedded in it. In turn, #frames contains divs with “skits” with the display: hidden property.

    Each scene contains a div with background photo (s) (.frameBG) and several fixed height divs () covering the entire area of ​​a particular photo. The height of the covering divs is always a multiple of the height of the image.
    During scrolling, the top property of #container changes. When scrolling down, #container goes up.

    As you scroll, the visible part of divs with “sketches” get display: block, the rest get hidden none;
    The presence of photograph-covering divs is precisely 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 still do not understand.

    In any case, this technique seemed very curious to me and if there is time, then you can come up with variations on the topic.

    Also popular now: