Skip to content

Instantly share code, notes, and snippets.

@taipo1
Created April 13, 2017 01:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taipo1/13ff9549fdbf7f70314dd9e526aff3de to your computer and use it in GitHub Desktop.
Save taipo1/13ff9549fdbf7f70314dd9e526aff3de to your computer and use it in GitHub Desktop.
Random-background
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- FontAwesome -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!--google font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<!-- Custom Css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Hardstyle Pianist</title>
</head>
<body>
<!-- Nav -->
<nav class="navbar navbarnavbar-fixed-top custom-nav" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="home" class="navbar-brand" href="#"><img src="#" alt="Hardstyle Pianist logo"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a id="about" href="#About">About</a></li>
<li><a id="diensten" href="#Diensten">Diensten</a></li>
<li class="mobile-hide"><a id="work" href="#Work">Projecten</a></li>
<li><a id="contact" href="#Contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right mobile-none">
<li><a class="pad" href="https://www.facebook.com/BigDudeMedia/"><i class="fa fa-facebook-square icon" aria-hidden="true"></i></a></li>
<li><a class="pad" href="https://www.facebook.com/BigDudeMedia/"><i class="fa fa-twitter-square icon" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
<!-- fullwidth landing page -->
<row>
<div class="col-lg-12" id="landing">
</div>
</row>
<div class="row">
<div class="col-lg-12" id="slot1">
</div>
</div>
<div class="row">
<div class="col-lg-12" id="slot2">
</div>
</div>
<div class="row">
<div class="col-lg-12" id="slot3">
</div>
</div>
<div class="row">
<div class="col-lg-12" id="slot4">
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--Bootstrap js cdn -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Custom Jquery -->
<script type="text/javascript" src="js/Socialfeed.js"></script>
</body>
</html>
// Image factory
var createImage = function(src, title) {
var img = new Image();
img.src = src;
img.alt = title;
img.title = title;
return img;
};
//Image shuffler
var ImgShuffle =function Shuffle(images) {
for(var j, x, i = images.length; i; j = parseInt(Math.random() * i), x = images[--i], images[i] = images[j], images[j] = x);
return images;
// console.log(images)
};
// Vars
var images = [];
var x= 0;
// push twelve images to the array
for (var i=0; i <=7; i++){
x++
var imageSelect = "img/background-"+i+".jpg";
var Alt ="background image section-"+i;
images.push(createImage(imageSelect, Alt))
}
//Get Background slots
for( var i = 1; i <= 1; i++ ) {
var id ="slot"+i;
ImgShuffle(images)
// Assisgns names of id
document.getElementById(id).style.backgroundImage=(images[1]);
images.shift()
// console.log(slot)
}
#slot1{
height:500px;
background-color:rgba(255, 0, 0, 0.3);
}
#slot2{
height: 350px;
background-color:rgba(0, 255, 0, 0.3);
}
#slot3{
height:400px;
background-color:rgba(0, 0, 255, 0.3);
}
#slot4{
height:350px;
background-color:rgba(0, 150, 180, 0.3);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment