Home Page UI Design

In this example below you will see how to do a Home Page UI Design with some HTML / CSS and Javascript

Modified Pixel is a fictitious company and this was a design challenge

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Home Page UI Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Gidugu|Press+Start+2P|Roboto" rel="stylesheet">

  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container-fluid" id="header">
  <div class="row contact-bar" id="contact_bar">
    
    <div class="col social-media" id="social_media">
      <i class="fa fa-facebook-square" aria-hidden="true"></i>
      <i class="fa fa-twitter-square" aria-hidden="true"></i>
      <i class="fa fa-github" aria-hidden="true"></i>
      <i class="fa fa-medium" aria-hidden="true"></i>
      <i class="fa fa-google-plus-square" aria-hidden="true"></i>
      <i class="fa fa-linkedin-square" aria-hidden="true"></i>
    </div>

    <div class="col">
      <div class="text-center ">
        <i class="fa fa-envelope" aria-hidden="true"></i>
        <h1 class="email">  contact@modifiedpixel.com</h1>
      </div>
    </div>
    <div class="col">
      <div class="pull-right">
        <i class="fa fa-phone-square " aria-hidden="true"></i>
        <h1 class="phone">(555)555-5555</h1>
      </div>
    </div>
    </div> 

  <div class="row banner-img">
      <div class="col canvas hidden-sm-down" id="banner">
        <ul>
          <li class="pixel">
          <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/7QCEUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAGccAigAYkZC
TUQwMTAwMGFhNzAzMDAwMDdjMDgwMDAwYmQwZDAwMDA0MzBlMDAwMDczMGYwMDAwNzcxNTAwMDA2
NDFkMDAwMDJlMWYwMDAwMGYyMDAwMDA3MjIxMDAwMDJlMmYwMDAwAP/iAhxJQ0NfUFJPRklMRQAB
AQAAAgxsY21zAhAAAG1udHJSR0IgWFlaIAfcAAEAGQADACkAOWFjc3BBUFBMAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAD21gABAAAAANMtbGNtcwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAACmRlc2MAAAD8AAAAXmNwcnQAAAFcAAAAC3d0cHQAAAFoAAAAFGJr
cHQAAAF8AAAAFHJYWVoAAAGQAAAAFGdYWVoAAAGkAAAAFGJYWVoAAAG4AAAAFHJUUkMAAAHMAAAA
QGdUUkMAAAHMAAAAQGJUUkMAAAHMAAAAQGRlc2MAAAAAAAAAA2MyAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAHRleHQAAAAARkIAAFhZWiAAAAAAAAD21gABAAAAANMtWFlaIAAAAAAAAAMWAAADMwAA
AqRYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAP
hAAAts9jdXJ2AAAAAAAAABoAAADLAckDYwWSCGsL9hA/FVEbNCHxKZAyGDuSRgVRd13ta3B6BYmx
mnysab9908PpMP///9sAQwAJBgcIBwYJCAgICgoJCw4XDw4NDQ4cFBURFyIeIyMhHiAgJSo1LSUn
MiggIC4/LzI3OTw8PCQtQkZBOkY1Ozw5/9sAQwEKCgoODA4bDw8bOSYgJjk5OTk5OTk5OTk5OTk5
OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5OTk5/8IAEQgApAMgAwAiAAERAQIRAf/E
ABoAAQACAwEAAAAAAAAAAAAAAAABAgMEBQb/xAAZAQEBAQEBAQAAAAAAAAAAAAAAAQIEAwX/xAAZ
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
eonSz1YJdiK2wYMGDCEIQ/wP0AaPxc9IsvH5 " class="img-fluid" alt="Modified Pixel Company Logo." id="banner_img" />
        </li>
        </ul>
      </div>
     <div class="col hidden-md-up ">
      <img class="img-fluid md-banner" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/BannerImg.jpg" />  
    </div>  
    </div>
</div>


