Pure CSS Scrolling Panel Theme (WIP)

In this example below you will see how to do a Pure CSS Scrolling Panel Theme (WIP) with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Pure CSS Scrolling Panel Theme (WIP)</title>
  <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <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>

  <a id="splash"></a>
<a id="about"></a>
<a id="what"></a>
<a id="where"></a>
<nav role='navigation'>
  <ul>
    <li><a href="#splash"><span class="tooltips">La Razionale Alcoolica</span></a></li>
    <li><a href="#about"><span  class="tooltips">Cos'è?</span></a></li>
    <li><a href="#what"><span  class="tooltips">Chi siamo?</span></a></li>
    <li><a href="#where"><span  class="tooltips">Dove? Quando?</span></a></li>
  </ul>
</nav>  

<div id="content">
  <section class="panel" id="splash">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/105508/LRA_Web.jpg" alt="" />
    <div class="panel-bg"></div>
    <div class="panel--content">
      <h1>La Razionale Alcoolica</h1>
      <p>... che con due
BIRRE è
CHIARA
pure la meccanica
quantistica ...
</p>
    </div>
  </section>
  <section class="panel" id="about">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/105508/LRA_Web.jpg" alt="" />
    <div class="panel-bg"></div>
    <div class="panel--content">
      <h1>Cos'è?</h1>
      <p>Stanchi dei soliti discorsi da birreria?</p>
      <p>Partecipa a <strong>La Razionale Alcoolica!</strong></p>
      <p>Una volta al mese un gruppo di persone e un argomento, di cui discutere con l'aiuto della razionalità e della birra.</p>
      <p>Spesso ad una conferenza di carattere scientifico è difficile dire la propria. La <strong>Razionale Alcoolica</strong> non ha nessun relatore: avrai la possibilità di esprimere il tuo parere su ogni argomento, confrontarti con gli altri partecipanti e apprezzare che anche parlare di scienza è divertente</p>
    </div>
  </section>
  <section class="panel panel--what" id="what">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/105508/LRA_Web.jpg" alt="" />
    <div class="panel-bg"></div>
    <div class="panel--content">
      <h1>Chi Siamo?</h1>
      <p><strong>La Razionale Alcoolica</strong> è la "versione italiana" di </br><a href="">Skeptics in the Pub</a></p>
      <p>L'idea di portarlo in Italia è del </br><strong>Coordinamento CICAP di Cuneo.</strong></p>
    </div>
  </section>
  <section class="panel" id="where">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/105508/LRA_Web.jpg" alt="" />
    <div class="panel-bg"></div>
    <div class="panel--content panel--where">
      <h1>Dove? Quando?</h1>
      <ul>
        <li>
          <span>16/06</span>
          <div class="event">
            <h3>Santi, Poeti, Mummie e Madonne dei Piloni</h3>
            <p>Due birre e tante chiacchiere su paranormale e religione</p>
          </div>
        </li>
        <li>
          <span>17/07</span>
          <div class="event">
            <h3>Essere superstiziosi porta male!</h3>
            <p>Due birre e tante chiacchiere sul venerdì 17</p>
          </div>
        </li>
      </ul>
    </div>
  </section>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/bertog/pure-css-scrolling-panel-theme-wip-yNgGMq */
/* Colors definition */
/* scrolling magic */
a[id="about"]:target ~ #content section.panel {
  -webkit-transform: translateY(-100vh);
          transform: translateY(-100vh);
}

a[id="what"]:target ~ #content section.panel {
  -webkit-transform: translateY(-200vh);
          transform: translateY(-200vh);
}

a[id="where"]:target ~ #content section.panel {
  -webkit-transform: translateY(-300vh);
          transform: translateY(-300vh);
}

/* Layout */
html, body {
  width: 100%;
  height: 100%;
  min-width: 640px;
}

nav {
  position: fixed;
  z-index: 10;
  top: 50%;
  right: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
nav ul {
  list-style: none;
}
nav ul li a {
  position: relative;
  background: rgba(252, 252, 252, 0.7);
  width: 30px;
  height: 30px;
  text-decoration: none;
  display: block;
  padding: 0;
  margin-bottom: 2px;
  border-radius: 10px;
}
nav ul li a:hover .tooltips {
  visibility: visible;
}
nav ul li a:active {
  background: rgba(118, 62, 62, 0.75);
}
nav ul li .tooltips {
  position: absolute;
  opacity: 0.8;
  right: 100%;
  top: 50%;
  margin-top: -15px;
  margin-right: 15px;
  z-index: 100;
  display: inline;
  width: 140px;
  color: #fff;
  background: #2D414D;
  height: 30px;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
  border-radius: 0px;
  visibility: hidden;
  font-family: 'Open Sans Condensed', sans-serif;
}
nav ul li .tooltips:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid #2D414D;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

#content {
  overflow: hidden;
  height: 100vh;
}

.panel {
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 0;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  color: #fcfcfc;
  overflow: hidden;
}
.panel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -20;
  -webkit-filter: blur(5px) grayscale(65%);
          filter: blur(5px) grayscale(65%);
  -webkit-animation: moveUp 2s 1;
          animation: moveUp 2s 1;
}
@media screen and (max-width: 1024px) {
  .panel img {
    width: 200%;
    left: -50%;
  }
}
.panel .panel--content {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 2em;
  background: rgba(118, 62, 62, 0.25);
  border: 1px solid #fcfcfc;
}
.panel .panel--content h1 {
  padding: 0;
  margin: 0;
  font-family: 'Rock Salt', cursive;
  font-size: 2.5em;
  text-align: center;
}
.panel .panel--content p {
  color: rgba(252, 252, 252, 0.8);
  font-family: 'Special Elite', cursive;
  font-size: 1.3em;
  text-align: center;
}
.panel .panel--content a {
  color: #807F55;
  text-decoration: none;
  opacity: 1;
  transition: all 0.1s ease-in-out;
}
.panel .panel--content a:hover {
  color: rgba(118, 62, 62, 0.75);
  text-decoration: underline;
}
.panel .panel--content .where--container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 80%;
}
.panel .panel--content .where--container .where-item {
  width: 25%;
  margin: 10px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  z-index: 20;
}
.panel .panel--content .where--container .where-item .lra_details {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
}
.panel .panel-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 5, 5, 0.75);
  z-index: -10;
}
.panel .panel--where {
  width: 70%;
}
.panel .panel--where ul {
  list-style: none;
}
.panel .panel--where ul li {
  margin-bottom: 5px;
}
.panel .panel--where ul li span {
  width: 15%;
  float: left;
  font-family: 'Special Elite', cursive;
  font-size: 2.5em;
  padding: 20px;
  margin: 5px 10px;
  background: #807F55;
}
.panel .panel--where ul li .event {
  float: right;
  width: 70%;
}
.panel .panel--where ul li .event h3 {
  margin: 0;
  padding: 0;
  padding-top: 10px;
  font-family: 'Special Elite', cursive;
  font-size: 1.8em;
  text-align: right;
}
.panel .panel--where ul li .event p {
  text-align: right;
}

/* Animation Magic */
@-webkit-keyframes moveUp {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes moveUp {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Comments