DailyUi 003 - Landing Page with Parallax bg

dailyui-003-landing-page-with-parallax-bg.markdown

DailyUi 003 - Landing Page with Parallax bg

This is a exercise of Daily Ui number 003. It's a landing page full width with parallax mouvemouse background. The theme is Ballons Festival :)

A Pen by Sara B. on CodePen.

License.

index.html

<div class="bg-wrapper">
  <!-- content top -->
  <section class="top-content">
    <span>
      <a href="javascript:void(0)">
        <img src="http://sarabianchi.it/code-images/landing-page/logo.png">
      </a>
    </span>
    <span>
      <a href="javascript:void(0)">
        <img class="menu" src="http://sarabianchi.it/code-images/landing-page/menu-icon.png">
      </a>
    </span>
  </section>
  
  <!-- content bottom -->
  <section class="bottom-content">
    <div class="content-left">
      <h1 class="title">Balloons Festival</h1>
      <p>Venture into a magnificent mountain scenery by flying silently in a hot air balloon, it’s an experience not to be missed!</p>
      <button>Buy the Ticket</button>
    </div>
    
    <div class="content-right">
      <p>15th July 2016 | 9:00am - 6:00pm<br>
      Grand Teton National Park<br>
      Tel: 089 876394</p>
    </div>
  </section>
  
  <!-- parallax background -->
  <div class="bg"></div>
</div>

script.js

$('.bg-wrapper').on('mousemove', function(e) {
  mouseX = e.pageX, mouseY = e.pageY, moveFactor = 50, windowWidth = $(this).width(), windowHeight = $(this).height();
  percentX = ((mouseX / windowWidth) * moveFactor - moveFactor / 2);
  percentY = ((mouseY / windowHeight) * moveFactor - moveFactor / 2);
  leftString = percentX + "px";
  topString = percentY + "px";
  if (percentX < (windowWidth / 2)) {
    leftString = -percentX + "px";
  }

  if (percentY < (windowHeight / 2)) {
    topString = -percentY + "px";
  }

  bgPos = leftString + " " + topString;
  $(this).find('.bg').attr("style", "background-position: " + bgPos);

});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Lobster);
@import url(https://fonts.googleapis.com/css?family=Montserrat);

$font-p: 'Montserrat', sans-serif;
$font-title: 'Lobster', cursive;
$text-shadow: 1px 2px 10px rgba(0,0,0,0.3);
$box-shadow: 0px 0px 30px 12px rgba(0,0,0,0.1);

* {
  margin: 0px;
  padding: 0px;
}

.bg-wrapper {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  
  .bg {
    height: 109%;
    width: 106%;
    background: url(http://sarabianchi.it/code-images/landing-page/balloons.jpg) no-repeat;
    background-size: cover;
    position: absolute;
    top: -25px;
    left: -25px;
    z-index: -99;
  }
}

.top-content {
  display: flex;
  width: 100%;
  
  span {
    flex-grow: 1;
    margin: 50px 70px;
    display: flex;
    
    &:last-child {
      align-items: center;
      justify-content: flex-end;
    }
    
    @media (max-width: 575.98px) {
      margin: 50px 30px;
    }
  }
}

.menu {
  background: rgba(white, .3);
  padding: 8px;
  transition: all .15s linear;
  border: 1px solid white;
  box-shadow: $box-shadow;

  &:hover {
    background: rgba(white, .5);
    box-shadow: none;
  }
}

.bottom-content {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 50px 70px;
  margin-top: auto;
  width: 100%;
  
  @media (max-width: 575.98px) {
    padding: 50px 30px;
  }
  
   p {
    color: white;
    font-family: $font-p;
    line-height: 27px;
    font-size: 17px;
    margin: 7px 0px 23px 0px;
    text-shadow: $text-shadow;
     
     @media (max-width: 575.98px) {
      font-size: 14px;
    }
  }
}

.content-left {
  flex-grow: 1;
  text-align: center;
  max-width: 750px;
  
  .title {
    font-family: $font-title;
    color: #fff;
    font-size: 60px;
    text-shadow: $text-shadow;
    
    @media (max-width: 575.98px) {
      font-size: 40px;
    }
  }
}

.content-right {
  flex-grow: 1;
  text-align: right;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  
  @media (max-width: 991.98px) {
    text-align: center;
    justify-content: center;
  }
  
  p {
    margin: 20px 0; 
    line-height: 30px;
    
  }
}

button, 
button:visited, 
button:focus {
  cursor: pointer;
  border: 1px solid white;
  background: rgba(white, .3);
  width: 160px;
  padding: 15px 0px;
  color: white;
  font-family: $font-p;
  font-size: 18px;
  box-shadow: $box-shadow;
  transition: all 0.2s linear;
  outline: none;

  &:hover {
    box-shadow: none;
    background: rgba(white, .5);
  }
}