<!-- NAVIGATION -->
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse sticky-top top-nav">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarBreakPoint" aria-controls="navbarBreakPoint" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="#" id="navbar-brand">Modified Pixel</a>

  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#" id="active_nav">Home <span class="sr-only">(current)</span></a>
    </li>
  </ul>
  </div>
  <div class="collapse navbar-collapse justify-content-end" id="navbarBreakPoint">

    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link " href="#services" id="nav_link1">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#portfolio" id="nav_link2">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#" id="">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#" id="about">Blog</a>
      </li>
    </ul>
  </div>

</nav>

<nav class="sidebar-nav" id="sidebar_nav">
    <ul class="menu">
      <li class="chat text-center">
        Chat
        <img class="img-fluid" src ="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/User_icon_2.svg/2000px-User_icon_2.svg.png"  />
      </li>    
      <li class="presentation">
        Request A Presentation
      </li>
      <li class="phone text-center">
        <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Telephone_icon_blue_gradient.svg/2000px-Telephone_icon_blue_gradient.svg.png" />
        
      </li>  
    </ul>  
  </nav>  

<!-- NAVIGATION -->

<div class="container-fluid" id="main_content">

  <!--  HOME SECTION -->
<div class="row home">
   <div class="col col-12 text-center">
     <h1 class="company-name"> Modified Pixel</h1>
     <img src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/Johnstown.png" class="img-fluid img-thumbnail home-img" alt="Johnstown, PA 2015. Credits Amanda Hinchee" /> 
     
   </div>  
 </div>  
