Dynamic Material Boxes

Developer

Size

3,626 Kb

Views

44,528

Dynamic Material Boxes Previews
Dynamic Material Boxes HTML Codes
Dynamic Material Boxes CSS Codes
Dynamic Material Boxes JS Codes

How do I make an dynamic material boxes?

Material fixed size boxes bases on bootstrap grid. Completely dynamic selectors. What is a dynamic material boxes? How do you make a dynamic material boxes? This script and codes were developed by Bryce Snyder on 28 July 2022, Thursday.

Dynamic Material Boxes Previews

Dynamic Material Boxes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic Material Boxes</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- change the row to desired amounts. -->
<!-- change the col to desired size xs, sm, md, lg & grid size -->
<button class='btn btn-primary'>Redo!</button>
<div class='container'> <div class='row'> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> <div class='col-xs-3'> <div class='item'> <h4>Item</h4> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dynamic Material Boxes - Script Codes CSS Codes

[class*="col-"] { padding: 5px;
}
.row .item { positon: relative; cursor: pointer; opacity: 0; -moz-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); background-clip: padding-box !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.row .item.shown { opacity: 1; -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);
}
.row .item:hover { -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.row .item h4 { color: white; font-weight: 300; position: absolute; bottom: 0; left: 10px;
}
[class*="col-"]:nth-child(1) .item { background: #f44336;
}
[class*="col-"]:nth-child(1) .item:hover { background: #ea1c0d;
}
[class*="col-"]:nth-child(2) .item { background: #E91E63;
}
[class*="col-"]:nth-child(2) .item:hover { background: #c1134e;
}
[class*="col-"]:nth-child(3) .item { background: #9C27B0;
}
[class*="col-"]:nth-child(3) .item:hover { background: #771e86;
}
[class*="col-"]:nth-child(4) .item { background: #673AB7;
}
[class*="col-"]:nth-child(4) .item:hover { background: #512e90;
}
[class*="col-"]:nth-child(5) .item { background: #3F51B5;
}
[class*="col-"]:nth-child(5) .item:hover { background: #32408f;
}
[class*="col-"]:nth-child(6) .item { background: #2196F3;
}
[class*="col-"]:nth-child(6) .item:hover { background: #0c7cd5;
}
[class*="col-"]:nth-child(7) .item { background: #03A9F4;
}
[class*="col-"]:nth-child(7) .item:hover { background: #0286c2;
}
[class*="col-"]:nth-child(8) .item { background: #00BCD4;
}
[class*="col-"]:nth-child(8) .item:hover { background: #008fa1;
}
[class*="col-"]:nth-child(9) .item { background: #009688;
}
[class*="col-"]:nth-child(9) .item:hover { background: #00635a;
}
[class*="col-"]:nth-child(10) .item { background: #4CAF50;
}
[class*="col-"]:nth-child(10) .item:hover { background: #3d8b40;
}
[class*="col-"]:nth-child(11) .item { background: #8BC34A;
}
[class*="col-"]:nth-child(11) .item:hover { background: #71a436;
}
[class*="col-"]:nth-child(12) .item { background: #CDDC39;
}
[class*="col-"]:nth-child(12) .item:hover { background: #b2c022;
}
[class*="col-"]:nth-child(13) .item { background: #FFEB3B;
}
[class*="col-"]:nth-child(13) .item:hover { background: #ffe608;
}
[class*="col-"]:nth-child(14) .item { background: #FFC107;
}
[class*="col-"]:nth-child(14) .item:hover { background: #d39e00;
}
[class*="col-"]:nth-child(15) .item { background: #FF9800;
}
[class*="col-"]:nth-child(15) .item:hover { background: #cc7a00;
}
[class*="col-"]:nth-child(16) .item { background: #FF5722;
}
[class*="col-"]:nth-child(16) .item:hover { background: #ee3900;
}

Dynamic Material Boxes - Script Codes JS Codes

;(function() {	var elems = $('.row [class*="item"]');	var setHeight = function(elem) {	$(elem).height($(elem).width());	};	$(window).resize(function() {	$.each(elems, function(key, value) {	setHeight(elems[key]);	});	});	var i = 0;	x = true;	$('button').click(function() {	if (i === -1 || i == elems.length) {	animate();	x = !x;	}	});	var animate = function() {	setTimeout(function() {	$(elems[i]).toggleClass('shown');	setHeight(elems[i]);	(x) ? i++ : i--;	console.log(i);	if (i < elems.length && i >= 0) {	animate();	};	}, 60);	}; animate();
})();

Home Page	Home
Developer	Bryce Snyder
Username	brycesnyder
Uploaded	July 28, 2022
Rating	4.5
Size	3,626 Kb
Views	44,528

Do you need developer help for Dynamic Material Boxes?

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!

Bryce Snyder (brycesnyder) Script Codes

Name	Size
Pure CSS3 Parallax Menu	3,672 Kb
Multi Share Button in Pure CSS	4,586 Kb
PURE CSS3 Vector Ribbon Banner	2,266 Kb
Pure CSS Modalbox	3,264 Kb
New Instagram Logo Attempt	2,208 Kb
Social Media Animated Buttons	2,438 Kb
A Pen by Bryce Snyder	2,655 Kb
PURE CSS3 RIBBON	2,948 Kb
Pure CSS Radio Buttons Pseudo Checked Cards	3,065 Kb
Pure CSS3 Viking Mace	2,027 Kb

Create amazing video scripts 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!

Similar Scripts & Codes

Name	Username	Size
Guidepopup	Wooljs	3,747 Kb
Css3 slide	Nakome	3,190 Kb
Dribbble Template	ExtremelyGinger	2,204 Kb
Weather Icons	Gtalin	2,519 Kb
A form arranged using automatic placement.	Vikasford	2,103 Kb
To Do List with Delete	Mattlbrody	2,068 Kb
Navcube	Wbarlow	4,775 Kb
Nav Test -- cats 1	Payls	4,735 Kb
Mandelbrot Fractal	_Billy_Brown	2,706 Kb
React Recipe Box	Krokodill	5,347 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!