Live Bricks

Developer
Yogev Ahuvia
Size
7,014 Kb
Views
32,384
  1. Live Bricks Previews
  2. Live Bricks HTML Codes
  3. Live Bricks CSS Codes
  4. Live Bricks JS Codes

How do I make an live bricks?

A brick wall of always flipping panels that combines 3D shapes with some principles of flat design. The perspective of the view changes as the page is scrolled to expose a different angle of the brick, like in the physical world. Live Bricks could be used for an image gallery or for a dashboard of updates.. What is a live bricks? How do you make a live bricks? This script and codes were developed by Yogev Ahuvia on 11 September 2022, Sunday.

Live Bricks Previews
IQ Test

Live Bricks - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Live Bricks</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #b5bdc8; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFB5BDC8', endColorstr='#FF28343B'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIvPjxzdG9wIG9mZnNldD0iMzYlIiBzdG9wLWNvbG9yPSIjODI4Yzk1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzNDNiIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-radial-gradient(center, ellipse cover, #b5bdc8 0%, #828c95 36%, #28343b 100%); background-image: -webkit-radial-gradient(center, ellipse cover, #b5bdc8 0%, #828c95 36%, #28343b 100%); background-image: radial-gradient(ellipse cover at center, #b5bdc8 0%, #828c95 36%, #28343b 100%); margin-top: -50px; opacity: 0.15;
}
.container { width: 930px; margin: 50px auto; transform-style: preserve-3d; -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; -webkit-perspective-origin: 50% 200px; -moz-perspective-origin: 50% 200px; perspective-origin: 50% 200px;
}
.container :before, .container :after { content: ""; display: table;
}
.container :after { clear: both;
}
.panel { height: 253.125px; transform-style: preserve-3d; transform-origin: 50% 50% -25px; position: relative; transition: transform 1s; float: left; margin: 15px;
}
.panel:first-child { margin-left: 0;
}
.panel:last-child { margin-right: 0;
}
.panel.full { width: 900px;
}
.panel.half { width: 450px;
}
.panel.third { width: 300px;
}
.panel.two-thirds { width: 600px;
}
.panel .face { width: 100%; height: 100%; position: absolute; border: 1px solid rgba(0, 0, 0, 0.1); backface-visibility: hidden; transform-style: preserve-3d; padding: 15px; text-align: center; font-size: 4em; font-weight: bold; line-height: 223.125px; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); box-shadow: inset 0px 1px 30px 0px rgba(0, 0, 0, 0.15);
}
.panel .face.front { box-shadow: none;
}
.panel .face.back { transform: translateZ(-50px) rotateY(180deg) rotate(180deg); box-shadow: none;
}
.panel .face.top { height: 50px; transform: translateZ(-50px) rotateX(90deg); transform-origin: 50% 0%;
}
.panel .face.right { height: 100%; width: 50px; left: 100%; transform: rotateY(90deg); transform-origin: 0% 0%;
}
.panel .face.bottom { height: 50px; width: 100%; transform: translateY(253.125px) rotateX(-90deg); transform-origin: 50% 0%;
}
.panel .face.left { height: 100%; width: 50px; transform: translateZ(-50px) rotateY(-90deg); transform-origin: 0% 0%;
}
.p01 .face { background: #F1C40F; color: #F1C40F;
}
.p02 .face { background: #3498DB; color: #3498DB;
}
.p03 .face { background: #9B59B6; color: #9B59B6;
}
.p04 .face { background: #2ECC71; color: #2ECC71;
}
.p05 .face { background: #31557a; color: #31557a;
}
.p06 .face { background: #E74C3C; color: #E74C3C;
}
body { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 18px; position: relative; width: 100%; height: 100%; overflow-x: hidden; background: url(https://s.cdpn.io/4389/[email protected]);
}
* { box-sizing: border-box;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='wrapper'></div>
<div class='container'> <div class='panel-row'> <div class='panel two-thirds p01'> <div class='face front'>endless</div> <div class='face back'>words</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> <div class='panel third p02'> <div class='face front'>words</div> <div class='face back'>on</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> </div> <div class='panel-row'> <div class='panel third p03'> <div class='face front'>on</div> <div class='face back'>auto</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> <div class='panel two-thirds p04'> <div class='face front'>auto</div> <div class='face back'>rolling</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> </div> <div class='panel-row'> <div class='panel half p05'> <div class='face front'>rolling</div> <div class='face back'>panels</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> <div class='panel half p06'> <div class='face front'>:)</div> <div class='face back'>:)</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> </div> <div class='panel-row'> <div class='panel two-thirds p01'> <div class='face front'>7</div> <div class='face back'>7</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> <div class='panel third p02'> <div class='face front'>8</div> <div class='face back'>8</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> </div> <div class='panel-row'> <div class='panel third p03'> <div class='face front'>9</div> <div class='face back'>9</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> <div class='panel two-thirds p04'> <div class='face front'>10</div> <div class='face back'>10</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> </div> <div class='panel-row'> <div class='panel half p05'> <div class='face front'>11</div> <div class='face back'>11</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> <div class='panel half p06'> <div class='face front'>12</div> <div class='face back'>12</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> </div> <div class='panel-row'> <div class='panel two-thirds p01'> <div class='face front'>13</div> <div class='face back'>13</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> <div class='panel third p02'> <div class='face front'>14</div> <div class='face back'>14</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> </div> <div class='panel-row'> <div class='panel third p03'> <div class='face front'>15</div> <div class='face back'>15</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> <div class='panel two-thirds p04'> <div class='face front'>16</div> <div class='face back'>16</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> </div> <div class='panel-row'> <div class='panel half p05'> <div class='face front'>17</div> <div class='face back'>17</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></div> </div> <div class='panel half p06'> <div class='face front'>18</div> <div class='face back'>18</div> <div class='face top'></div> <div class='face right'></div> <div class='face bottom'></div> <div class='face left'></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>