<div class="row justify-content-center home">
   <div class="col col-8">
     <p class="text-center home-text"> We are a web technology company based in Johnstown, Pennsylvania. We specialize in delivering creative and compelling web media services working with buisinesses and creatives delivering custom UI/UX designs, SEO marketing, and Mobile app development. Contact us for a free quote on your project here or read more to learn how we offer innovative design,<br /> one pixel at a time!</p>
  </div>  
 </div>  

  <!--  TECH BANNER -->
  <div class="row tech-banner" id=tech_banner>
    <div class="col text-center">
      <img class="img-fluid" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/AndroidLogo.png" alt="Android Logo" />
      <img class="img-fluid" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/AppStoreLogo.png" alt="IOS App Store Logo" />
      <img class="img-fluid" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/swift-language-logo.jpg" alt="Swift Logo" />
      <img class="img-fluid" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/nodeJSlogo.jpg" alt="NodeJS Logo" />
      <img class="img-fluid" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/mongodblogo.png" alt="MongoDB Logo" />
      <img class="img-fluid" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/Angular2Logo.png" alt="Angular Logo" />
      <img class="img-fluid" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/ReactLogo.svg" alt="React Logo" />
      <img class="img-fluid" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/BootstrapLogo.jpg" alt="Bootstrap Logo" />
      <img class="img-fluid" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/html5logo.jpg" alt="HTML5 Logo" />
      <img class="img-fluid" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/css3logo.jpg" alt="CSS3 Logo" />
      <img class="img-fluid" src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/TechBanner/wordpress-logo.jpg" alt="Wordpress Logo" />
    </div>
  </div>

    <!--  SERVICES -->
  <div class="row lg-services">
    <div class="col text-center hidden-sm-down mobile-apps">
      <h4> Mobile App Development</h4>
      <img src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/App%20Logo.jpg" class="img-fluid lgimg-services" alt="We build Mobile Apps" />

      <button class="btn btn-secondary" id="lg_learnMore_mobile"> Learn More</button>

      <div class="lg-mobileApp-text" id="lg_mobileApp_more">
        <i class="fa fa-apple" aria-hidden="true"></i>
        <h5 style="display:inline-block">IOS APPS</h5>

        </br>

        <i class="fa fa-android" aria-hidden="true"></i>
        <h5 style="display:inline-block">ANDROID APPS</h5>

        </br>

        <i class="fa fa-windows" aria-hidden="true"></i>
        <h5 style="display:inline-block">WINDOWS APPS</h5>
      </div>

      <button class="btn btn-success">Free Presentations</button>

    </div>
    <div class="col text-center hidden-sm-down web-apps">
      <h4> Web Design</h4>
      <img src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/ColorfulBird.png" class="img-fluid lgimg-services" alt="We build Web Apps" />
      <button class="btn btn-secondary" id="lg_learnMore_web"> Learn More</button>
      <div class="lg-webDesign-text" id="lg_webDesign_more">


        <h5 style="display:inline-block">MOBILE RESPONSIVE</h5>

        <br />


        <h5 style="display:inline-block">CUSTOM USER EXPERIENCES</h5>

        <br />

        <h5 style="display:inline-block">OPTIMIZED FOR SPEED</h5>

      </div>

      <button class="btn btn-success">Free Quotes</button>

    </div>
    <div class="col text-center hidden-sm-down cms">
      <h4> Content Managment Systems </h4>
      <img src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/AppLogo2.png" class="img-fluid lgimg-services" alt="Manage Your Own Content" />
      <button class="btn btn-secondary" id="lg_learnMore_CMS"> Learn More</button>

      <div class="lg-cms-text" id="lg_cms_more">
        <h5 style="display:inline-block">CONTROL YOUR OWN CONTENT</h5>
        <br />


        <h5 style="display:inline-block">ECOMMERCE SITES AND CUSTOM BLOGS</h5>

        <br />
        <h5 style="display:inline-block">SEO TARGETING</h5>

      </div>
      <button class="btn btn-success">Grow Your Buisiness</button>

    </div>
  </div>
  <div class="sm-services">
    <div class="row">
       <div class="col-6 text-center hidden-md-up mobile-apps">
         <h5> Mobile App Development</h5>
         <img src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/App%20Logo.jpg" class="img-fluid smimg-services" alt="We build Mobile Apps" />

      
      </div>
       <div class="col-6 text-center hidden-md-up about-mobile">
        <button class="btn btn-secondary" id="sm_learnMore_mobile"> Learn More</button>
         
        <div class="sm-mobileApp-text" id="sm_mobileApp_more">         
         <i class="fa fa-apple" aria-hidden="true"></i>
        <h5 style="display:inline-block">IOS APPS</h5>

        </br>

        <i class="fa fa-android" aria-hidden="true"></i>
        <h5 style="display:inline-block">ANDROID APPS</h5>

        </br>

        <i class="fa fa-windows" aria-hidden="true"></i>
        <h5 style="display:inline-block">WINDOWS APPS</h5>
      </div>
      </div>
        
    </div>

    <div class="row">
      <div class="col-6 text-center hidden-md-up web-apps">
         <h4> Web Design</h4>
      <img src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/ColorfulBird.png" class="img-fluid smimg-services" alt="We build Web Apps" />
      
      </div>
      <div class="col-6 text-center hidden-md-up about-web">
        
        <button class="btn btn-secondary" id="sm_learnMore_web"> Learn More</button>
       
        <div class="sm-webApp-text" id="sm_webDesign_more">
        <h5 style="display:inline-block">MOBILE RESPONSIVE</h5>


        <h5 style="display:inline-block">CUSTOM USER EXPERIENCES</h5>

 

        <h5 style="display:inline-block">OPTIMIZED FOR SPEED</h5>

      </div>
      </div> 
    </div>
   
    <div class="row">
        <div class="col-6 text-center hidden-md-up cms">
          <h4> Content Managment Systems </h4>
      <img src="http://conorhinchee.tech/WorkingPictures/ModifiedPixel/AppLogo2.png" class="img-fluid smimg-services" alt="Manage Your Own Content" />
      
       </div>
       <div class="col-6 text-center hidden-md-up about-cms">
         <button class="btn btn-secondary" id="sm_learnMore_CMS"> Learn More</button>
        <div class="sm-cms-text" id="sm_cms_more"> 
         <h5 style="display:inline-block">CONTROL YOUR OWN CONTENT</h5>
        


        <h5 style="display:inline-block">ECOMMERCE SITES AND CUSTOM BLOGS</h5>

        
        <h5 style="display:inline-block">SEO TARGETING</h5>
       </div>  
    </div>    
   </div>
   <div class="row"> 
    <div class="col text-center hidden-md-up sm-presentation">
        
      <button class="btn btn-success btn-block"> Request A Presentation </button> 
    </div>  
   </div>


  </div>

  <!--  CONTACT -->
  <div class="row  justify-content-center " id="contact_section">
    <div class="col-6 contact">
      <h2 class="text-center"> Request A Presentation </h2>

      <div class="form-group">
        <label for="inputEmail">Email address</label>
        <input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" placeholder="Enter Email">
