FlipBoard (js driven)

Developer
Chad Scira
Size
5,397 Kb
Views
36,432
  1. FlipBoard (js driven) Previews
  2. FlipBoard (js driven) HTML Codes
  3. FlipBoard (js driven) CSS Codes
  4. FlipBoard (js driven) JS Codes

How do I make an flipboard (js driven)?

What is a flipboard (js driven)? How do you make a flipboard (js driven)? This script and codes were developed by Chad Scira on 27 August 2022, Saturday.

FlipBoard (js driven) Previews
IQ Test

FlipBoard (js driven) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FlipBoard (js driven)</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

FlipBoard (js driven) - Script Codes CSS Codes

body {	background-color: #ffd200;	}	.flip-wrapper * {	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	-ms-box-sizing: border-box;	-o-box-sizing: border-box;	box-sizing: border-box;	-webkit-backface-visibility: hidden;	-moz-backface-visibility: hidden;	-ms-backface-visibility: hidden;	-o-backface-visibility: hidden;	backface-visibility: hidden;	}	.flip-wrapper a {	cursor: pointer;	text-decoration: none;	color: #ccc; }	.flip-wrapper a:hover {	color: #fff; }	.flip-wrapper ul {	list-style: none; }	/* Main */	.flip-wrapper {	display: inline-block;	font: normal 11px "Helvetica Neue", Helvetica, sans-serif;	-webkit-user-select: none;	text-align: center;	position: relative;	margin: 1em;	}	.flip-wrapper:before,	.flip-wrapper:after {	content: " "; /* 1 */	display: table; /* 2 */	}	.flip-wrapper:after {	clear: both;	}	/* Skeleton */	.flip-wrapper ul {	position: relative;	float: left;	margin: 5px;	width: 60px;	height: 90px;	font-size: 80px;	font-weight: bold;	line-height: 87px;	border-radius: 6px;	background: #000;	}	.flip-wrapper ul li {	z-index: 1;	position: absolute;	left: 0;	top: 0;	width: 100%;	height: 100%;	line-height: 87px;	text-decoration: none !important;	}	.flip-wrapper ul li:first-child {	z-index: 2; }	.flip-wrapper ul li a {	display: block;	height: 100%;	-webkit-perspective: 200px;	-moz-perspective: 200px;	perspective: 200px;	margin: 0 !important;	overflow: visible !important;	cursor: default !important; }	.flip-wrapper ul li a div {	z-index: 1;	position: absolute;	left: 0;	width: 100%;	height: 50%;	font-size: 80px;	overflow: hidden;	outline: 1px solid transparent; }	.flip-wrapper ul li a div .shadow {	position: absolute;	width: 100%;	height: 100%;	z-index: 2; }	.flip-wrapper ul li a div.up {	-webkit-transform-origin: 50% 100%;	-moz-transform-origin: 50% 100%;	-ms-transform-origin: 50% 100%;	-o-transform-origin: 50% 100%;	transform-origin: 50% 100%;	top: 0; }	.flip-wrapper ul li a div.down {	-webkit-transform-origin: 50% 0;	-moz-transform-origin: 50% 0;	-ms-transform-origin: 50% 0;	-o-transform-origin: 50% 0;	transform-origin: 50% 0;	bottom: 0;	border-bottom-left-radius: 6px;	border-bottom-right-radius: 6px;	}	.flip-wrapper ul li a div.up:before {	content: "";	position: absolute;	bottom: 0px;	left: 0;	width: 100%;	height: 0px;	border-bottom: 1px solid #b5b5b5 }	.flip-wrapper ul li a div div.inn {	font-family: "Helvetica Neue";	position: absolute;	left: 0;	z-index: 1;	width: 100%;	height: 200%;	color: #302f2f;	/* text-shadow: 0 1px 2px #000;*/	text-align: center;	/*background-color: #fff;*/	/*border-radius: 6px;*/	font-size: 70px; }	.flip-wrapper ul li a div.up {	background-color: #fff;	border-top-left-radius: 6px;	border-top-right-radius: 6px;	}	.flip-wrapper ul li a div.down {	background-color: #fff;	border-bottom-left-radius: 6px;	border-bottom-right-radius: 6px;	}	.flip-wrapper ul li a div.up div.inn {	top: 0; }	.flip-wrapper ul li a div.down div.inn {	bottom: 0; }	.flip-wrapper .flip { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }	.flip-wrapper ul li.flip-active {	z-index: 3; }	/* SHADOW */	.flip-wrapper ul li.flip-before .up .shadow,	.flip-wrapper ul li.flip-active .up .shadow {	border-top-left-radius: 6px;	border-top-right-radius: 6px;	background: -moz-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(230, 230, 230, 0.1) 100%);	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .2)), color-stop(100%, rgba(230, 230, 230, 0.1)));	background: linear, top, rgba(0, 0, 0, .2) 0%, rgba(230, 230, 230, 0.1) 100%;	background: -o-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(230, 230, 230, 0.1) 100%);	background: -ms-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(230, 230, 230, 0.1) 100%);	background: linear, to bottom, rgba(0, 0, 0, .2) 0%, rgba(230, 230, 230, 0.1) 100%;	opacity: 0;	}	.flip-wrapper ul li.flip-before .down .shadow,	.flip-wrapper ul li.flip-active .down .shadow {	border-bottom-left-radius: 6px;	border-bottom-right-radius: 6px;	background: -moz-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(230, 230, 230, 0.1) 100%);	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .4)), color-stop(100%, rgba(230, 230, 230, 0.1)));	background: linear, top, rgba(0, 0, 0, .2) 0%, rgba(230, 230, 230, 0.1) 100%;	background: -o-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(230, 230, 230, 0.1) 100%);	background: -ms-linear-gradient(top, rgba(0, 0, 0, .2) 0%, rgba(230, 230, 230, 0.1) 100%);	background: linear, to bottom, rgba(0, 0, 0, .2) 0%, rgba(230, 230, 230, 0.1) 100%;	opacity: 0;	}

FlipBoard (js driven) - Script Codes JS Codes

function Node (canvas, x, y) { this.frame = 0; this.x = x; this.y = y; this.w = canvas.width; this.h = canvas.height; this.canvas = canvas; this.context = canvas.getContext('2d'); this.xDirection = 1; this.yDirection = 1; this.connections = []; this.speed = 0;
}
Node.prototype = { tick: function (frame) { if (frame !== this.frame) { if (this.connections.length > 9) { this.connections.forEach(function (connection) { if (Math.random() > .10 && connection.speed < .02) return; if (this.x < connection.x) { connection.xDirection = 1; connection.speed = 5 * Math.random(); } else if (this.x > connection.x) { connection.xDirection = -1; connection.speed = 5 * Math.random(); } if (this.y < connection.y) { connection.yDirection = 1; connection.speed = 5 * Math.random(); } else if (this.y > connection.y) { connection.yDirection = -1; connection.speed = 5 * Math.random(); } }, this); } if (this.speed < .02 && Math.random() < .02) { this.xDirection = this.xDirection === 1 ? -1 : 1; } if (this.speed < .02 && Math.random() < .02) { this.yDirection = this.yDirection === 1 ? -1 : 1; } if (Math.random() < .02) { this.speed = Math.random() * 1; } if (this.x < 2 && this.xDirection === -1) { this.xDirection = 1; this.speed = 3; } else if (this.x > this.w - 2 && this.xDirection === 1) { this.xDirection = -1; this.speed = 3; } if (this.y < 2 && this.yDirection === -1) { this.yDirection = 1; this.speed = 3; } else if (this.y > this.h - 2 && this.yDirection === 1) { this.yDirection = -1; this.speed = 3; } this.speed *= .9; this.x += ((2+(this.speed*2)) * this.xDirection)/3; this.y += ((1+(this.speed*2)) * this.yDirection)/3; this.frame = frame; } }, connect: function (neighbor) { var distance = this.distance(neighbor); if (this === neighbor || distance > 150) return; if (distance < 130) { this.connections.push(neighbor); neighbor.connections.push(this); } this.context.strokeStyle = 'rgba(230, 179, 0,' + (1-(distance/150)) + ')'; this.context.beginPath(); this.context.moveTo(this.x,this.y); this.context.lineTo(neighbor.x,neighbor.y); this.context.stroke(); }, draw: function () { this.context.fillStyle = 'rgb(230, 179, 0)' this.context.beginPath(); this.context.arc(this.x, this.y, 2 + (.2 * this.connections.length), 0, 2 * Math.PI, false); this.context.fill(); }, reset: function () { this.connections = []; }, distance: function (point2) { var xs = 0, ys = 0; xs = point2.x - this.x; xs = xs * xs; ys = point2.y - this.y; ys = ys * ys; return Math.sqrt( xs + ys ); }
};
var canvas = document.createElement('canvas'), context = canvas.getContext('2d');
canvas.width = window.innerWidth * devicePixelRatio;
canvas.height = window.innerHeight * devicePixelRatio;
canvas.style.cssText = 'position: absolute; left: 0; top: 0; -webkit-transform: scale(' + (1/devicePixelRatio) + '); -webkit-transform-origin: 0 0;';
document.body.appendChild(canvas);
var nodes = [], start = new Date();
for (var i = 0; i < 100; i++) { nodes.push(new Node(canvas, Math.floor(Math.random() * canvas.width),Math.floor(Math.random() * canvas.height)));
}
canvas.addEventListener('click', function (event) { nodes.forEach(function (node) { if (node.x > event.x) node.xDirection = -1; if (node.x < event.x) node.xDirection = 1; if (node.y > event.y) node.yDirection = -1; if (node.y < event.y) node.yDirection = 1; node.speed = Math.random() * 2; });
});
function draw () { requestAnimationFrame(draw); var frame = Math.floor((new Date() - start) / (1000/60)); context.fillStyle = '#fddd47'; context.fillRect(0, 0, canvas.width, canvas.height); nodes.forEach(function (node) { node.reset(); }); nodes.forEach(function (node) { nodes.forEach(function (neighbor) { node.connect(neighbor); }); }); nodes.forEach(function (node) { node.tick(frame); node.draw(); });
}
draw();
function FlipBoard ($config) {	this.number = $config.text;	this.animationDuration = $config.animationDuration || 1000;	this.animationStartTime = null;	this.fontSize = $config.fontSize || 70;	this.lineHeight = $config.lineHeight || 87;	this.width = $config.width || 60;	this.height = $config.height || 90;	this.current = this.number;	this.animationLoop = this.animationLoop.bind(this);	this.animationLoopHandle = null;	this.createElements();
}
FlipBoard.prototype = {	vendorPrefix: (function () { var styles = window.getComputedStyle(document.documentElement, ''),	pre = (Array.prototype.slice .call(styles) .join('') .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])	)[1],	dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1]; return {	dom: dom,	lowercase: pre,	css: '-' + pre + '-',	js: pre[0].toUpperCase() + pre.substr(1) };	})(),	createElements: function () {	this.wrapperElement = document.createElement('div');	this.wrapperElement.className = 'flip-wrapper';	this.wrapperElement.addEventListener('click', function () {	this.animateTo(Math.floor(Math.random() * 24));	}.bind(this));	this.flipElement = document.createElement('ul');	this.flipElement.className = 'flip';	this.flipElement.style.width = this.width + 'px';	this.flipElement.style.height = this.height + 'px';	this.wrapperElement.appendChild(this.flipElement);	this.flipBeforeElement = document.createElement('li');	this.flipBeforeElement.className = 'flip-before';	this.flipElement.appendChild(this.flipBeforeElement);	this.flipBeforeAElement = document.createElement('a');	this.flipBeforeAElement.href = '#';	this.flipBeforeElement.appendChild(this.flipBeforeAElement);	this.flipBeforeUpElement = document.createElement('div');	this.flipBeforeUpElement.className = 'up';	this.flipBeforeAElement.appendChild(this.flipBeforeUpElement);	this.flipBeforeUpShadowElement = document.createElement('div');	this.flipBeforeUpShadowElement.className = 'shadow';	this.flipBeforeUpElement.appendChild(this.flipBeforeUpShadowElement);	this.flipBeforeUpInnElement = document.createElement('div');	this.flipBeforeUpInnElement.className = 'inn';	this.flipBeforeUpInnElement.style.fontSize = this.fontSize + 'px';	this.flipBeforeUpInnElement.style.lineHeight = this.lineHeight + 'px';	this.flipBeforeUpElement.appendChild(this.flipBeforeUpInnElement);	this.flipBeforeDownElement = document.createElement('div');	this.flipBeforeDownElement.className = 'down';	this.flipBeforeAElement.appendChild(this.flipBeforeDownElement);	this.flipBeforeDownShadowElement = document.createElement('div');	this.flipBeforeDownShadowElement.className = 'shadow';	this.flipBeforeDownElement.appendChild(this.flipBeforeDownShadowElement);	this.flipBeforeDownInnElement = document.createElement('div');	this.flipBeforeDownInnElement.className = 'inn';	this.flipBeforeDownInnElement.style.fontSize = this.fontSize + 'px';	this.flipBeforeDownInnElement.style.lineHeight = this.lineHeight + 'px';	this.flipBeforeDownElement.appendChild(this.flipBeforeDownInnElement);	this.flipActiveElement = document.createElement('li');	this.flipActiveElement.className = 'flip-active';	this.flipElement.appendChild(this.flipActiveElement);	this.flipActiveAElement = document.createElement('a');	this.flipActiveAElement.href = '#';	this.flipActiveElement.appendChild(this.flipActiveAElement);	this.flipActiveUpElement = document.createElement('div');	this.flipActiveUpElement.className = 'up';	this.flipActiveAElement.appendChild(this.flipActiveUpElement);	this.flipActiveUpShadowElement = document.createElement('div');	this.flipActiveUpShadowElement.className = 'shadow';	this.flipActiveUpElement.appendChild(this.flipActiveUpShadowElement);	this.flipActiveUpInnElement = document.createElement('div');	this.flipActiveUpInnElement.className = 'inn';	this.flipActiveUpInnElement.style.fontSize = this.fontSize + 'px';	this.flipActiveUpInnElement.style.lineHeight = this.lineHeight + 'px';	this.flipActiveUpElement.appendChild(this.flipActiveUpInnElement);	this.flipActiveDownElement = document.createElement('div');	this.flipActiveDownElement.className = 'down';	this.flipActiveAElement.appendChild(this.flipActiveDownElement);	this.flipActiveDownShadowElement = document.createElement('div');	this.flipActiveDownShadowElement.className = 'shadow';	this.flipActiveDownElement.appendChild(this.flipActiveDownShadowElement);	this.flipActiveDownInnElement = document.createElement('div');	this.flipActiveDownInnElement.className = 'inn';	this.flipActiveDownInnElement.style.fontSize = this.fontSize + 'px';	this.flipActiveDownInnElement.style.lineHeight = this.lineHeight + 'px';	this.flipActiveDownElement.appendChild(this.flipActiveDownInnElement);	},	appendTo: function (container) {	container.appendChild(this.wrapperElement);	},	animateTo: function (number) {	this.resetElement();	this.number = number;	this.animationStartTime = new Date();	this.animationLoop();	},	resetElement: function () {	cancelAnimationFrame(this.animationLoopHandle);	this.animationStartTime = null;	this.flipBeforeUpInnElement.innerHTML = this.number;	this.flipBeforeDownInnElement.innerHTML = this.number;	this.flipBeforeUpElement.style.display = 'block';	this.flipActiveElement.style.zIndex = 0;	this.flipActiveDownElement.style.transform =	this.flipActiveDownElement.style[this.vendorPrefix.lowercase + 'Transform'] = 'rotateX(' + 90 + 'deg)';	this.flipBeforeUpElement.style.transform =	this.flipBeforeUpElement.style[this.vendorPrefix.lowercase + 'Transform'] = 'rotateX(' + 0 + 'deg)';	this.flipBeforeUpShadowElement.style.opacity = 0;	this.flipBeforeDownShadowElement.style.opacity = 0;	this.current = this.number;	this.frame = 0;	},	animationLoop: function () {	var percent = (new Date() - this.animationStartTime) / this.animationDuration;	if (percent > 1) {	this.resetElement();	return;	}	cancelAnimationFrame(this.animationLoopHandle);	this.animationLoopHandle = requestAnimationFrame(this.animationLoop);	if (!this.frame) {	this.flipBeforeUpInnElement.innerHTML = this.current;	this.flipBeforeDownInnElement.innerHTML = this.current;	this.flipActiveUpInnElement.innerHTML = this.number;	this.flipActiveDownInnElement.innerHTML = this.number;	this.flipActiveDownShadowElement.style.opacity = 0;	this.flipBeforeDownShadowElement.style.opacity = 0;	this.flipActiveUpShadowElement.style.opacity = 0;	this.flipBeforeUpShadowElement.style.opacity = 0;	}	var frame = Math.floor((new Date() - this.animationStartTime) / (1000/60));	if (this.frame === frame) return;	this.frame = frame;	var turnPercent;	if (percent > .5) {	turnPercent = (percent-.5) * 2;	if (.7 > percent) {	this.flipActiveElement.style.zIndex = 2;	} else {	this.flipActiveElement.style.zIndex = 4;	}	this.flipBeforeUpElement.style.display = 'none';	this.flipActiveDownElement.style.zIndex = 2;	this.flipActiveDownElement.style.transform =	this.flipActiveDownElement.style[this.vendorPrefix.lowercase + 'Transform'] = 'rotateX(' + (90 - (90*turnPercent)).toFixed(3) + 'deg)';	this.flipActiveDownShadowElement.style.opacity = (1 - (.3 + (.7*turnPercent))).toFixed(3);	this.flipActiveUpShadowElement.style.opacity = (1 - (1 * turnPercent)).toFixed(3);	this.flipBeforeDownShadowElement.style.opacity = turnPercent;	} else {	turnPercent = percent * 2;	this.flipActiveElement.style.zIndex = 1;	this.flipActiveUpShadowElement.style.opacity = 1;	this.flipBeforeUpShadowElement.style.opacity = (.2 + (.8*turnPercent)).toFixed(3);	this.flipBeforeUpElement.style.transform =	this.flipBeforeUpElement.style[this.vendorPrefix.lowercase + 'Transform'] = 'rotateX(' + (-90*turnPercent).toFixed(3) + 'deg)';	this.flipBeforeUpElement.style.zIndex = 2;	}	}
};
var c = document.createElement('div');
c.style.cssText = 'width: 360px; margin: 20px auto;'
document.body.appendChild(c);
function createAnimatedFlipBoard () {	var number = 23;	var flipBoard = new FlipBoard({text: number, fontSize: 55, lineHeight: 117, width: 90, height: 120, animationDuration: 1000});	flipBoard.appendTo(c);	setInterval(function () {	number++;	number = number > 24 ? 0 : number;	flipBoard.animateTo(number);	}, 2000);	number++;	flipBoard.animateTo(number);
}
function createAnimatedFlipBoardAMPM () {	var text = 'am';	var flipBoard = new FlipBoard({text: text, fontSize: 30, lineHeight:77, width: 84, height: 84});	flipBoard.appendTo(c); flipBoard.wrapperElement.style.top = '-18px';	setInterval(function () {	text = text === 'am' ? 'pm' : 'am';	flipBoard.animateTo(text);	}, 2000);	text = text === 'am' ? 'pm' : 'am';	flipBoard.animateTo(text);
}
createAnimatedFlipBoard();
createAnimatedFlipBoard();
createAnimatedFlipBoardAMPM();
FlipBoard (js driven) - Script Codes
FlipBoard (js driven) - Script Codes
Home Page Home
Developer Chad Scira
Username icodeforlove
Uploaded August 27, 2022
Rating 3
Size 5,397 Kb
Views 36,432
Do you need developer help for FlipBoard (js driven)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chad Scira (icodeforlove) Script Codes
Name
Canvas Text Vortex
Curl Request to Node Request
FizzBuzz CAPTCHA
Client-side nudity detection
8bit Animation
Faces
Ripple Words
Animated rainbow wave on canvas
Live example of core distribution
Delayed Follow
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!