Untitled an unused

možná nový HAL...

by Petr Haluza

HTML

<div class="app">
  <header class="header">
    <div class="header__left">
      <span>Test skrolu produktů</span>
    </div>
    <div class="header__right">
      <p>Možná pro nový HAL3000</p>
    </div>
  </header>

  <nav class="nav">
    <ul class="nav__menu">
      <li class="nav__item">
        <a href="#pc-id01" class="nav__link" data-scroll-to>
          <div class="media">
            <img src="https://lonelyplanetimages.imgix.net/mastheads/stock-photo-st-stephens-church-112868985.jpg?sharp=10&vib=20&w=2000" alt="" class="media__img">
            <p class="media__content"> <strong>pc-id01</strong><br /> HAL3000 MČR Elite 2018 i9 </p>
          </div>
        </a>
      </li>
      <li class="nav__item">
        <a href="#pc-id02" class="nav__link" data-scroll-to>
          <div class="media">
            <img src="https://lonelyplanetimages.imgix.net/mastheads/54989636.jpg?sharp=10&vib=20&w=2000" alt="" class="media__img">
            <p class="media__content"> <strong>pc-id02</strong><br /> HAL3000 MČR Pro 2018 </p>
          </div>
        </a>
      </li>
      <li class="nav__item">
        <a href="#pc-id03" class="nav__link" data-scroll-to>
          <div class="media">
            <img src="https://lonelyplanetimages.imgix.net/mastheads/GettyImages-538096543_medium.jpg?sharp=10&vib=20&w=2000" alt="" class="media__img">
            <p class="media__content"> <strong>pc-id03</strong><br /> HAL3000 MČR Pro 2018 </p>
          </div>
        </a>
      </li>
    </ul>
  </nav>

  <main class="main">

    <article class="section" id="pc-id01" data-section>
      <header class="section__header" style="background-image: url('https://lonelyplanetimages.imgix.net/mastheads/stock-photo-st-stephens-church-112868985.jpg?sharp=10&w=2000');">
        <h1 class="section__title">pc-id01</h1>
        <p class="section__subtitle">48.21°N, 16.36°E</p>
        <div class="section__controls">
          <button class="btn btn--prev" title="Previous">            <span...

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  height: 100%;
  overflow: hidden;
  color: #FFF;
  background-color: #121519;
  font-family: 'Montserrat', 'Roboto', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

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

a {
  text-decoration: none;
}

p {
  margin: 1rem 0;
}

.app {
  display: grid;
  grid-template-rows: 4rem 1fr 4rem;
  grid-template-columns: 20% 1fr;
  height: 100vh;
}

.header,
.footer {
  font-size: .75rem;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #a0a0a0;
}

.header {
  display: flex;
  justify-content: space-between;
  grid-column: 1 / -1;
  padding: 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header__left, .header__right {
  display: flex;
  align-items: center;
}

.main {
  grid-column: 1 / -1;
  padding: 2rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-perspective: 1px;
          perspective: 1px;
  -webkit-scroll-snap-type: block proximity;
      -ms-scroll-snap-type: block proximity;
          scroll-snap-type: block proximity;
  -webkit-scroll-snap-destination: 0% 100%;
      -ms-scroll-snap-destination: 0% 100%;
          scroll-snap-destination: 0% 100%;
  -webkit-scroll-snap-points-y: repeat(100%);
      -ms-scroll-snap-points-y: repeat(100%);
          scroll-snap-points-y: repeat(100%);
}
@media screen and (min-width: 1024px) {
  .main {
    grid-column: 2 / -1;
  }
}

.footer {
  display: flex;
  align-items: center;
  grid-column: 1 / -1;
  padding: 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer p {
  margin-right: 1rem;
}
.footer a {
  color: #FFF;
}
.footer a:hover, .footer a:focus {
  text-decoration: underline;
}
.footer__more {
  display: none;
  margin-left: auto;
  margin-right: 0;
}
@media screen and (min-width: 768px) {
  .footer__more {
    display: block;
  }
}

.nav {
  display: none;
  border-right:...

JavaScript

var SELECTORS = {
  section: '[data-section]',
  scrollTo: '[data-scroll-to]',
  scrollDir: '[data-scroll-dir]' };

var sectionsArray = Array.from(document.querySelectorAll(SELECTORS.section));
var scrollToElements = document.querySelectorAll(SELECTORS.scrollTo);
var scrollDirElements = document.querySelectorAll(SELECTORS.scrollDir);

var currentSectionIndex = 0;

var getScrollTarget = function getScrollTarget(dir) {
  if (dir === 'prev' && currentSectionIndex > 0) {
    currentSectionIndex--;
    return sectionsArray[currentSectionIndex];
  }
  if (dir === 'next' && currentSectionIndex < sectionsArray.length - 1) {
    currentSectionIndex++;
    return sectionsArray[currentSectionIndex];
  }
  return false;
};

scrollDirElements.forEach(function (el) {
  el.addEventListener('click', function () {
    var direction = el.dataset.scrollDir;
    var target = getScrollTarget(direction);

    if (target) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

scrollToElements.forEach(function (el) {
  el.addEventListener('click', function (e) {
    e.preventDefault();
    var targetId = el.getAttribute('href');
    var target = document.querySelector(targetId);

    if (target) {
      sectionsArray.forEach(function (section, index) {
        if (section.id === targetId.replace('#', '')) {
          currentSectionIndex = index;
        }
      });
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});