BackgroundChange_bootstrapV2

In this example below you will see how to do a BackgroundChange_bootstrapV2 with some HTML / CSS and Javascript

Uses Javascript to change draw a random gradient on and set it as the background. Has a fade transition. Contains bootstrap styling.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>BackgroundChange_bootstrapV2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Domine:400,700' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src=    "https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.4/randomColor.js" type="text/javascript"></script>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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 class="navbar-brand" href="#">Demo</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar">
                <li>
                    <a id="pg1_nav" href="#"><i class="fa fa-home"></i>Home</a>
                </li>
                <li>
                    <a id="pg2_nav" href="#"><i class="fa fa-phone"></i>Contact</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                <a id="background-random" href="#">
                    <i class="fa fa-refresh"></i>
                    Random Background
                </a>
                </li>
                <li>
                    <a id="background-reset" href="#">Reset</a>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="container" id="content_body">
    <div class="container" id="pg1">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">First panel title</h3>
            </div>
            <div class="panel-body">
                First panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Second panel title</h3>
            </div>
            <div class="panel-body">
                Second panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Third panel title</h3>
            </div>
            <div class="panel-body">
                Third panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Fourth panel title</h3>
            </div>
            <div class="panel-body">
                Fourth panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Fifth panel title</h3>
            </div>
            <div class="panel-body">
                Fifth panel content
            </div>
        </div>
    </div>
    <div class="container" id="pg2">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Contact Me</h3>
            </div>
            <div class="panel-body">
                Stuff about how to contact me
            </div>
        </div>
    </div>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/2ajoyce/backgroundchange_bootstrapv2-eZWzXV */
body {
  -webkit-transition: background 0.5s linear;
  -moz-transition: background 0.5s linear;
  -o-transition: background 0.5s linear;
  transition: background 0.5s linear;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 70px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

p, div {
  font-family: 'Domine', serif;
}

.fa {
  padding-right: 5px;
}

.navbar-brand {
  font-weight: 800;
}

#background-random, #background-reset {
  color: #777;
}

#background-random:hover, #background-reset:hover {
  color: #333;
}

.container {
  background-color: rgba(0, 0, 0, 0);
}


/*Downloaded from https://www.codeseek.co/2ajoyce/backgroundchange_bootstrapv2-eZWzXV */
(function () {
    'use strict';
    // Define Settings
    var color1 = 'white';
    var color2 = 'grey';
    var width = document.documentElement.clientWidth;
    var height = document.documentElement.clientHeight;

    $( document ).ready(function () {
        // This code is suppposed to handle automatically hiding the
        // pages (divs) that aren't the active page.
        $('div')
            .filter(function() {
            return this.id.match(/pg[2-9]+[0-9]*/);
        })
        .addClass('hidden');
    
        var picture = drawGradient(color1, color2, width, height);
        drawBackground(picture);
    });

    function drawGradient(color1, color2, width, height) {
        /*
        This function draws an gradient of a specified color and size.
        Param: color1 - string - The start color for the gradient.
        Param: color2 - string - The end color for the gradient.
        Param: height - float - The height of the gradient.
        Param: width - float - The width of the gradient.
        Rtype: Image
        Rtype: An image of the gradient created by this function.
        */

        // Create the canvas
        var cnvs = document.createElement('canvas');
        var ctx = cnvs.getContext('2d');

        // Define the aspects of the canvas
        ctx.canvas.width = width;
        ctx.canvas.height = height;

        //Draw the gradient
        var gradient = ctx.createLinearGradient(
            0,
            0,
            document.documentElement.clientHeight,
            document.documentElement.clientWidth);
        gradient.addColorStop(0, color1);
        gradient.addColorStop(1, color2);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);

        // save canvas image as data url (png format by default)
        var pic_url = cnvs.toDataURL();
        var pic = new Image();
        pic.onload = function () {
            // I'm not sure if this is actually necessary in this case
        };
        pic.src = pic_url;
        return pic;
    }

    function drawBackground(pic) {
        document.body.style.background = "url(" + pic.src + ") no-repeat center center fixed";
    }

    document.getElementById('background-random').addEventListener(
        "click", function () {
            color1 = randomColor();
            color2 = randomColor();
            var picture = drawGradient(color1, color2, width, height);
            drawBackground(picture);
        });

    document.getElementById('background-reset').addEventListener(
        "click", function () {
            color1 = 'white';
            color2 = 'grey';
            var picture = drawGradient(color1, color2, width, height);
            drawBackground(picture);
        });

    window.addEventListener(
        "resize", function () {
            width = document.documentElement.clientWidth;
            height = document.documentElement.clientHeight;
            var picture = drawGradient(color1, color2, width, height);
            drawBackground(picture);
        });

    $('a')
        .filter(function() {
        return this.id.match(/pg[2-9]+[0-9]*_nav/);
        })
        .addEventListener(
        "click", function () {
            alert('hi');
        });
}());

Comments