Item: Nav scroll animation
Rating: 3.4
Author: -J0hn-

4 Downloads
132 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Nav scroll animation</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

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

  
</head>

<body>

  <nav>
  <h1>logo</h1>
  <ul>
    <li class="dropdown">
      <a href="#" class="dropped">about 
        <i class="fa fa-chevron-down"></i>
      </a>
    </li>
    <li>
      <a href="#">services 
        <i class="fa fa-chevron-down"></i>
      </a>
    </li>
    <li>
      <a href="#">events 
        <i class="fa fa-chevron-down"></i>
      </a>
    </li>
    <li>
      <a href="#">resources 
        <i class="fa fa-chevron-down"></i>
      </a>
    </li>
    <li>
      <a href="#">contact</a>
    </li>
  </ul>  
</nav>

<header>

</header>

<section>
  
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

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




</body>

</html>


/*Downloaded from https://www.codeseek.co/-J0hn-/nav-scroll-animation-pLRvpO */
h1 {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

nav {
  padding: 0 10px;
  transition: .5s;
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav h1 {
  opacity: 0;
  font-weight: 100;
  color: #666;
}

nav ul {
  display: flex;
  justify-content: flex-end;
}
nav ul li a {
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  color: white;
  display: inline-block;
  padding: 25px 15px;
}
nav ul li a i {
  color: orange;
  vertical-align: top;
  margin-left: 5px;
}
nav ul li a:hover {
  color: orange;
}

header {
  height: 100vh;
  background: linear-gradient(0deg, rgba(0, 0, 139, 0.7), rgba(0, 0, 139, 0.7)), url("https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?h=350&auto=compress&cs=tinysrgb") no-repeat center center;
  background-size: cover;
}

section {
  height: 100vh;
}

nav.animate {
  padding: 0 50px;
  border-top: 6px solid darkblue;
  box-shadow: 0 4px 6px 0 #ccc;
  background: white;
}
nav.animate h1 {
  opacity: 1;
}
nav.animate ul li a {
  color: #666;
  border-top: none;
}
nav.animate ul li a:hover {
  color: orange;
}


/*Downloaded from https://www.codeseek.co/-J0hn-/nav-scroll-animation-pLRvpO */
$(window).on('scroll', function() {
  var scrollPos = this.pageYOffset;
  var $header = $('header').innerHeight()
  if(scrollPos >= $header - 60) {
    $('nav').addClass('animate')
  } else {
    $('nav').removeClass('animate')
  }
})

Comments

More from -J0hn-

Nav scroll animation

In this example below you will see how to do a Nav scroll animation with some HTML / CSS and Javascript

Technologies

Comments

More from -J0hn-

A Pen by John

Simple Responsive nav

Nav scroll animation

Title Case a Sentence

You Might Also Like

Calculator Design

React MD like checkbox

CSS Animation - Simple Image Gallery

Build a Wikipedia Viewer - FCC

Pure CSS radial progress bar

Random Quote -- Zambia inspires

Shirobako

Suggested CSS Animations (Phase 1)