Scrolly.js official demo

In this example below you will see how to do a Scrolly.js official demo with some HTML / CSS and Javascript

Official demo por Scrolly.js: https://github.com/migaos/Scrolly.js

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Scrolly.js official demo</title>
  
    <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>

  
<header>
  <nav>
    <ul>
      <li><a class="active" data-scrolly-target="#home" data-scrolly-active="data-scrolly-active">Home</a></li>
      <li><a data-scrolly-target="#portfolio">Portfolio</a></li>
      <li><a data-scrolly-target="#contact-me">Contact me</a></li>
    </ul>
  </nav>
</header>
<section class="pages">
  <div class="page home" id="home" data-scrolly-page="data-scrolly-page" data-scrolly-active="data-scrolly-active"></div>
  <div class="page portfolio" id="portfolio" data-scrolly-page="data-scrolly-page"></div>
  <div class="page contact-me" id="contact-me" data-scrolly-page="data-scrolly-page"></div>
</section>
  <script src='https://cdn.rawgit.com/migaos/Scrolly.js/dc1a0b2/scrolly.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/mitsugarzaki/scrollyjs-official-demo-EKLBre */
*, *:before, *:after {
  box-sizing: border-box;
}

header {
  display: block;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
header nav {
  align-items: center;
  display: flex;
  height: 60px;
  justify-content: flex-end;
  padding: 0 50px;
  width: 100%;
}
header nav ul {
  display: block;
  list-style: none;
}
header nav ul li {
  display: inline-block;
}
header nav ul li a {
  border-bottom: 2px solid transparent;
  display: block;
  color: #FFF;
  cursor: pointer;
  font-family: ubuntu;
  font-size: 14px;
  font-weight: 600;
  margin: 0 5px;
  padding: 5px 8px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .25s ease;
}
header nav ul li a:hover {
  color: gold;
}
header nav ul li a.active {
  border-bottom-color: #FFF;
}

.pages {
  display: block;
}
.pages .page {
  display: block;
  height: 100vh;
  width: 100vw;
}
.pages .page.home {
  background-color: #27ae60;
}
.pages .page.portfolio {
  background-color: #f1c40f;
}
.pages .page.contact-me {
  background-color: #95a5a6;
}


/*Downloaded from https://www.codeseek.co/mitsugarzaki/scrollyjs-official-demo-EKLBre */
'use strict';

document.addEventListener('DOMContentLoaded', function () {
  var scrolly = Scrolly.run({
    pageMode: true,
    duration: 900,
    timmingFn: 'easeOutInQuad',
    onAnchorClick: onAnchorClick,
    afterScroll: afterScroll
  });

  function onAnchorClick(anchor) {
    console.log('On anchor click');
    scrolly.anchors.forEach(function (a) {
      return a.classList.remove('active');
    });
    anchor.classList.add('active');
  }
  function afterScroll(source, target) {
    console.log('After scroll....');
    scrolly.anchors.forEach(function (a) {
      return a.classList.remove('active');
    });
    var activeAnchor = scrolly.anchors.filter(function (a) {
      if (scrolly.isAnchorActive(a)) return a;
    })[0];
    activeAnchor.classList.add('active');
  }
});

Comments