<!--             <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
        <label for="inputPhone">Phone Number</label>
        <input type="phone" class="form-control" id="inputEmail1" aria-describedby="emailHelp" placeholder="Phone Number">
        <label for="textarea">How can we help you </label>
        <textarea class="form-control" id="textarea" rows="3"></textarea>
        <button class="btn btn-primary btn-block">Send Message</button>


      </div>
    </div>
  </div>
    
  
  
 <div class="row footer">
   <div class="col">
      <h5>contact@modifiedpixel.com</h5>
      <h5> (555) 555-5555</h5>
      <h5>998 Luzerne St, Johnstown, PA 15902</h5>


      
    </div>
   <div class="col text-center">
     <div class="socialMedia">
        <i class="fa fa-facebook-square" aria-hidden="true"></i>
        <i class="fa fa-twitter-square" aria-hidden="true"></i>
        <i class="fa fa-github" aria-hidden="true"></i>
        <i class="fa fa-medium" aria-hidden="true"></i>
        <i class="fa fa-google-plus-square" aria-hidden="true"></i>
        <i class="fa fa-linkedin-square" aria-hidden="true"></i>
      </div>
     
     <p class="text-center"> Modified Pixel &copy; 2017<span id="currentYear"></span> All Rights Reserved</p>
   </div>
   
  <div class="col">
    <div id="map"></div>
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCw1M6NJ9V7P3KiZb4yipoSaceZJ8Ol3uo"></script>  
  </div>  
 </div> 

</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/home-page-ui-design-vxKwzw */
body {
  background: #C3CDE6;
}

.contact-bar {
  background: #1B1B1B;
  box-shadow: 1px 5px 5px #1A1110, 0 5px 10px 0 #469496 inset;
  margin-bottom: .2%;
  color: #FEFEFE;
}
.contact-bar .email,
.contact-bar .phone {
  color: #D9D6CF;
  display: inline-block;
  font-family: "Press Start 2P", cursive;
  padding-top: 6%;
  font-size: .01em;
}
.contact-bar .pull-right {
  padding-top: 4%;
}

.banner-img canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
}

.top-nav {
  box-shadow: 0 5px 10px 0 #1B1B1B inset;
  font-family: "Roboto", sans-serif;
}

.sidebar-nav {
  position: fixed;
  top: 20%;
  left: 930%;
  width: 75px;
  font-family: "Gidugu", sans-serif;
  z-index: 1;
}
.sidebar-nav .menu {
  list-style: none;
}
.sidebar-nav .presentation {
  color: white;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  font-size: 1.5em;
  margin: 0 auto;
  background: #1B1B1B;
}

.home {
  font-family: "Roboto", sans-serif;
  color: #1B1B1B;
  padding-top: 5%;
}
.home .home-img {
  background: #D9D6CF;
  box-shadow: 10px 15px 15px black;
}
.home .company-name {
  position: relative;
  font-family: "Press Start 2P", cursive;
  color: white;
  font-size: .8em;
  text-shadow: 10px 10px black, -1px 0 black;
}
.home .home-text {
  font-size: 0.8em;
}

.tech-banner {
  background: #757575;
  padding-bottom: 1%;
  border-bottom: solid black;
}
.tech-banner img {
  width: 50px;
  border-radius: 50px;
  box-shadow: 5px 10px 5px black;
  padding: 2px;
}

.lg-services {
  padding-top: 2%;
  color: grey;
  font-family: "Roboto", sans-serif;
  text-shadow: 1px 1px black;
}
.lg-services .lgimg-services {
  width: 50%;
  height: 150px;
  padding-bottom: 1%;
  padding-right: 2%;
}

