Change on scroll!!

Some random text generated for the main section of heroes’ layouts.

This page uses the following JS (from W3 Schools) to change the colour of the top menu when scrolled:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.querySelector(".spm").style.backgroundColor = "#fff4";
    // document.getElementById("logo").style.fontSize = "25px";
  } else {
    document.querySelector(".spm").style.backgroundColor = "transparent";
    // document.getElementById("logo").style.fontSize = "35px";
  }
} 

How it works..

This uses the built in onscroll method to detect when the window scrolls. When scrolling occurs a function, named scrollFunction, is invoked. This runs an if statement which tests to see if the distance scrolled from the top of is greater than 80 pixels. When true inline styles are added to the chosen elements. When not true, that is when the amount scrolled is less than 80 pixels, different styles are applied.

AnimatiSS

The animation for the button hover comes from AnimatiSS which is a great quick way to browse and copy CSS for single animations. Unlike animate.css you only copy the code you need.

How to design

Good design comes from lots of tweaking: messing with whitespace, font size, typefaces, colour and images.

Repellendus non mollitia iusto commodi expedita pariatur aliquid consequuntur ducimus harum suscipit ratione eos numquam repellat, temporibus quo culpa aperiam impedit consequatur quidem facilis modi voluptatibus voluptate saepe debitis! Corporis.

Corrupti animi enim quis velit corporis omnis debitis saepe dicta esse exercitationem. Est nemo, quas atque fugit reiciendis iure magnam culpa, optio delectus aperiam, mollitia perspiciatis reprehenderit. Eveniet, aperiam temporibus.

Assumenda aspernatur minus numquam quos eveniet, praesentium inventore aut obcaecati doloribus commodi error beatae id exercitationem sint, perspiciatis minima! Non pariatur perspiciatis nihil ratione temporibus delectus accusamus tempora necessitatibus rem!

Dolores sed nulla ipsam, veniam hic tenetur officia quasi quaerat recusandae culpa at voluptas vero autem quod explicabo dignissimos porro reprehenderit animi! Maiores ipsam consequuntur blanditiis, repellendus earum numquam sequi.

Ipsa debitis culpa nesciunt ipsam similique nihil pariatur quae accusantium molestias earum, reprehenderit animi voluptatum necessitatibus. Aspernatur repudiandae odit ipsum, cupiditate officia deserunt odio ut, eveniet laudantium veniam enim ipsa!

Autem alias, eligendi culpa laborum asperiores blanditiis minima nobis dignissimos fuga recusandae quas doloribus modi, illum ullam voluptas eos, aliquam quia nihil assumenda velit tempore sequi reprehenderit fugit nesciunt? Deleniti.

Animi culpa autem iste minima, dolores quos. Sit nam quibusdam aliquam. Facilis recusandae ipsum vero officia eos minima! Odio, debitis facilis quis nulla qui id tempore illo placeat assumenda ea!

Repellendus non mollitia iusto commodi expedita pariatur aliquid consequuntur ducimus harum suscipit ratione eos numquam repellat, temporibus quo culpa aperiam impedit consequatur quidem facilis modi voluptatibus voluptate saepe debitis! Corporis.

Corrupti animi enim quis velit corporis omnis debitis saepe dicta esse exercitationem. Est nemo, quas atque fugit reiciendis iure magnam culpa, optio delectus aperiam, mollitia perspiciatis reprehenderit. Eveniet, aperiam temporibus.

Assumenda aspernatur minus numquam quos eveniet, praesentium inventore aut obcaecati doloribus commodi error beatae id exercitationem sint, perspiciatis minima! Non pariatur perspiciatis nihil ratione temporibus delectus accusamus tempora necessitatibus rem!

Dolores sed nulla ipsam, veniam hic tenetur officia quasi quaerat recusandae culpa at voluptas vero autem quod explicabo dignissimos porro reprehenderit animi! Maiores ipsam consequuntur blanditiis, repellendus earum numquam sequi.