BackgroundChange_custom

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

Uses JavaScript to draw a random gradient and set that as the background. Uses a fade transition. Contains all custom css 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_custom</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

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

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

  <div class="background" id="background_div">
        <canvas class=" background" id="background_canvas"></canvas>
    </div>
    <div class="content" id="content_div">
        <nav class="content_div" id="content_navbar">
            <a class="link" href="#" id="home">Home</a> <a class="setting right"
            href="#" id="background-random">Change Background</a>
            <a class="setting right"
            href="#" id="background-reset">Reset Background</a>
        </nav>
        <div class="content_div" id="content_body">
            <div class="content_body_entry">
                <p>An Item</p>
            </div>
            <div class="content_body_entry">
                <p>Another Item</p>
            </div>
        </div>
    </div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/2ajoyce/backgroundchange_custom-ONWPVx */
*, *:before, *:after {
  box-sizing: inherit;
}

html body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
}

.background {
  min-height: 100%;
  min-width: 100%;
  position: absolute;
}
.background #background_canvas {
  margin: 0px;
  padding: 0px;
}

.content {
  position: relative;
}
.content #content_navbar {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  padding: 15px 20px 15px 20px;
  background-image: linear-gradient(to right, #860c0c, #ce7777);
  box-shadow: 1px 1px 1px rgba(97, 0, 0, 0.5);
}
.content #content_navbar a {
  text-decoration: none;
  color: black;
  background-color: #a66088;
  padding: 10px;
  border-radius: 8px;
  -webkit-box-shadow: 1px 1px 1px #14002c;
  -moz-box-shadow: 1px 1px 1px #14002c;
  box-shadow: 1px 1px 1px #14002c;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.content #content_navbar a:active {
  -webkit-box-shadow: 0.5px 0.5px 0.5px #14002c;
  -moz-box-shadow: 0.5px 0.5px 0.5px #14002c;
  box-shadow: 0.5px 0.5px 0.5px #14002c;
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.content #content_navbar .setting {
  margin-left: auto;
}
.content #content_navbar .link {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.content #content_body .content_body_entry {
  background-color: #dbdbdb;
  margin: 20px;
  padding: 10px 20px 10px 20px;
}
.content #content_body .content_body_entry p {
  background-color: white;
  color: black;
  padding: 15px;
}


/*Downloaded from https://www.codeseek.co/2ajoyce/backgroundchange_custom-ONWPVx */
(function() {
    var color1 = "white";
    var color2 = "grey";

    function drawBackground() {
        var canvas_tile = document.createElement('canvas');
        var ctx_tile = canvas_tile.getContext('2d');
        // Define the aspects of the canvas
        ctx_tile.canvas.width = document.documentElement.clientWidth;
        ctx_tile.canvas.height = document.documentElement.clientHeight;
        ctx_tile.lineWidth = 15;
        //Draw the picture
        var grd = ctx_tile.createLinearGradient(0, 0, document.documentElement.clientHeight, document.documentElement.clientWidth);
        grd.addColorStop(0, color1);
        grd.addColorStop(1, color2);
        ctx_tile.fillStyle = grd;
        ctx_tile.fillRect(0, 0, document.documentElement.clientWidth,
                          document.documentElement.clientHeight);
        // save canvas image as data url (png format by default)
        var tile_URL = canvas_tile.toDataURL();
        var tile = new Image();
        tile.onload = function() {
            // I'm not sure if this is actually necessary in this case
        };
        tile.src = tile_URL;
        document.body.style.background = "url("+ tile.src + ") no-repeat center center fixed";
    }
    document.getElementById('background-random').addEventListener(
        "click", function() {
            color1 = randomColor();
            color2 = randomColor();
            drawBackground();
        });
    document.getElementById('background-reset').addEventListener(
        "click", function() {
            color1 = "white";
            color2 = "grey";
            drawBackground();
        });
    window.addEventListener(
        "resize", function() {
            drawBackground();
        });
    drawBackground();

}());

Comments