HomeTest

hometest.markdown

HomeTest

While researching about CSS custom properties I had the idea of building a parallax site based mostly on CSS. A first test can be found here ( http://codepen.io/Hornebom/pen/bWrXoW )

The approach was to leave most of the calculation of positioning the single elements to the browser itself. By changing just 6 css 'variables', which are used as basis for transforms, I want to overcome the common practice of updating inline styles on every parallax item.

Seems as in Firefox it's not possible to use custom properties for transforms on pseudo elements

A Pen by Emanuele on CodePen.

License.

index.html

<main class="content js-content">
  
  <section class="block section-landing">
    <!--<figure class="item-parallax-media">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/luca-bravo-189272.jpg" alt="" />
    </figure>
    <div class="item-parallax-content flex-container">
      <div class="landing-content centered-content">
        <h1 class="head-large">We love Things</h1>
      </div>
    </div>-->
    <div class="container">

      <header>
        <h2><a href="#"><i class="ion-plane"></i> Loconsegno.Io</a></h2>
        <nav>
          <ul>
            <!--<li>
              <a href="#" title="Hotels">Come funziona?</a>
            </li>-->
            <li>
              <a href="#" title="Flights">Come funziona</a>
            </li>
            <li>
              <a href="#" title="Tours">Sei un venditore?</a>
            </li>
            <li>
              <a class="btn" href="#" title="Register / Log In">Registrati/Accedi </a>
            </li>
          </ul>
        </nav>
      </header>

      <div class="cover">
        <h1>Trova ora ció che cerchi.</h1>
        <form  class="flex-form">
          <label for="from">
            <i class="ion-location"></i>
          </label>
          <input type="search" placeholder="Qual é il tuo indirizzo?">
          <input type="submit" value="Search">
        </form>
        <div id="madeby">
          <span>
            Photo by <a href="https://unsplash.com/" target="_blank">Unsplash</a>
          </span>
        </div>
      </div>

    </div>
  </section>
  
  <section class="block section-intro">
    <div class="item-parallax-content flex-container">
      <div class="centered-content">
        <h2 class="head-small head-centered">Come funziona?</h2>
        <p class="copy copy-white">
        La piattaforma Loconsegno.io mira a facilitare l’individuazione delle attività che effettuano consegna a domicilio sul territorio.<br>
É possibile visionare tutte le attività che hanno effettuato la registrazione al sito, il raggio di consegna e le loro informazioni di contatto.
        </p>
        <p class="copy copy-white">
  La piattaforma consente inoltre di avere ulteriori benefici come una pagina web personalizzata che puó essere utilizzata come sito web.
        </p>
      </div>
    </div>
  </section>
  
  <section class="block section-part">
    <figure class="item-parallax-media">
      <img src="https://images.unsplash.com/photo-1521791136064-7986c2920216" alt="" />
    </figure>
    <div class="item-parallax-content flex-container">
      <div class="centered-content">
        <h1 class="head-large head-centered">Sei un<br/>venditore?</h1>
        <p class="copy copy-white">
         Clicca qui per ulteriori informazioni.
        </p>
      </div>
    </div>
  </section>
  
  <section class="block">
    <div class="item-parallax-content flex-container img-grid">
      <figure class="img-gridItem type-right">
        <img src="https://images.unsplash.com/photo-1528952686551-542043782ab9" alt="" />
        <figcaption class="img-caption">
          <h2 class="head-small">Favorisci l'imprenditoria locale</h2>
          <p class="copy copy-white">
            Perché acquistare prodotti lontani? Noi crediamo che il futuro passa da qui.
          </p>
        </figcaption>
      </figure>
      <figure class="img-gridItem type-left">
        <img src="https://images.unsplash.com/photo-1533027052290-2b4ece075c42" alt="" />
        <figcaption class="img-caption">
          <h2 class="head-small">Mappa</h2>
          <p class="copy copy-white">
            Sapevi che su Loconsegno.io é presente una mappa che mostra tutte le attivitá della tua zona?
          </p>
        </figcaption>
      </figure>
    </div>
  </section>
  
  <section class="block section-end">
    <figure class="item-parallax-media">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noah-silliman-141979.jpg" alt="" />
    </figure>
    <div class="item-parallax-content flex-container">
      <div class="landing-content centered-content">
        <h1 class="head-large">Trova gratis le attivitá della tua zona.</h1>
      </div>
    </div>
  </section>
  
  <section class="custom-properties-ftw">
    <h3 class="head-small head-centered">Footer</h3>
  </section>
</main>

script.babel

const body = document.body;
const content = document.querySelector('.js-content');
const blocks = document.querySelectorAll('.block');

const updateOffset = () => {
  requestAnimationFrame(updateOffset);
  body.style.setProperty('--y', content.scrollTop);
  updateProps();
}

const updateProps = () => {  
  let i = -1;
  for(let block of blocks) {
    i += 1;
    let top = blocks[i].getBoundingClientRect().top;
    if(top < window.innerHeight*1.3 && top > window.innerHeight*-1.3) {
      body.style.setProperty(`--yBlock-${i+1}`, top);
    } else {
      body.style.setProperty(`--yBlock-${i+1}`, 0); 
    }
  }
}

updateProps();
updateOffset();

style.scss

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

::-webkit-input-placeholder {
  color: #56585b;
}

::-moz-placeholder {
  color: #56585b;
}

:-moz-placeholder {
  color: #56585b;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  background: url('https://images.unsplash.com/photo-1548695607-9c73430ba065') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  color: #0a0a0b;
  overflow: hidden;
}

ul, nav{
  list-style: none;
  padding: 0;
}

a {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.9;
}

a:hover {
  opacity: 1;
}

h1 {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1.5rem;
}

i {
  font-size: 1.3rem;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 10px 100px 0;
}

header nav ul {
  display: flex;
}

header nav li{
  margin: 0 15px;
}

header nav li:first-child{
  margin-left: 0; 
}

header nav li:last-child{
  margin-right: 0;  
}

a.btn {
  color: #fff;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.5);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

a.btn:hover {
  background: #d73851;
  border: 1px solid #d73851;
  color: #fff;
}

.cover  {
  height: 100vh;
  width: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.05)), to(rgba(0,0,0,0)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
  padding: 20px 50px;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}

.flex-form input[type="submit"] {
  background: #ef3f5a;
  border: 1px solid #ef3f5a;
  color: #fff;
  padding: 0 30px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

.flex-form input[type="submit"]:hover {
  background: #d73851;
  border: 1px solid #d73851;
}

.flex-form {
  display: -webkit-box;
  display: flex;
  z-index: 10;
  position: relative;
  width: 500px;
  box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.3);
}

.flex-form > * {
  border: 0;
  padding: 0 0 0 10px;
  background: #fff;
  line-height: 50px;
  font-size: 1rem;
  border-radius: 0;
  outline: 0;
  -webkit-appearance: none;
}

input[type="search"] {
  flex-basis: 500px;
}

#madeby {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 25px 100px;
  color: #fff;
}

