Unofficial BMW M2 promo website
Unofficial BMW M2 promo website. Sample screenshots are shown below…
The top of the page, showing a fullscreen background image of the car. Hovering over the down arrows will bring up a tooltip (as shown above) & clicking the down arrows brings the user to the next section of the page. As the user scrolls down, the size of the background image increases. A brightness animation is also applied to this div (and several others). The effect is very subtle & will temporarily brighten the background image before returning it to normal brightness levels. This effect only occurs in divs with little-to-no text.
Around a fifth of the way down the page, a navbar attaches itself to the top of the screen. Upon scrolling to a section (in this case “Performance”), the corresponding navbar link will change its text color to blue & its background color to white. Hovering over an tag will cause a similar color change, except the text color will be gray instead (as shown above). Clicking on the BMW logo in the navbar takes the user to the top of the page. Clicking on the ///M logo on the right will take the user to the offficial ///M website in another tab.
Hovering over more detailed features of the car will bring up a tooltip (as shown above).
The M2’s specifications layed out using flex-box. The navbar’s background color changes to black here so it remains distinguishable from the Specifications div. If the user were to scroll back up from here, the navbar’s background color would change back to gray to match the website’s color theme.
The footer, with additional links that take the user offsite. The navbar moves offscreen just before the user reaches the bottom of the page.
How the site looks on tablet. Parallax scrolling background effects don’t take place on mobile & the navbar is completely hidden.
To view on your browser, click on “Clone or Download” & click on “Download ZIP”. Afterwards extract the zip, then go to the /dist folder & click on index.html. The page will open in your browser.
Images are from http://www.simonpuschmann.com/ Check out his work!