.sm-services {
  padding-top: 2%;
  color: black;
  font-family: "Roboto", sans-serif;
}
.sm-services .smimg-services {
  width: 150px;
}

.portfolio {
  padding-top: 5%;
}
.portfolio img {
  height: 250px;
  margin: 0 auto;
}

.contact {
  font-family: "Roboto", sans-serif;
}

.footer {
  background: #1B1B1B;
  font-family: "Gidugu", sans-serif;
  color: white;
}
.footer .socialMedia {
  padding-top: 9%;
}
.footer #map {
  width: 100%;
  height: 100px;
  background-color: grey;
}

@media (min-width: 576px) {
  .contact- bar .social-media {
    font-size: 1em;
  }
  .contact- bar .email,
  .contact- bar .phone {
    font-size: .2em;
  }

  .home .company-name {
    font-size: 2em;
  }
  .home .home-text {
    font-size: 0.8em;
  }
}
@media (min-width: 768px) {
  .contact-bar .social-media {
    font-size: 1.5em;
  }
  .contact-bar .email,
  .contact-bar .phone {
    font-size: .4em;
  }

  .home .company-name {
    top: 50%;
    font-size: 5em;
  }
  .home .home-text {
    font-size: 1em;
  }
}
@media (min-width: 992px) {
  .contact-bar .social-media {
    font-size: 2em;
  }
  .contact-bar .email,
  .contact-bar .phone {
    font-size: .6em;
  }

  .home .company-name {
    top: 50%;
    font-size: 5em;
  }
  .home .home-text {
    font-size: 1.3em;
  }
}


/*Downloaded from https://www.codeseek.co/captnstarburst/home-page-ui-design-vxKwzw */
$(document).ready(function() {
  $('.carousel').carousel({
    interval: 5000
  });
  
  
  hideText();
  
  $("#company_name").fadeIn(5000);
  
  
  $('#lg_learnMore_mobile').click(function(){
     $("#lg_mobileApp_more").fadeIn("slow");
  });
  
  $('#lg_learnMore_web').click(function(){
     $("#lg_webDesign_more").fadeIn("slow");
  });
  
  $('#lg_learnMore_CMS').click(function(){
    $("#lg_cms_more").fadeIn("slow");
  });
  
  $('#sm_learnMore_mobile').click(function(){
    $('#sm_learnMore_mobile').fadeOut();
    $('#sm_mobileApp_more').fadeIn();
  });
  
  $('#sm_learnMore_web').click(function(){
    $('#sm_learnMore_web').fadeOut();
    $("#sm_webDesign_more").fadeIn();
  });
  
  $('#sm_learnMore_CMS').click(function(){
    $('#sm_learnMore_CMS').fadeOut();
    $("#sm_cms_more").fadeIn();
  });

  $(window).scroll(function() {
    var windowWidth = $(this).width();
    var windowHeight = $(this).height();
    var windowScrollTop = $(this).scrollTop();

    if (windowScrollTop < 200) {
      $("#navbar_brand").text("M P");

    } else if (windowScrollTop > 200 && windowScrollTop < 650) {
      $("#navbar_brand").text("Modified Pixel");

      $("#active_navigation").text("Home");
      $("#sidebar_nav").hide();
      // $(".home-content").css("background", "url('')");
    } else if (windowScrollTop > 650 && windowScrollTop < 1200) {
      $("#active_navigation").text("Services");
   $("#sidebar_nav").css("left", "93%");   
     $("#sidebar_nav").show();
      $("#sidebar_nav").fadeIn("slow");
      
    } else if (windowScrollTop > 1200 && windowScrollTop < 1600) {
      $("#active_navigation").text("Portfolio");

    } else if (windowScrollTop > 1600) {
      $("#active_navigation").text("Contact");

    }
  });
});

function hideText(){
  $("#lg_mobileApp_more").hide();
  $("#lg_webDesign_more").hide();
  $("#lg_cms_more").hide();
  $('#sm_mobileApp_more').hide();
  $("#sm_webDesign_more").hide();
  $("#sm_cms_more").hide();
  
   $("#company_name").hide();
}


// - Noel Delgado | @pixelia_me

// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
  window.cancelAnimationFrame =
    window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame)
  window.requestAnimationFrame = function(callback, element) {
    var currTime = new Date().getTime();
    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
    var id = window.setTimeout(function() {
        callback(currTime + timeToCall);
      },
      timeToCall);
    lastTime = currTime + timeToCall;
    return id;
  };

if (!window.cancelAnimationFrame)
  window.cancelAnimationFrame = function(id) {
    clearTimeout(id);
  };

var PIXELATION = 40;

var items = document.getElementById("banner").querySelectorAll("li"),
  _objs = [];

var Images = function(element, image, canvas, context) {
  this.element = element;
  this.image = image;
  this.canvas = canvas;
  this.context = context;
  this.pixelation = 1;
};

Images.prototype.bindLoad = function() {
  var obj = this;

  this.image.onload = function() {
    obj.reportLoad.call(obj);
  };

  if (this.image.complete) {
    this.image.onload();
  }
};

Images.prototype.reportLoad = function() {
  var obj = this;

  this.imageWidth = this.canvas.width = this.image.width;
  this.imageHeight = this.canvas.height = this.image.height;
  this.context.drawImage(this.image, 0, 0);

  this.element.addEventListener('mouseover', function() {
    obj.mouseOver();
  }, false);

  this.element.addEventListener('mouseout', function() {
    obj.mouseOut();
  }, false);
};

Images.prototype.mouseOver = function() {
  var obj = this;
  cancelAnimationFrame(obj.idUndraw);
  var draw = function() {
    if (obj.pixelation >= PIXELATION) {
      cancelAnimationFrame(obj.idDraw);
      obj.pixelation = PIXELATION;
    } else {
      obj.context.drawImage(obj.image, 0, 0);
      obj.pixelate(obj.imageWidth, obj.imageHeight, 0, 0);
      obj.idDraw = requestAnimationFrame(draw, obj.context);
    }
  };
  obj.idDraw = requestAnimationFrame(draw, obj.context);
};

Images.prototype.mouseOut = function() {
  var obj = this;
  cancelAnimationFrame(obj.idDraw);
  var undraw = function() {
    if (obj.pixelation < 1) {
      cancelAnimationFrame(obj.idUndraw);
      obj.pixelation = 1;
    } else {
      obj.context.drawImage(obj.image, 0, 0);
      obj.depixelate(obj.imageWidth, obj.imageHeight, 0, 0);
      obj.idUndraw = requestAnimationFrame(undraw, obj.context);
    }
  };
  obj.idUndraw = requestAnimationFrame(undraw, obj.context);
};

Images.prototype.setPixels = function() {
  var sw = this.imageWidth,
    sh = this.imageHeight,
    imageData = this.context.getImageData(0, 0, sw, sh),
    data = imageData.data,
    y, x, n, m;

  for (y = 0; y < sh; y += this.pixelation) {
    for (x = 0; x < sw; x += this.pixelation) {

      var red = data[((sw * y) + x) * 4];
      var green = data[((sw * y) + x) * 4 + 1];
      var blue = data[((sw * y) + x) * 4 + 2];

      for (n = 0; n < this.pixelation; n++) {
        for (m = 0; m < this.pixelation; m++) {
          if (x + m < sw) {
            data[((sw * (y + n)) + (x + m)) * 4] = red;
            data[((sw * (y + n)) + (x + m)) * 4 + 1] = green;
            data[((sw * (y + n)) + (x + m)) * 4 + 2] = blue;
          }
        }
      }
    }
  }

  this.context.putImageData(imageData, 0, 0);
};

Images.prototype.pixelate = function() {
  this.setPixels();
  this.pixelation += 1;
};

Images.prototype.depixelate = function() {
  this.setPixels();
  this.pixelation -= 1;
};

Array.prototype.slice.call(items, 0).forEach(function(el, i) {
  var element = el;
  image = el.querySelector('img'),
    canvas = document.createElement('canvas'),
    context = canvas.getContext('2d');

  el.appendChild(canvas);

  _objs.push(new Images(element, image, canvas, context));
  _objs[i].bindLoad();
});

