BackgroundChange_bootstrapV2

BackgroundChange_bootstrapV2.markdown

BackgroundChange_bootstrapV2

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

A Pen by Aaron Joyce on CodePen.

License.

index.html

<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.js

(function() {
    // Define Settings
    let color1 = 'white'
    let color2 = 'grey'
    let width = document.documentElement.clientWidth
    let 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]\d|[1-9]\d{2,})$/);
        // })
        let 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
        let cnvs = document.createElement('canvas');
        let ctx = cnvs.getContext('2d');

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

        //Draw the gradient
        let 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)
        let pic_url = cnvs.toDataURL();
        let 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();
            let picture = drawGradient(color1, color2, width, height);
            drawBackground(picture);
        });

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

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

style.scss

body { 
    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);
}