@media all and (max-width:800px) {
  body {
    font-size: 0.9rem;
  }

  .flex-form {
    width: 100%;
  }

  input[type="search"] {
    flex-basis: 100%;
  }

  .flex-form > * {
    font-size: 0.9rem;
  }

  header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding: 10px !important;
  }

  header h2 {
    margin-bottom: 15px;
  }

  h1 {
    font-size: 2rem;
  }

  .cover {
    padding: 20px;
  }

  #madeby {
    padding: 30px 20px;
  }
}

@media all and (max-width:360px) {
  header nav li{
    margin: 0 10px;
  }

  .flex-form {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }

  input[type="search"] {
    flex-basis: 0;
  }

  label {
    display: none;
  }
}
/* End first page*/
/*Start parallax SCSS*/
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.content {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  clip-path: border-box;
  transform: translateZ(0);
}

.block {
  position: relative;
  height: 100vh;
}

[class*='item-parallax'] {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-out;
  will-change: transform; // prevents paint flashing
}

.item-parallax-media {
  z-index: 1;
  
  img {
    will-change: transform; // prevents paint flashing
  }
}
.item-parallax-content {
  z-index: 2;
}


$boxes: 5;
@for $i from 1 through $boxes {
  .block:nth-child( #{$i} ) .item-parallax-content {
    transform: translateY( calc( var(--yBlock-#{$i}) * 0.5px ) );
  }
  .block:nth-child( #{$i} ) .item-parallax-media img {
    transform: translateY( calc( var(--yBlock-#{$i}) * 0.1px ) );
  }
}


// --------------- layout

$dark: #00171f;
$light: white;

@mixin font($type:regular) {
  @if $type == head {
    font-family: 'Inknut Antiqua', serif;
  }
  @if $type == regular {
    font-family: 'Roboto', sans-serif;
  }
  @if $type == condensed {
    font-family: 'Roboto Condensed', sans-serif;
  }
}

@mixin font-smoothing($value: on) {
  @if $value == on {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

html {
  background-color: $dark;
}

.flex-container {
  display: flex;
}
.centered-content {
  margin: auto;
}

.head-large {
  margin-bottom: 5vw;
  font-size: 8vw;
  line-height: 1.2em;
  @include font(head);
  color: $light;
}
.head-small {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  line-height: 1.2em;
  @include font(condensed);
  color: $light;
  /*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/

  text-transform: uppercase;
  letter-spacing: 0.5em;
  @include font-smoothing(on);
}
.head-centered {
  text-align: center;
}



.copy {
  display: block;
  max-width: 500px;
  margin-right: auto;
  margin-bottom: 1.5rem;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  @include font(regular);
  font-size: 1.3rem;
  line-height: 1.8em;
  text-align: center;
}
.copy-white {
  color: $light;
  text-shadow: #000 0px 0px 2px,   #000 0px 0px 2px,   #000 0px 0px 2px,
             #000 0px 0px 2px,   #000 0px 0px 2px,   #000 0px 0px 2px;
-webkit-font-smoothing: antialiased;
  
  @include font-smoothing(on);
}







.item-parallax-media {
  overflow: hidden;
  
  img {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    object-fit: cover;
  }
}

// ------------ landing
.section-landing:before {
  display:none;//Dont show while line on mobile for sure
  content: '';
  position: absolute;
  top: 50%;
  left: 24%;
  width: 10px;
  height: 80%;
  background-color: white;
  z-index: 3;
  transform: translateY(-13vw);
}

.section-landing .item-parallax-media {
  opacity: calc( 1 - (var(--y) * 0.0009) );
}

.landing-content {
  padding-left: 30%;
}

// ---------------- intro
.section-intro:before {
  display:none;//Dont show while line on mobile for sure
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 80%;
  background-color: mix($light, $dark, 5%);
  transform: 
    translateX(-50%) 
    translateY(-50%) 
    rotate( calc( (var(--y) * 0.1deg) ) );
  will-change: transform;
  backface-visibility: visible;
}


// ------------------ image grid
.img-grid {
  flex-direction: column;
  justify-content: space-around;
}

.img-gridItem {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  
  img {
    display: block;
    width: 50%;
    height: 40vh;
    object-fit: cover;
    will-change: transform;
    backface-visibility: visible;
  }
  
  &.type-left img {
    margin-right: auto;  
  }
  &.type-right img {
    margin-left: auto;  
  }
}

.img-gridItem {
  &:nth-child(1) img {
    transform: translateX( calc( var(--yBlock-4) * -0.03% ) );
  }
  &:nth-child(2) img {
    transform: translateX( calc( var(--yBlock-4) * 0.03% ) );
  }
}

.img-caption {
  position: absolute;
  top: 50%;
  width: 50%;
  transform: translateY(-50%);
  
  * {
      text-align: left;
      padding-right: 1.5rem;
      padding-left: 1.5rem;
    }
  
  .type-left & {
    right: 0;
  }
  .type-right & {
    left: 0;
  }
}


// ---------------- end
.section-end:before {
  content: '';
  position: absolute;
  bottom: 50%;
  left: 24%;
  width: 10px;
  height: 80%;
  background-color: white;
  z-index: 3;
  transform: translateY(8vw);
}


// -------------- kind of a footer
.custom-properties-ftw {
  padding: 2.5rem 1.5rem;
  
  .head-small {
    margin-bottom: 0;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua:600|Roboto|Roboto+Condensed:700" rel="stylesheet" />