//AIzaSyByMRBgEWYIDutov1ePmY2E2N2MoHBUkVw

google.maps.event.addDomListener(window, 'load', init);

function init() {
  var address = "998 Luzerne St, Johnstown, PA 15902",
    lat, long;
  $.ajax({
    url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false",
    type: "POST",
    success: function(res) {
      lat = res.results[0].geometry.location.lat;
      long = res.results[0].geometry.location.lng;
      // Basic options for a simple Google Map
      // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
      var mapOptions = {
        // How zoomed in you want the map to start at (always required)
        zoom: 14,
        scrollwheel: false,
        //disableDefaultUI: true,
        // The latitude and longitude to center the map (always required)
        center: new google.maps.LatLng(lat, long), // New York

        // How you would like to style the map. 
        // This is where you would paste any style found on Snazzy Maps.
        styles: [{
          "stylers": [{
            "hue": "#16a085"
          }]
        }, {
          "elementType": "geometry",
          "stylers": [{
            "color": "#212121"
          }]
        }, {
          "elementType": "labels.icon",
          "stylers": [{
            "visibility": "off"
          }]
        }, {
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#757575"
          }]
        }, {
          "elementType": "labels.text.stroke",
          "stylers": [{
            "color": "#212121"
          }]
        }, {
          "featureType": "administrative",
          "elementType": "geometry",
          "stylers": [{
            "color": "#757575"
          }]
        }, {
          "featureType": "administrative.country",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#9e9e9e"
          }]
        }, {
          "featureType": "administrative.land_parcel",
          "stylers": [{
            "visibility": "off"
          }]
        }, {
          "featureType": "administrative.locality",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#bdbdbd"
          }]
        }, {
          "featureType": "poi",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#757575"
          }]
        }, {
          "featureType": "poi.park",
          "elementType": "geometry",
          "stylers": [{
            "color": "#181818"
          }]
        }, {
          "featureType": "poi.park",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#616161"
          }]
        }, {
          "featureType": "poi.park",
          "elementType": "labels.text.stroke",
          "stylers": [{
            "color": "#1b1b1b"
          }]
        }, {
          "featureType": "road",
          "elementType": "geometry",
          "stylers": [{
            "lightness": 100
          }, {
            "visibility": "simplified"
          }]
        }, {
          "featureType": "road",
          "elementType": "geometry.fill",
          "stylers": [{
            "color": "#2c2c2c"
          }]
        }, {
          "featureType": "road",
          "elementType": "labels",
          "stylers": [{
            "visibility": "off"
          }]
        }, {
          "featureType": "road",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#8a8a8a"
          }]
        }, {
          "featureType": "road.arterial",
          "elementType": "geometry",
          "stylers": [{
            "color": "#373737"
          }]
        }, {
          "featureType": "road.highway",
          "elementType": "geometry",
          "stylers": [{
            "color": "#3c3c3c"
          }]
        }, {
          "featureType": "road.highway.controlled_access",
          "elementType": "geometry",
          "stylers": [{
            "color": "#4e4e4e"
          }]
        }, {
          "featureType": "road.local",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#616161"
          }]
        }, {
          "featureType": "transit",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#757575"
          }]
        }, {
          "featureType": "water",
          "elementType": "geometry",
          "stylers": [{
            "color": "#000000"
          }]
        }, {
          "featureType": "water",
          "elementType": "labels.text.fill",
          "stylers": [{
            "color": "#3d3d3d"
          }]
        }]
      };

      // Get the HTML DOM element that will contain your map 
      // We are using a div with id="map" seen below in the <body>
      var mapElement = document.getElementById('map');

      // Create the Google Map using our element and options defined above
      var map = new google.maps.Map(mapElement, mapOptions);

      // Let's also add a marker while we're at it
      var image = window.logo;
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, long),
        map: map,
        animation: google.maps.Animation.DROP,
        title: 'We are here.',
        icon: {
          path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
          scale: 6,
          strokeColor: '#e7e5e7'
        },

      });
    }
  });
}

Comments