Basically I received help to alter a codepen and was happy with the end result, but then when i tried to implement it on a html web page, it doesn't render properly and i'm not sure where it goes wrong, here is the link to the code pen http://codepen.io/anon/pen/hsepG
and here is my attempted implementation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>test</title>
<style>
#mixin animate($animation, $duration, $repeat, $easing) {
-webkit-animation: $animation $duration $repeat $easing;
-moz-animation: $animation $duration $repeat $easing;
-ms-animation: $animation $duration $repeat $easing;
animation: $animation $duration $repeat $easing;
}
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#-ms-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
html,
body {
height: 100%;
}
body {
background: #09f;
#include background-image(linear-gradient(left, #09f, #45d1ff));
}
.bubble-toggle {
position: absolute;
top: 10px;
right: 10px;
padding: 10px;
background: rgba(255,255,255,0.5);
font-family: sans-serif;
font-size: 13px;
color: #333;
&:hover {
background: rgba(255,255,255,0.75);
}
}
.bubbles {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
margin: 0 auto;
}
.bubble-container {
position: absolute;
bottom: 0;
#include animate(bubblerise, 4s, infinite, ease-in);
#include opacity(0);
}
.bubble {
width: 6px;
height: 6px;
margin: 0 auto;
border: 1px solid rgba(255,255,255,0.5);
background: rgba(255,255,255,0.25);
#include border-radius(10px);
#include animate(bubblewobble, 0.4s, infinite, linear);
}
#include keyframes(bubblerise) {
0% {
bottom: 0;
#include opacity(0);
}
5% {
bottom: 0;
#include opacity(1);
}
99% {
#include opacity(1);
}
100% {
bottom: 100%;
#include opacity(0);
}
}
#include keyframes(bubblewobble) {
0% {
margin-left: 0;
}
50% {
margin-left: 2px;
}
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div class="bubbles"></div>
<a class="bubble-toggle" href="#">Bubbles Off</a>
<script type="text/javascript">
$(document).ready(function() {
var $bubbles = $('.bubbles');
function bubbles() {
// Settings
var min_bubble_count = 20, // Minimum number of bubbles
max_bubble_count = 40, // Maximum number of bubbles
min_bubble_size = 3, // Smallest possible bubble diameter (px)
max_bubble_size = 8; // Largest possible bubble diameter (px)
// Calculate a random number of bubbles based on our min/max
var bubbleCount = min_bubble_count + Math.floor(Math.random() * (max_bubble_count + 1));
// Create the bubbles
for (var i = 0; i < bubbleCount; i++) {
$bubbles.append('<div class="bubble-container"><div class="bubble"></div></div>');
}
// Now randomise the various bubble elements
$bubbles.find('.bubble-container').each(function(){
// Randomise the bubble positions (0 - 100%)
var pos_rand = Math.floor(Math.random() * 101);
// Randomise their size
var size_rand = min_bubble_size + Math.floor(Math.random() * (max_bubble_size + 1));
// Randomise the time they start rising (0-15s)
var delay_rand = Math.floor(Math.random() * 16);
// Randomise their speed (3-8s)
var speed_rand = 0.5 + Math.random() * 2;
// Cache the this selector
var $this = $(this);
// Apply the new styles
$this.css({
'left' : pos_rand + '%',
'-webkit-animation-duration' : speed_rand + 's',
'-moz-animation-duration' : speed_rand + 's',
'-ms-animation-duration' : speed_rand + 's',
'animation-duration' : speed_rand + 's',
'-webkit-animation-delay' : delay_rand + 's',
'-moz-animation-delay' : delay_rand + 's',
'-ms-animation-delay' : delay_rand + 's',
'animation-delay' : delay_rand + 's'
});
$this.children('.bubble').css({
'width' : size_rand + 'px',
'height' : size_rand + 'px'
});
});
}
// In case users value their laptop battery life
// Allow them to turn the bubbles off
$('.bubble-toggle').click(function(){
if($bubbles.is(':empty')) {
bubbles();
$bubbles.show();
$(this).text('Bubbles Off');
} else {
$bubbles.fadeOut(function(){
$(this).empty();
});
$(this).text('Bubbles On');
}
return false;
});
bubbles();
});
</script>
</body>
</html>
Should my Css be in a separate style sheet?
thanks
Your codepen is using SCSS, not straight CSS. See http://sass-lang.com.
So, to use it on your own web page, you'll need to compile the SCSS, or copy the compiled CSS from the code pen. To get the compiled CSS from the codepen click on (SCSS).
Related
I want to show loading progress bar till the page load. If the internet might be slow and page take more to load, the progress bar show till the page fully load.
I attempted to add code, but because internet speeds vary, it is inaccurate. Could you please help me with this? I want to add a progress bar that starts at 0% while the page is loading and goes up to 100% after the page is completely loaded, dependent on the page loading speed.
$(window).on('load', function() {
$('#preloader').fadeOut(500);
$('body').removeClass('pre_loader');
});
var width = 100,
perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
time = parseInt((EstimatedTime / 1000) % 60) * 100;
// Loadbar Animation
$(".loadbar").animate({
width: width + "%"
}, time);
// Percentage Increment Animation
function animateValue(id, start, end, duration) {
var range = end - start,
current = start,
increment = end > start ? 1 : -1,
stepTime = Math.abs(Math.floor(duration / range)),
obj = $(id);
var timer = setInterval(function() {
current += increment;
$(obj).text(current + "%");
//obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
// Fading Out Loadbar on Finised
setTimeout(function() {
$('.preloader-wrap').fadeOut(100);
}, time);
<div class="preloader-wrap">
<div class="loader">
<div class="trackbar">
<div class="loadbar">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Sound like CSS (only) animation would be an option to consider. Inline your progress bar and it's <style> first thing as the page loads. Then remove then and make the body visible again on page load event. You can cheat time if you use some easing function that will never finish.
If you need numbers in your progress bar, then there is an options for that; even by a variable in modern browsers https://css-tricks.com/animating-number-counters/
For example (need to play with the percent values a bit):
<!-- almost first thing on page -->
<style>
.container {
width: 400px;
height: 50px;
position: relative;
border: 1px solid black;
}
.progress {
background: blue;
float: left;
color: white;
width: 100%;
height: 50px;
line-height: 50px;
animation-name: slideInFromLeft;
animation-duration: 30s;
animation-timing-function: cubic-bezier(0, .9, .9, .999);
text-align: center;
}
.percent::before {
content: counter(count);
animation-name: counter;
animation-duration: 30s;
animation-timing-function: cubic-bezier(0, .9, .9, .999);
counter-reset: count 0;
}
#keyframes slideInFromLeft {
0% {
width: 0%;
}
99% {
width: 99%;
}
}
#keyframes counter {
0% {
counter-increment: count 0;
}
10% {
counter-increment: count 50;
}
20% {
counter-increment: count 60;
}
30% {
counter-increment: count 70;
}
40% {
counter-increment: count 80;
}
50% {
counter-increment: count 90;
}
60% {
counter-increment: count 95;
}
70% {
counter-increment: count 98;
}
80% {
counter-increment: count 99;
}
90% {
counter-increment: count 90;
}
100% {
counter-increment: count 100;
}
}
</style>
<div class="container">
<div class="progress">
<span class="percent">%</span>
</div>
</div>
i'm trying to convert the background-image (css) into an object to change it's value but I couldn't find a solution.
At the moment there are 2 images in the script the first one is a circle loader script and the second one is a script that based of the value of the range it shows or hides part of the picture.
What i'm trying to do is to make load the picture inside the circle loader script.
For instance if the circle loader is 30/100 it should show only display 30% of the picture inside the circle vertically.
Here's the code:
Live version:
var bar = new ProgressBar.Circle(container, {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#333', width: 4 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(1.0); // Number from 0.0 to 1.0
var sldH = document.getElementById('slider-h');
var sldV = document.getElementById('slider-v');
var img = document.getElementById("image");
// attach change handlers to the sliders
sldH.addEventListener('change', changeHandler);
sldV.addEventListener('change', changeHandler);
function changeHandler(e) {
var isHorizontal = e.srcElement.id == 'slider-h';
// get the sliders values
var valH = sldH.value;
var valV = sldV.value;
// calculate the percentage to pass an absolute length value
// to the clip property and determine the static value
var leftVal = calcPerc(img.width, valH);
var topVal = -1 * calcPerc(img.height, valV);
var clipVal = getClipVal(topVal, leftVal);
// set the images' right offset clip accordingly
img.style.clip = clipVal;
}
function calcPerc(range, val) {
return range / 100 * val;
}
function getClipVal(top, left) {
return 'rect(' + top + 'px, auto, auto, ' + left + 'px)';
}
#container {
margin: 20px;
top: 80px;
width: 200px;
height: 200px;
position: relative;
background-image: url("http://pngimg.com/uploads/bitcoin/bitcoin_PNG47.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.btc{
background-image: url("http://pngimg.com/uploads/bitcoin/bitcoin_PNG47.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
#slider-h,
#slider-v,
#image,
#underlay {
/* absolute positioning is mandatory for clipped elements (#image) */
position: absolute;
}
#slider-h,
#image,
#underlay {
width: 192px;
left: 100px;
}
#slider-h {
top: 50px;
left: 350px;
}
#slider-v {
top: 192px;
left: 200px;;
width: 207px;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
#image,
#underlay {
top: 100px;
left: 350px;
height: 207px;
}
#image {
/* initial clip state */
}
#underlay {
/*background-color: #4C76A5;*/
}
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container" >
</div>
<input type="range" min="0" max="100" id="slider-h" value="0" />
<input type="range" min="-100" max="0" id="slider-v" value="0" />
<div id="underlay"></div>
<img src="http://pngimg.com/uploads/bitcoin/bitcoin_PNG47.png" id="image" />
I hope somebody can help! Thanks
PROBLEM: Element with id "containerLnkMenu" does not center correctly in it's parent div when passed into the js function "centerElementYParent" unless I put a break point in the function using google chrome's debugger.
The "getComputedStyle(f, null)" call returns a "0px" for height if executed normally so I end up with a '-57px' for the margin-top.
COMMENT: So I found a few people that had similar problems on the internet, but I couldn't find a way to map their solution to my needs.
Any help on this would be appreciated.
Let me know if you need me to explain anything further.
I would prefer a detailed response or links to further reading, that is related to my issue (so I can learn from this error), but any related/helpful comment is welcome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<div id="btnMenu" class="borderRadius" style="top: 10px; left: 10px;" onClick="btnMenuClicked(this)">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
<div id="menu" class="borderRadius" style="width: 0px; height: 0px;">
<div id="containerLnkMenu">
<a id="lnkNews" class="centerTxt lnkMenu" href="">NEWS</a>
<a id="lnkFiles" class="centerTxt lnkMenu" href="">FILES</a>
<a id="lnkTree" class="centerTxt lnkMenu" href="">TREE</a>
</div>
</div>
</body>
<script>
function btnMenuClicked(e) {
animateBtnMenu(e);
var menu = document.getElementById('menu');
var menuStyle = window.getComputedStyle(menu, null);
if (menuStyle.width == '0px' && menuStyle.height == '0px') {
openMenu(menu, menuStyle, e);
centerElementYParent(document.getElementById('containerLnkMenu'), document.getElementById('menu'));
} else {
closeMenu(menu, menuStyle, e);
}
}
</script>
</html>
body {
margin: 0;
font-family: Arial;
font-size: 16px;
}
a {
display: block;
text-decoration: none;
cursor: pointer;
}
/* Class Tools */
.centerTxt { text-align: center; }
.borderRadius { border-radius: 5px; }
.bar {
height: 5px;
transition: 0.4s;
background-color: #2E0A91;
}
.lnkMenu {
padding: 5px;
color: #FFD500;
font-size: 1.5em;
}
/*--- navigation ---*/
#btnMenu {
position: fixed;
width: 25px;
padding: 5px;
transition: 0.8s;
cursor: pointer;
}
#btnMenu:hover { background-color: #2E0A91; }
#btnMenu:hover .bar { background-color: #D4B100; }
#bar2 { margin: 5px 0 5px 0; }
.change #bar1 {
transform: rotate(-45deg) translate(-10px, 4px);
width: 141%;
}
.change #bar2 { opacity: 0; }
.change #bar3 {
transform: rotate(45deg) translate(-10px, -4px);
width: 141%;
}
#menu {
position: fixed;
z-index: 100;
top: 0;
left: 0;
overflow: hidden;
transition: 0.8s;
background-color: #2E0A91;
}
//NAME: centerElementYParent
//DESCRITPTION: e = element to center, f = parent element
// Adds margin top to e in order to vertically center element within parent (f)
function centerElementYParent(e, f) {
var eStyle = window.getComputedStyle(e, null);
var fStyle = window.getComputedStyle(f, null);
console.log(fStyle.height);
var eHeight = parseInt(eStyle.height.slice(0, eStyle.height.length - 2));
var fHeight = parseInt(fStyle.height.slice(0, fStyle.height.length - 2));
var marginTop = ((fHeight - eHeight)/2) + 'px';
e.style.marginTop = marginTop;
}
//NAME: animateBtnMenu
//DESCRIPTION: Attaches the 'change' class to the btnMenu element.
function animateBtnMenu(e) {
e.classList.toggle('change');
}
//NAME: openMenu
//DESCRIPTION: Applies a width and height to the menu whilst moving the menu button respectivley
function openMenu(e, eStyle, f) {
e.style.height = '250px';
e.style.width = '300px';
var eStyle = window.getComputedStyle(e, null);
f.style.left = '310px';
f.style.top = '260px';
}
//NAME: closeMenu
//DESCRIPTION: Sets width and height of the menu to 0 and moves the menu button respectivley
function closeMenu(e, eStyle, f) {
e.style.width = '0px';
e.style.height = '0px';
f.style.top = '10px';
f.style.left = '10px';
}
It may be because the element you want to center didn't rendered on the right position yet. Try adding setTimeout to call the function.
openMenu(menu, menuStyle, e);
setTimeout(function() {
centerElementYParent(document.getElementById('containerLnkMenu'), document.getElementById('menu'));
}, 800);
I have a project handling a library of excel files. To make it easilier for the users to visually scan them, I would like to generate preview thumbnail images of their content. Google drive does this (screenshot below) but I have no idea how.
Any ideas/suggestions on how this could be done (without using the drive API) ?
I guess this is what you need
http://github.com/lonekorean/mini-preview
DEMO
/*
* MiniPreview v0.9
*
* #author Will Boyd
* #github http://github.com/lonekorean/mini-preview
*/
(function($) {
var PREFIX = 'mini-preview';
// implemented as a jQuery plugin
$.fn.miniPreview = function(options) {
return this.each(function() {
var $this = $(this);
var miniPreview = $this.data(PREFIX);
if (miniPreview) {
miniPreview.destroy();
}
miniPreview = new MiniPreview($this, options);
miniPreview.generate();
$this.data(PREFIX, miniPreview);
});
};
var MiniPreview = function($el, options) {
this.$el = $el;
this.$el.addClass(PREFIX + '-anchor');
this.options = $.extend({}, this.defaultOptions, options);
this.counter = MiniPreview.prototype.sharedCounter++;
};
MiniPreview.prototype = {
sharedCounter: 0,
defaultOptions: {
width: 256,
height: 144,
scale: .25,
prefetch: 'pageload'
},
generate: function() {
this.createElements();
this.setPrefetch();
},
createElements: function() {
var $wrapper = $('<div>', { class: PREFIX + '-wrapper' });
var $loading = $('<div>', { class: PREFIX + '-loading' });
var $frame = $('<iframe>', { class: PREFIX + '-frame' });
var $cover = $('<div>', { class: PREFIX + '-cover' });
$wrapper.appendTo(this.$el).append($loading, $frame, $cover);
// sizing
$wrapper.css({
width: this.options.width + 'px',
height: this.options.height + 'px'
});
// scaling
var inversePercent = 100 / this.options.scale;
$frame.css({
width: inversePercent + '%',
height: inversePercent + '%',
transform: 'scale(' + this.options.scale + ')'
});
// positioning
var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
var top = (this.$el.height() + fontSize) / 2;
var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
$wrapper.css({
top: top + 'px',
left: left + 'px'
});
},
setPrefetch: function() {
switch (this.options.prefetch) {
case 'pageload':
this.loadPreview();
break;
case 'parenthover':
this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
case 'none':
this.$el.one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
default:
throw 'Prefetch setting not recognized: ' + this.options.prefetch;
break;
}
},
loadPreview: function() {
this.$el.find('.' + PREFIX + '-frame')
.attr('src', this.$el.attr('href'))
.on('load', function() {
// some sites don't set their background color
$(this).css('background-color', '#fff');
});
},
getNamespacedEvent: function(event) {
return event + '.' + PREFIX + '_' + this.counter;
},
destroy: function() {
this.$el.removeClass(PREFIX + '-anchor');
this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
this.$el.off(this.getNamespacedEvent('mouseenter'));
this.$el.find('.' + PREFIX + '-wrapper').remove();
}
};
})(jQuery);
.mini-preview-anchor {
display: inline-block;
position: relative;
white-space: nowrap;
}
.mini-preview-wrapper {
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
overflow: hidden;
z-index: -1;
opacity: 0;
margin-top: -4px;
border: solid 1px #000;
box-shadow: 4px 4px 6px rgba(0, 0, 0, .3);
transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;
}
.mini-preview-anchor:hover .mini-preview-wrapper {
z-index: 2;
opacity: 1;
margin-top: 6px;
transition: opacity .3s, margin-top .3s;
}
.mini-preview-loading, .mini-preview-cover {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.mini-preview-loading {
display: table;
height: 100%;
width: 100%;
font-size: 1.25rem;
text-align: center;
color: #f5ead4;
background-color: #59513f;
}
.mini-preview-loading::before {
content: 'Loading...';
display: table-cell;
text-align: center;
vertical-align: middle;
}
.mini-preview-cover {
background-color: rgba(0, 0, 0, 0); /* IE fix */
}
.mini-preview-frame {
border: none;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MiniPreview Demo</title>
<link href="http://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<style>
body {
height: 100%;
margin: 0;
padding: 0 10% 40px;
font-size: 2rem;
line-height: 1.5;
font-family: 'Roboto Slab', sans-serif;
text-align: justify;
color: #59513f;
background-color: #f5ead4;
}
a {
color: #537f7c;
}
.break {
text-align: center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- MiniPreview stuff here -->
<link href="./jquery.minipreview.css" rel="stylesheet">
<script src="./jquery.minipreview.js"></script>
<script>
$(function() {
$('#p1 a').miniPreview({ prefetch: 'pageload' });
$('#p2 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'none' });
});
</script>
</head>
<body>
<p id="p1">
This demo shows how to add live mini-previews to links on hover. Check out these links to SitePoint and A List Apart. Hover over them to see a small preview of what they point to.
</p>
<p class="break">• • •</p>
<p id="p2">
Those previews were fetched as soon as this page loaded. This is great for having the previews ready ahead of time, but can eat up extra bandwidth. As an alternative, check out these links to Abduzeedo and Smashing Magazine. These previews aren't fetched until you hover over this paragraph.
</p>
<p class="break">• • •</p>
<p id="p3">
Finally, check out these links to Daniel's blog, Joni's blog, and my blog. These previews are only fetched when needed. This saves the most bandwidth, but there will be a delay before the previews can be shown.
</p>
</body>
</html>
ORIGINAL SOURCE:
http://codepen.io/kanakiyajay/pen/NqgZjo
I just use a library to generate a PNG preview of the excel file and show it.
I use Free Spire.XLS for .NET because I'm in the .net world, but you can look at Wijmo Workbook Viewer for your Node.js needs.
How can I change the HTML background color automatically every 2 seconds? HTML5 with CSS3 fade in or fadeout?
I tried to use transition with timer and CSS target without any success
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
display: block;
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}
input[type=checkbox]:checked ~ .to-be-changed {
color: red;
}
A few changes A variation on this should work in modern browsers, if you know the colors and the number of colors in advance:
.animate-me {
-webkit-animation: bgcolorchange 4s infinite; /* Chrome, Safari, Opera */
animation: 4s infinite bgcolorchange;
}
#keyframes bgcolorchange {
0% {
background-color: red;
}
25% {
background-color: green;
}
50% {
background-color: yellow;
}
75% {
background-color: yellow;
}
100% {
background-color: red;
}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes bgcolorchange {
0% {background: red;}
25% {background: yellow;}
75% {background: green;}
100% {background: blue;}
}
<div class="animate-me">Trippy! Give me a headache!</div>
http://jsfiddle.net/nnw7xza2/1/
Click to demohere!
Figure it up with:
-css3
-html5
-javascript timer
var arrColor = ["#45c1bf", "#f0593e", "#aeacd4", "#bdd630", "#4479bd", "#f5b11e"];
var footer = document.getElementById("footer");
var header = document.getElementById("header");
//helper function - get dark or lighter color
function LightenDarkenColor(col, amt) {
var usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col, 16);
var r = (num >> 16) + amt;
if (r > 255) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + amt;
if (b > 255) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000FF) + amt;
if (g > 255) g = 255;
else if (g < 0) g = 0;
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
}
//random new color
function GetNewColor() {
var index = Math.floor((Math.random() * 5) + 1);
return arrColor[index];
}
// set new color
function SetNewColor(color) {
document.body.style.background = color;
var NewColor = LightenDarkenColor(color, -20);
footer.style.backgroundColor = NewColor;
header.style.backgroundColor = NewColor;
//footer.style.opacity = 1.2;
}
// on document load function start
(function() {
var colorSelected = GetNewColor();
SetNewColor(colorSelected);
})();
//change color timer
window.setInterval(function() {
var colorSelected = GetNewColor();
SetNewColor(colorSelected);
}, 2000);
* {
margin: 0;
padding: 0;
}
body {
background: #bdd630;
transition: background-color 0.5s ease;
color: #fff;
}
#header {
background: #000;
height: 40px;
text-align: center;
}
#content {
/* Now, to activate scrollbars
and compensate #footer height: */
padding-bottom: 40px;
}
#footer {
background: #000;
position: fixed;
bottom: 0px;
width: 100%;
/* cause of fixed pos */
height: 40px;
text-align: center;
}
<div id="header">header</div>
<div id="content">
<p>content here</p>
</div>
<div id="footer">footer</div>
Enjoy
If you are looking for an easy to understand way to do this, check out Basecacti. Of course, Basecacti as of now does not include embedding of the background on to your own html page, so just look at the source code behind it. Here's an example if you need it:
var clr1 = renderColors("clr1");
var clr2 = renderColors("clr2");
var clr3 = renderColors("clr3");
var speed = renderColors("speed");
var deb = document.body;
var circle = 0;
deb.style.backgroundColor = clr1;
setInterval(function(){
if (circle == 0) {
deb.style.backgroundColor = clr2;
circle = 1;
}
else if (circle == 1) {
deb.style.backgroundColor = clr3;
circle = 2;
}
else {
deb.style.backgroundColor = clr1;
circle = 0;
}
}, speed);
To make this work for you, define 3 different colors as clr1, clr2, and clr3. Then set the speed variable to 2000 for 2 secs, and it should work. (The renderColors function that defines these values in the above code is what Basecacti uses to get the colors that users define from a different webpage.) Also, Basecacti is Open-Source for now, so you might want to hurry over to their site and get this code ASAP. If you only want the background to change once after 2 seconds, change the function from setInterval to setTimeout, but don't change anything else. Please comment on this post if the Basecacti website shuts down or stops working, or if I have an error in the code.