LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

I love kittens.

I also love puppies.

What do you love?

Be honest:

CSS
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400);
html, body {
  width: 100%;
  height: 100%;
}

section {
  height: 100vh;
  position: relative;
  background-attachment: fixed;
  background-repeat: repeat;
  background-position: top left;
  background-size: cover;
  padding-top: 1px;
}
section:nth-child(1) {
  background-image: url("http://placekitten.com/1000/1000");
}
section:nth-child(2) {
  background-image: url("http://placepuppy.it/800/600");
}
section:nth-child(3) {
  background-image: url("http://lorempixel.com/800/600/sports/");
}
section:nth-child(4) {
  background-image: url("http://lorempixel.com/700/600");
}
section:nth-child(5) {
  background-color: black;
  background-attachment: scroll;
}

h1, .alpha {
  font-family: 'Roboto Condensed', Helvetica, sans-serif;
  text-transform: uppercase;
  margin: 48vh auto 0 auto;
  max-width: 15rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem;
  font-weight: 100;
  display: block;
  border: 0;
  font-size: 2em;
  color: black;
}
h1:focus, .alpha:focus {
  outline: none;
}

::-webkit-input-placeholder {
  color: gray;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: gray;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: gray;
}

:-ms-input-placeholder {
  color: gray;
}
JS
var apiUrl = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1a05f499a424b920d4e76453b4bdcb87&extras=url_l&per_page=1&format=json&nojsoncallback=1&text=';

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

/**
 * Looks for a photo on flickr
 * Returns the URL of a photo
 */
var getImgUrl = function(query) {
  $.get( apiUrl + query, function(data) {
    var img = data.photos.photo[0].url_l;
    setSectionBg(img);
  });
}

/**
 * Set our new background image 
 */
var setSectionBg = function(img) {
  console.log(img);
  var $userSection = $('#user-section');
  $userSection.css({ 'background-image' : 'url(' + img + ')' });
}

$(document).ready(function() {
  $('#query').keyup(function() {
    delay(function() {
      var query = $('#query').val();
      var img = getImgUrl(query);
    }, 1000);
  });  
});
Host Instantly Drag and Drop Website Builder

 

Description

Demo of a one-page scrolling site with full-size fixed background images. Play with what you love in the last section. Used CSS viewport units (vh), various placeholder image sites, and the Flickr API.
Term
Mon, 11/27/2017 - 22:00

Related Codes

Pen ID
Pen ID
Pen ID