Thomas Edison Tribute

In this example below you will see how to do a Thomas Edison Tribute with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SamrajM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SamrajM ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Thomas Edison Tribute</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav class="nav nav--active">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color1" data-letter="e"></div>
        <p class="nav__label">Tribute</p>
      </a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color2" data-letter="d"></div>
        <p class="nav__label">Introduction</p>
      </a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color3" data-letter="i"></div>
        <p class="nav__label">Early Life</p>
      </a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color4" data-letter="s"></div>
        <p class="nav__label">Late Life</p>
      </a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color5" data-letter="o"></div>
        <p class="nav__label">Achievements</p>
      </a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color6" data-letter="n"></div>
        <p class="nav__label">Impacts</p>
      </a>
    </li>
  </ul>
  <div class="burger burger--close">
    <div class="burger__patty"></div>
  </div>
   <a href="http://ettrics.com/code/horizontal-tab-menu/" class="logo" target="_blank">
   <img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" /> 
  </a>
</nav>

<div class="page">
  <section class="section section--active color1" data-letter="t">
    <article class="section__wrapper">
      <h1 class="section__title">Thomas Edison Tribute</h1>
      <p>Samraj Moorjani & Arun Sarma</p>
      <p>2B WHAP</p>
      <p>Use the arrow keys to navigate or click on the tabs.</p>
      <p><br>If arrows don't work, click anywhere within the website margains</p>
    </article>
  </section>
  <section class="section color2" data-letter="i">
    <article class="section__wrapper">
      <h1 class="section__title">Introduction</h1>
      <p>Thomas Edison was an American inventor and business man who was later declared as America's greatest inventor. He developed many devieces including the phonograph, the motion picture camera, and the practical, long-lasting light bulb. He is also credited with the creation of the first industrial research laboratory. Thomas Edison holds 1,093 US patents in his name along with many others in the United Kingdom, France, and Germany.</p>
    </article>
  </section>
  <section class="section color3" data-letter="e">
    <article class="section__wrapper">
      <h1 class="section__title">Early Life</h1>
      <p>Thomas Edison was born on February 11, 1847. He was mainly self-taught, learning from books and from his mother at home. He became a telegrapher and later moved to Kentucky where he worked the Associated Press bureau newswire. He enjoyed two things as a young man, reading and experimenting, the latter costing him his job. Edison was first hugely recognized at 30 after his invention of the phonograph.</p>
    </article>
  </section>
  <section class="section color4" data-letter="l">
    <article class="section__wrapper">
      <h1 class="section__title">Late Life</h1>
     <p>After his perfection of the long-lasting light bulb, Edison formed the Edison Electric Light Company. Edison's first commercial application of his light bulb was on the Columbia when it was sent to New York City. Thomas Edison, however, was refused a patent due to his patent was based off of the work of William E. Sawyer. Edison faced many challenges including competition from companies installing AC systems, while he was installing DC systems. After the development of the transformer in Europe, AC energy became cheaper and more efficient compared to DC energy.</p>
    </article>
  </section>
  <section class="section color5" data-letter="a">
    <article class="section__wrapper">
      <h1 class="section__title">Achievements</h1>
      <p>Thomas Edison invented hundreds of items, some of the most famous being the phonograph, motion pictures, and the light bulb (controversial due to earlier work by other scientists). Other inventions/projects of his included: Fluoroscopy, Telegraph improvements, rollers and crushers for mining, the accumulator, the first Nickel-Iron-Battery with Lye as a liquid, a new way to extract rubber and much more. Some of his awards include the John Fritz Medal, the Navy Distinguished Service Medal, the Congressional Gold Medal, the Franklin Medal, the Matteucci Medal, and many more.</p>
    </article>
  </section>
  <section class="section color6" data-letter="i">
    <article class="section__wrapper">
      <h1 class="section__title">Impacts</h1>
      <p>Thomas Edison continues to impact us today mainly through his work on lightbulbs, motion picture, and the phonograph, however, his impact on the industrial revolution was even greater. His invention of the long-lasting light bulb allowed workers to work into the night and made the night more than just a period of time to sleep. He greatly helped the entertainment industry and he also developed a system of electric-power generation and distribution which has helped create the present day's electric-power systems. Thomas Edison continues to inspire many people and he is still awarded, even past life. He continues to impact us today through his inventions and ideals.</p>
    </article>
  </section>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SamrajM/thomas-edison-tribute-yMqdMd */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255,255,255,0);
}
body {
  line-height: 1.5;
  font-family: 'Montserrat';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #1a1a1a;
  background: #1a1a1a;
}
a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.nav {
  will-change: transform;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  background: #1a1a1a;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav--active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.nav__list {
  display: flex;
}
.nav__item {
  flex: 1;
  position: relative;
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav__item:hover {
  opacity: 0.75;
}
.nav__thumb {
  display: block;
  height: 120px;
  background: #dc143c;
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav__thumb:before {
  content: attr(data-letter);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 70px;
  text-transform: uppercase;
  opacity: 0.15;
}
.nav__label {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #1a1a1a;
  margin: 0;
}
@media (max-width: 850px) {
  .nav__label {
    font-size: 14px;
  }
}
@media (max-width: 720px) {
  .nav__label {
    display: none;
  }
  .nav__thumb {
    height: 90px;
  }
  .nav__thumb:before {
    font-size: 32px;
    opacity: 0.7;
  }
}
.burger {
  position: absolute;
  right: 0;
  top: 100%;
  width: 60px;
  height: 60px;
  background: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.burger__patty {
  position: relative;
  width: 60%;
  height: 2px;
  background: #fff;
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.burger__patty:before,
.burger__patty:after {
  will-change: transform;
  content: "";
  position: absolute;
  left: 0;
  background: #fff;
  height: 2px;
  width: 100%;
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.burger__patty:before {
  top: -10px;
}
.burger__patty:after {
  top: 10px;
}
.burger--close .burger__patty {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.burger--close .burger__patty:before {
  -webkit-transform: rotate(-90deg) translate(-9px, 0);
          transform: rotate(-90deg) translate(-9px, 0);
}
.burger--close .burger__patty:after {
  opacity: 0;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.page {
  height: 100vh;
  will-change: transform;
  -webkit-perspective: 400px;
          perspective: 400px;
  overflow: hidden;
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.section {
  will-change: transform;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.section--hidden {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.section--active {
  -webkit-transform: translateX(0) rotateY(0);
          transform: translateX(0) rotateY(0);
  z-index: 2;
}
.section:before {
  content: attr(data-letter);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 75vh;
  text-transform: uppercase;
  opacity: 0.15;
  z-index: -1;
}
.section__wrapper {
  width: 100%;
  max-width: 800px;
  padding: 0 8vw;
}
.section__title {
  margin: 0 0 25px 0;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 4px;
}
.section p {
  margin: 0 0 25px 0;
  font-family: 'Georgia';
  font-size: 20px;
}
.section p:last-child {
  margin-bottom: 0;
}
.color1 {
  background: #1abc9c;
}
.color2 {
  background: #e74c3c;
}
.color3 {
  background: #3498db;
}
.color4 {
  background: #f4d03f;
}
.color5 {
  background: #9b59b6;
}
.color6 {
  background: #bdc3c7;
}
.logo {
  position: fixed;
  top: 195px;
  right: 7px;
  z-index: 2;
}
@media (max-width: 720px) {
  .logo {
    top: 160px;
  }
}
.logo img {
  width: 45px;
  -webkit-transform: rotate(0);
          transform: rotate(0);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.logo img:hover {
  -webkit-transform: rotate(180deg) scale(1.1);
          transform: rotate(180deg) scale(1.1);
}


/*Downloaded from https://www.codeseek.co/SamrajM/thomas-edison-tribute-yMqdMd */
var Nav = (function() {
  
  var
  	nav 		= $('.nav'),
  	burger	= $('.burger'),
    page 		= $('.page'),
    section = $('.section'),
    link		= nav.find('.nav__link'),
    navH		= nav.innerHeight(),
    isOpen 	= true,
    hasT 		= false;
  
  var toggleNav = function() {
    nav.toggleClass('nav--active');
    burger.toggleClass('burger--close');
    shiftPage();
  };
  
  var shiftPage = function() {
    if (!isOpen) {
      page.css({
        'transform': 'translateY(' + navH + 'px)',
        '-webkit-transform': 'translateY(' + navH + 'px)'
      });
      isOpen = true;
    } else {
      page.css({
        'transform': 'none',
        '-webkit-transform': 'none'
      });
      isOpen = false;
    }
  };
  
  var switchPage = function(e) {
    var self = $(this);
    var i = self.parents('.nav__item').index();
    var s = section.eq(i);
    var a = $('section.section--active');
    var t = $(e.target);
    
    if (!hasT) {
      if (i == a.index()) {
        return false;
      }
      a
      .addClass('section--hidden')
      .removeClass('section--active');

      s.addClass('section--active');

      hasT = true;

      a.on('transitionend webkitTransitionend', function() {
        $(this).removeClass('section--hidden');
        hasT = false;
        a.off('transitionend webkitTransitionend');
      });
    }

    return false;
  };
  
  var keyNav = function(e) {
    var a = $('section.section--active');
    var aNext = a.next();
    var aPrev = a.prev();
    var i = a.index();
    
    
    if (!hasT) {
      if (e.keyCode === 37) {
      
        if (aPrev.length === 0) {
          aPrev = section.last();
        }

        hasT = true;

        aPrev.addClass('section--active');
        a
          .addClass('section--hidden')
          .removeClass('section--active');

        a.on('transitionend webkitTransitionend', function() {
          a.removeClass('section--hidden');
          hasT = false;
          a.off('transitionend webkitTransitionend');
        });

      } else if (e.keyCode === 39) {

        if (aNext.length === 0) {
          aNext = section.eq(0)
        } 


        aNext.addClass('section--active');
        a
          .addClass('section--hidden')
          .removeClass('section--active');

        hasT = true;

        aNext.on('transitionend webkitTransitionend', function() {
          a.removeClass('section--hidden');
          hasT = false;
          aNext.off('transitionend webkitTransitionend');
        });

      } else {
        return
      }
    }  
  };
    
  var bindActions = function() {
    burger.on('click', toggleNav);
    link.on('click', switchPage);
    $(document).on('ready', function() {
       page.css({
        'transform': 'translateY(' + navH + 'px)',
         '-webkit-transform': 'translateY(' + navH + 'px)'
      });
    });
    $('body').on('keydown', keyNav);
  };
  
  var init = function() {
    bindActions();
  };
  
  return {
    init: init
  };
  
}());

Nav.init();

Comments