Live Bricks - Script Codes CSS Codes

.wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #b5bdc8; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFB5BDC8', endColorstr='#FF28343B'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YmRjOCIvPjxzdG9wIG9mZnNldD0iMzYlIiBzdG9wLWNvbG9yPSIjODI4Yzk1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzNDNiIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-radial-gradient(center, ellipse cover, #b5bdc8 0%, #828c95 36%, #28343b 100%); background-image: -webkit-radial-gradient(center, ellipse cover, #b5bdc8 0%, #828c95 36%, #28343b 100%); background-image: radial-gradient(ellipse cover at center, #b5bdc8 0%, #828c95 36%, #28343b 100%); margin-top: -50px; opacity: 0.15;
}
.container { width: 930px; margin: 50px auto; transform-style: preserve-3d; -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; -webkit-perspective-origin: 50% 200px; -moz-perspective-origin: 50% 200px; perspective-origin: 50% 200px;
}
.container :before, .container :after { content: ""; display: table;
}
.container :after { clear: both;
}
.panel { height: 253.125px; transform-style: preserve-3d; transform-origin: 50% 50% -25px; position: relative; transition: transform 1s; float: left; margin: 15px;
}
.panel:first-child { margin-left: 0;
}
.panel:last-child { margin-right: 0;
}
.panel.full { width: 900px;
}
.panel.half { width: 450px;
}
.panel.third { width: 300px;
}
.panel.two-thirds { width: 600px;
}
.panel .face { width: 100%; height: 100%; position: absolute; border: 1px solid rgba(0, 0, 0, 0.1); backface-visibility: hidden; transform-style: preserve-3d; padding: 15px; text-align: center; font-size: 4em; font-weight: bold; line-height: 223.125px; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); box-shadow: inset 0px 1px 30px 0px rgba(0, 0, 0, 0.15);
}
.panel .face.front { box-shadow: none;
}
.panel .face.back { transform: translateZ(-50px) rotateY(180deg) rotate(180deg); box-shadow: none;
}
.panel .face.top { height: 50px; transform: translateZ(-50px) rotateX(90deg); transform-origin: 50% 0%;
}
.panel .face.right { height: 100%; width: 50px; left: 100%; transform: rotateY(90deg); transform-origin: 0% 0%;
}
.panel .face.bottom { height: 50px; width: 100%; transform: translateY(253.125px) rotateX(-90deg); transform-origin: 50% 0%;
}
.panel .face.left { height: 100%; width: 50px; transform: translateZ(-50px) rotateY(-90deg); transform-origin: 0% 0%;
}
.p01 .face { background: #F1C40F; color: #F1C40F;
}
.p02 .face { background: #3498DB; color: #3498DB;
}
.p03 .face { background: #9B59B6; color: #9B59B6;
}
.p04 .face { background: #2ECC71; color: #2ECC71;
}
.p05 .face { background: #31557a; color: #31557a;
}
.p06 .face { background: #E74C3C; color: #E74C3C;
}
body { font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 18px; position: relative; width: 100%; height: 100%; overflow-x: hidden; background: url(https://s.cdpn.io/4389/[email protected]);
}
* { box-sizing: border-box;
}

Live Bricks - Script Codes JS Codes

var Panel = function(element) { this.element = $(element); this.rotation = 0; this.timer = null; this.live();
};
Panel.prototype.flip = function() { this.rotation += 180; $(this.element).css("transform", "rotateX(-" + this.rotation + "deg)");
};
Panel.prototype.live = function() { var rnd = Math.round((Math.random() * 7) + 3); this.timer = setTimeout((function(panel) { return function() { panel.flip(); panel.live(); }; })(this), rnd * 1000);
};
var panels = [];
$(".panel").each(function(index, element) { panels.push(new Panel(element));
});
$(window).scroll(function(e) { $(".container").css("perspective-origin", "50% " + ($(window).scrollTop() + 200) + "px");
});
Live Bricks - Script Codes
Live Bricks - Script Codes
Home Page Home
Developer Yogev Ahuvia
Username kindofone
Uploaded September 11, 2022
Rating 3.5
Size 7,014 Kb
Views 32,384
Do you need developer help for Live Bricks?

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!

Yogev Ahuvia (kindofone) Script Codes
Name
Living Interfaces - Talk
CSS-Only Countdown Clock
Reactive CSS Transitions
A Pen by Yogev Ahuvia
3D Cube of 3D Balls
Tears Of Happiness
The CodePen Logo
Natural Language Accordion Form
CSS Only In-Place Translation
Subtle Buttons
Create amazing SEO content 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!