v2.2
MENU ANIMATIONS
UI SURECART
BUTTONS
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexible Card Expand Configurator - BricksFusion</title>
<style>
:root {
--background: #000;
--card-bg: #1e1e1e;
--card-bg-hover: #252525;
--text-primary: #f2f2f7;
--text-secondary: #8e8e93;
--accent: #ef6013;
--accent-hover: #c64c0c;
--border: #2c2c2e;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
--track: #2c2c2e;
--thumb: #ef6013;
--card-radius: 16px;
--input-radius: 8px;
--button-radius: 12px;
--transition: all 0.25s ease;
--font: 'Inter', BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
--action-bar-height: 70px;
--success: #28a745;
--warning: #ffc107;
--danger: #dc3545;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font);
background-color: var(--background);
color: var(--text-primary);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-bottom: var(--action-bar-height);
}
.action-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--action-bar-height);
background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
border-top: 1px solid var(--border);
z-index: 1000;
display: flex;
align-items: center;
padding: 0 1.5rem;
gap: 1rem;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
}
.breadcrumb-item {
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 500;
text-decoration: none;
transition: var(--transition);
padding: 0.5rem 0.75rem;
border-radius: 6px;
}
.breadcrumb-item:hover {
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.05);
}
.breadcrumb-item.active {
color: var(--accent);
background-color: rgba(239, 96, 19, 0.1);
}
.breadcrumb-separator {
color: var(--text-secondary);
font-size: var(--text-xs);
opacity: 0.5;
}
.action-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
}
.action-btn {
padding: 0.6rem 1rem;
background-color: var(--card-bg);
color: var(--text-primary);
font-family: var(--font);
font-size: var(--text-xs);
font-weight: 500;
border: 1px solid var(--border);
border-radius: var(--button-radius);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
white-space: nowrap;
}
.action-btn:hover {
background-color: var(--card-bg-hover);
border-color: var(--accent);
transform: translateY(-1px);
}
.action-btn.primary {
background: linear-gradient(90deg, var(--accent), #ff8c51);
border-color: var(--accent);
color: white;
}
.action-btn.primary:hover {
background: linear-gradient(90deg, var(--accent-hover), #e67a3f);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 96, 19, 0.3);
}
.data-attribute-display {
background-color: rgba(50, 50, 50, 0.8);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.5rem 0.75rem;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: var(--text-xs);
color: #ff8c51;
cursor: pointer;
transition: var(--transition);
user-select: all;
}
.data-attribute-display:hover {
background-color: rgba(239, 96, 19, 0.2);
border-color: var(--accent);
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.page-header {
text-align: center;
margin-bottom: 2rem;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
background: linear-gradient(90deg, var(--accent), #ff8c51);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-subtitle {
font-size: var(--text-s);
color: var(--text-secondary);
font-weight: 500;
}
.instructions-toggle {
margin-bottom: 2rem;
}
.instructions-card {
background-color: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.instructions-header {
padding: 1rem 1.5rem;
cursor: pointer;
transition: var(--transition);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid transparent;
}
.instructions-header:hover {
background-color: var(--card-bg-hover);
}
.instructions-card.expanded .instructions-header {
border-bottom-color: var(--border);
}
.instructions-title {
font-size: var(--text-s);
font-weight: 600;
}
.toggle-icon {
font-size: 1.2em;
transition: transform 0.3s ease;
}
.toggle-icon.expanded {
transform: rotate(180deg);
}
.instructions-content {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.instructions-content.show {
max-height: 500px;
padding: 1.5rem;
}
.instructions-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.how-to-use ol {
padding-left: 1.5rem;
}
.how-to-use li {
margin-bottom: 0.75rem;
font-size: var(--text-xs);
color: var(--text-secondary);
line-height: 1.6;
}
.how-to-use strong {
color: var(--text-primary);
font-weight: 600;
}
.how-to-use code {
background-color: rgba(50, 50, 50, 0.5);
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: var(--text-xs);
color: #ff8c51;
}
.content {
display: grid;
grid-template-columns: 1fr 500px;
gap: 2rem;
align-items: start;
}
.preview-section {
position: sticky;
top: 2rem;
}
.controls-section {
max-width: 500px;
}
.card {
background-color: var(--card-bg);
border-radius: var(--card-radius);
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 1.5rem;
border: 1px solid var(--border);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.preview-container {
height: 400px;
width: 100%;
position: relative;
overflow: hidden;
border-radius: var(--card-radius);
background-color: #252525;
border: 1px solid var(--border);
box-shadow: var(--shadow);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.preview-content {
color: white;
text-align: center;
font-weight: bold;
font-size: var(--text-s);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.card-heading {
padding: 1rem 1.5rem;
font-size: var(--text-s);
font-weight: 600;
border-bottom: 1px solid var(--border);
letter-spacing: 0.3px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-actions {
display: flex;
gap: 0.5rem;
}
.card-action-btn {
padding: 0.4rem 0.8rem;
background-color: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
font-size: var(--text-xs);
transition: var(--transition);
}
.card-action-btn:hover {
color: var(--text-primary);
border-color: var(--accent);
background-color: rgba(239, 96, 19, 0.1);
}
.card-content {
padding: 1.5rem;
}
.control-group {
margin-bottom: 1.5rem;
position: relative;
}
.control-group:last-child {
margin-bottom: 0;
}
.control-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.label-text {
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.help-tooltip {
cursor: help;
opacity: 0.7;
transition: var(--transition);
}
.help-tooltip:hover {
opacity: 1;
color: var(--accent);
}
.value-display {
display: flex;
align-items: center;
gap: 0.5rem;
}
.value-text {
font-size: var(--text-xs);
color: var(--text-secondary);
background-color: rgba(50, 50, 50, 0.5);
padding: 2px 8px;
border-radius: 4px;
min-width: 45px;
text-align: center;
}
.reset-btn {
padding: 0.2rem 0.4rem;
background-color: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
font-size: 10px;
transition: var(--transition);
}
.reset-btn:hover {
color: var(--danger);
border-color: var(--danger);
background-color: rgba(220, 53, 69, 0.1);
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background: var(--track);
border-radius: 3px;
outline: none;
margin: 0.8rem 0;
position: relative;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: var(--thumb);
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(239, 96, 19, 0.5);
}
select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: var(--input-radius);
font-family: var(--font);
font-size: var(--text-xs);
color: var(--text-primary);
background-color: var(--card-bg);
margin-bottom: 0.75rem;
outline: none;
transition: var(--transition);
}
select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(239, 96, 19, 0.2);
}
.notification {
position: fixed;
bottom: calc(var(--action-bar-height) + 1rem);
left: 50%;
background-color: var(--success);
color: white;
padding: 0.75rem 1rem;
border-radius: var(--input-radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 1001;
transform: translate(-50%, 200px);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
font-size: var(--text-xs);
font-weight: 500;
max-width: 320px;
word-wrap: break-word;
line-height: 1.4;
text-align: center;
}
.notification.show {
transform: translate(-50%, 0);
opacity: 1;
}
.card-expand-container {
display: flex;
width: 100%;
height: 100%;
gap: 10px;
overflow: hidden;
}
.card-expand-item {
flex: 1;
position: relative;
transition: all 0.5s ease-in-out;
background-color: #2a2a2a;
border-radius: 8px;
overflow: hidden;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.card-expand-item.expand {
flex: 3;
}
.card-expand-item.shrink {
flex: 0.5;
}
.card-expand-content {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: opacity 0.3s ease, transform 0.3s ease;
background-size: cover !important;
background-position: center !important;
}
.card-expand-item.shrink .card-expand-content {
opacity: 0.6;
transform: scale(0.85);
}
.card-expand-item.expand .card-expand-content {
opacity: 1;
transform: scale(1);
}
@media (max-width: 1200px) {
.content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.preview-section {
position: static;
}
.controls-section {
max-width: 100%;
}
}
@media (max-width: 768px) {
.action-bar {
flex-direction: column;
height: auto;
min-height: var(--action-bar-height);
padding: 0.75rem;
}
.breadcrumb {
order: 1;
width: 100%;
}
.action-buttons {
order: 2;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
body {
padding-bottom: calc(var(--action-bar-height) + 20px);
}
.notification {
bottom: calc(var(--action-bar-height) + 2rem);
max-width: 280px;
transform: translate(-50%, 250px);
}
.notification.show {
transform: translate(-50%, 0);
opacity: 1;
}
.preview-container {
height: 300px;
}
.data-attribute-display {
font-size: 10px;
padding: 0.4rem 0.6rem;
}
.action-btn {
font-size: 11px;
padding: 0.5rem 0.8rem;
}
.page-title {
font-size: 2rem;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
.action-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--background);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
.loading {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="action-bar">
<nav class="breadcrumb">
<a href="https://bricksfusion.com" class="breadcrumb-item">Home</a>
<span class="breadcrumb-separator">›</span>
<a href="https://bricksfusion.com/showcase/" class="breadcrumb-item">Showcase</a>
<span class="breadcrumb-separator">›</span>
<span class="breadcrumb-item active">Flexible Card Expand</span>
</nav>
<div class="action-buttons">
<div class="data-attribute-display" id="quick-attribute" title="Click to copy data attribute">
data-brx-card-expand
</div>
<button class="action-btn primary" id="download-config" title="Copy JavaScript code (Ctrl+D)" data-protection-animation="true">
<span>📋</span>
Copy JS
</button>
<button class="action-btn" id="copy-full-section" title="Copy complete section JSON for Bricks Builder (Ctrl+S)" data-protection-animation="true">
<span>📦</span>
Copy Full Section
</button>
</div>
</div>
<div class="container">
<div class="page-header">
<h1 class="page-title">Flexible Card Expand</h1>
<p class="page-subtitle">Interactive card expand animations for Bricks Builder</p>
</div>
<div class="instructions-toggle">
<div class="instructions-card" id="instructions-card">
<div class="instructions-header" id="instructions-toggle">
<div class="instructions-title">
How to Use & Code Information
</div>
<span class="toggle-icon">▼</span>
</div>
<div class="instructions-content" id="instructions-content">
<div class="instructions-grid">
<div class="how-to-use">
<ol>
<li>Customize your card expand using the controls below</li>
<li>Click <strong>Copy JS</strong> to copy the JavaScript code to clipboard</li>
<li>In Bricks Builder, add a <strong>Code</strong> element</li>
<li>Paste or upload the JavaScript code</li>
<li>To add the effect to any container: go to <strong>Section → Style → Attributes</strong>, add <code>data-brx-card-expand</code> as attribute name (leave value empty)</li>
<li>Add <code>data-brx-card-expand-item</code> to each card item inside the container</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<section class="preview-section">
<div class="preview-container" id="card-expand-preview">
<div class="card-expand-container" data-brx-card-expand>
<div class="card-expand-item" data-brx-card-expand-item>
<div class="card-expand-content" style="background: url('https://images.unsplash.com/photo-1552083375-1447ce886485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YWVyaWFsJTIwZm9yZXN0JTIwbGFrZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60') center/cover no-repeat;"></div>
</div>
<div class="card-expand-item" data-brx-card-expand-item>
<div class="card-expand-content" style="background: url('https://images.unsplash.com/photo-1473116763249-2faaef81ccda?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YmVhY2glMjBhZXJpYWx8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60') center/cover no-repeat;"></div>
</div>
<div class="card-expand-item" data-brx-card-expand-item>
<div class="card-expand-content" style="background: url('https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8Zm9yZXN0JTIwbWlzdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60') center/cover no-repeat;"></div>
</div>
</div>
</div>
</section>
<section class="controls-section">
<div class="card">
<div class="card-heading">
Card Expand Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-expand" title="Reset Card Expand Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Expansion Preset
<span class="help-tooltip" title="Controls how much cards expand relative to others">ℹ</span>
</span>
</div>
<select id="expansion-preset">
<option value="subtle">Subtle</option>
<option value="normal" selected>Normal</option>
<option value="medium">Medium</option>
<option value="high">High</option>
<option value="extreme">Extreme</option>
</select>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Animation Style
<span class="help-tooltip" title="Type of animation transition">ℹ</span>
</span>
</div>
<select id="animation-style">
<option value="smooth" selected>Smooth</option>
<option value="bounce">Bounce</option>
<option value="fade">Fade</option>
<option value="swift">Swift</option>
</select>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Active Item Scale
<span class="help-tooltip" title="Scale factor for the expanded card">ℹ</span>
</span>
<div class="value-display">
<span class="value-text" id="active-scale-value">1</span>
<button class="reset-btn" onclick="resetParameter('active-scale', 1)">↺</button>
</div>
</div>
<input type="range" id="active-scale" min="0.9" max="1.2" step="0.01" value="1">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Inactive Item Scale
<span class="help-tooltip" title="Scale factor for collapsed cards">ℹ</span>
</span>
<div class="value-display">
<span class="value-text" id="inactive-scale-value">0.85</span>
<button class="reset-btn" onclick="resetParameter('inactive-scale', 0.85)">↺</button>
</div>
</div>
<input type="range" id="inactive-scale" min="0.6" max="0.95" step="0.01" value="0.85">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Inactive Item Opacity
<span class="help-tooltip" title="Opacity level for collapsed cards">ℹ</span>
</span>
<div class="value-display">
<span class="value-text" id="inactive-opacity-value">0.6</span>
<button class="reset-btn" onclick="resetParameter('inactive-opacity', 0.6)">↺</button>
</div>
</div>
<input type="range" id="inactive-opacity" min="0.3" max="1" step="0.05" value="0.6">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Animation Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-animation" title="Reset Animation Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Transition Speed
<span class="help-tooltip" title="Duration of the expansion animation">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="transition-speed-value">0.5</span>s</span>
<button class="reset-btn" onclick="resetParameter('transition-speed', 0.5)">↺</button>
</div>
</div>
<input type="range" id="transition-speed" min="0.2" max="1.5" step="0.1" value="0.5">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Enable Mobile Optimization
<span class="help-tooltip" title="Optimize behavior for mobile devices">ℹ</span>
</span>
</div>
<select id="enable-mobile">
<option value="true" selected>Yes</option>
<option value="false">No</option>
</select>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Enable Touch Support
<span class="help-tooltip" title="Allow touch interactions on mobile">ℹ</span>
</span>
</div>
<select id="enable-touch">
<option value="true" selected>Yes</option>
<option value="false">No</option>
</select>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="notification" id="notification"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let cardExpandConfig = {
expansionPreset: 'normal',
animationStyle: 'smooth',
activeScale: 1,
inactiveScale: 0.85,
inactiveOpacity: 0.6,
transitionSpeed: 0.5,
enableMobile: true,
enableTouch: true
};
const defaultConfig = { ...cardExpandConfig };
function initCardExpand() {
const cardExpandItems = document.querySelectorAll('.card-expand-item');
const transitionStyle = `all ${cardExpandConfig.transitionSpeed}s ${getTransitionCurve(cardExpandConfig.animationStyle)}`;
cardExpandItems.forEach(item => {
item.style.transition = transitionStyle;
});
resetCardExpandState();
simulateHoverOnFirstItem();
}
function getTransitionCurve(style) {
const curves = {
'smooth': 'ease-in-out',
'bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
'fade': 'cubic-bezier(0.42, 0, 0.58, 1)',
'swift': 'cubic-bezier(0.4, 0, 0.2, 1)'
};
return curves[style] || 'ease-in-out';
}
function resetCardExpandState() {
const cardExpandItems = document.querySelectorAll('.card-expand-item');
cardExpandItems.forEach(item => {
item.classList.remove('expand', 'shrink');
const content = item.querySelector('.card-expand-content');
if (content) {
content.style.opacity = '1';
content.style.transform = 'scale(1)';
}
});
}
function simulateHoverOnFirstItem() {
const cardExpandItems = document.querySelectorAll('.card-expand-item');
const firstItem = cardExpandItems[0];
const expansionValues = {
'subtle': { expand: 2, shrink: 0.8 },
'normal': { expand: 3, shrink: 0.5 },
'medium': { expand: 4, shrink: 0.3 },
'high': { expand: 5, shrink: 0.2 },
'extreme': { expand: 6, shrink: 0.1 }
};
const settings = expansionValues[cardExpandConfig.expansionPreset];
firstItem.style.flex = settings.expand;
firstItem.classList.add('expand');
firstItem.classList.remove('shrink');
const firstContent = firstItem.querySelector('.card-expand-content');
if (firstContent) {
firstContent.style.opacity = '1';
firstContent.style.transform = `scale(${cardExpandConfig.activeScale})`;
}
cardExpandItems.forEach((item, index) => {
if (index !== 0) {
item.style.flex = settings.shrink;
item.classList.add('shrink');
item.classList.remove('expand');
const content = item.querySelector('.card-expand-content');
if (content) {
content.style.opacity = cardExpandConfig.inactiveOpacity;
content.style.transform = `scale(${cardExpandConfig.inactiveScale})`;
}
}
});
}
function updatePreview() {
cardExpandConfig.expansionPreset = document.getElementById('expansion-preset').value;
cardExpandConfig.animationStyle = document.getElementById('animation-style').value;
cardExpandConfig.activeScale = parseFloat(document.getElementById('active-scale').value);
cardExpandConfig.inactiveScale = parseFloat(document.getElementById('inactive-scale').value);
cardExpandConfig.inactiveOpacity = parseFloat(document.getElementById('inactive-opacity').value);
cardExpandConfig.transitionSpeed = parseFloat(document.getElementById('transition-speed').value);
cardExpandConfig.enableMobile = document.getElementById('enable-mobile').value === 'true';
cardExpandConfig.enableTouch = document.getElementById('enable-touch').value === 'true';
initCardExpand();
}
function showNotification(message, type = 'success') {
const notification = document.getElementById('notification');
notification.textContent = message;
notification.className = `notification ${type}`;
notification.offsetHeight;
notification.style.visibility = 'visible';
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => {
if (!notification.classList.contains('show')) {
notification.style.visibility = 'hidden';
}
}, 400);
}, 3000);
}
function generateFullSectionJSON() {
// Generar IDs únicos
const generateId = () => Math.random().toString(36).substring(2, 8);
const sectionId = generateId();
const containerId = generateId();
const div1Id = generateId();
const div2Id = generateId();
const div3Id = generateId();
const text1Id = generateId();
const text2Id = generateId();
const text3Id = generateId();
const codeId = generateId();
// Obtener el JavaScript code
const jsCode = generateJavaScriptCode();
// Crear el JSON completo
const fullSectionJSON = {
"content": [
{
"id": sectionId,
"name": "section",
"parent": 0,
"children": [containerId, codeId],
"settings": {
"_justifyContent": "center",
"_background": {
"color": {
"hex": "#000000"
}
},
"_height": "500"
}
},
{
"id": containerId,
"name": "container",
"parent": sectionId,
"children": [div1Id, div2Id, div3Id],
"settings": {
"_attributes": [
{
"id": generateId(),
"name": "data-brx-card-expand"
},
{
"id": generateId(),
"name": "data-brx-preset",
"value": cardExpandConfig.expansionPreset
},
{
"id": generateId(),
"name": "data-brx-animation",
"value": cardExpandConfig.animationStyle
}
],
"_direction": "row",
"_justifyContent": "center",
"_columnGap": "10"
},
"label": "Card Expand Container"
},
{
"id": div1Id,
"name": "div",
"parent": containerId,
"children": [text1Id],
"settings": {
"_width": "300",
"_height": "200",
"_attributes": [
{
"id": generateId(),
"name": "data-brx-card-expand-item"
}
],
"_border": {
"radius": {
"top": "15",
"right": "15",
"bottom": "15",
"left": "15"
}
},
"_padding": {
"top": "20",
"right": "20",
"bottom": "20",
"left": "20"
},
"_display": "flex",
"_justifyContent": "center",
"_alignItems": "center",
"_background": {
"image": {
"id": 15690,
"filename": "workplace-office-with-laptop-coffee-dark-room-night-scaled.jpg",
"size": "full",
"full": "https://test.bricksfusion.com/wp-content/uploads/2025/08/workplace-office-with-laptop-coffee-dark-room-night-scaled.jpg",
"url": "https://test.bricksfusion.com/wp-content/uploads/2025/08/workplace-office-with-laptop-coffee-dark-room-night-scaled.jpg"
},
"repeat": "no-repeat",
"size": "cover"
}
}
},
{
"id": text1Id,
"name": "text-basic",
"parent": div1Id,
"children": [],
"settings": {
"text": "Seamless Productivity",
"tag": "span",
"_typography": {
"color": {
"hex": "#ffffff"
},
"font-weight": "600"
}
}
},
{
"id": div2Id,
"name": "div",
"parent": containerId,
"children": [text2Id],
"settings": {
"_width": "300",
"_height": "200",
"_attributes": [
{
"id": generateId(),
"name": "data-brx-card-expand-item"
}
],
"_border": {
"radius": {
"top": "15",
"right": "15",
"bottom": "15",
"left": "15"
}
},
"_padding": {
"top": "20",
"right": "20",
"bottom": "20",
"left": "20"
},
"_display": "flex",
"_justifyContent": "center",
"_alignItems": "center",
"_background": {
"image": {
"id": 15691,
"filename": "portrait-person-entrapped-by-cybersickness-using-smart-device-too-long-scaled.jpg",
"size": "full",
"full": "https://test.bricksfusion.com/wp-content/uploads/2025/08/portrait-person-entrapped-by-cybersickness-using-smart-device-too-long-scaled.jpg",
"url": "https://test.bricksfusion.com/wp-content/uploads/2025/08/portrait-person-entrapped-by-cybersickness-using-smart-device-too-long-scaled.jpg"
},
"repeat": "no-repeat",
"size": "cover"
}
}
},
{
"id": text2Id,
"name": "text-basic",
"parent": div2Id,
"children": [],
"settings": {
"text": "Stay Connected",
"tag": "span",
"_typography": {
"color": {
"hex": "#ffffff"
},
"font-weight": "600"
}
}
},
{
"id": div3Id,
"name": "div",
"parent": containerId,
"children": [text3Id],
"settings": {
"_width": "300",
"_height": "200",
"_attributes": [
{
"id": generateId(),
"name": "data-brx-card-expand-item"
}
],
"_border": {
"radius": {
"top": "15",
"right": "15",
"bottom": "15",
"left": "15"
}
},
"_padding": {
"top": "20",
"right": "20",
"bottom": "20",
"left": "20"
},
"_display": "flex",
"_justifyContent": "center",
"_alignItems": "center",
"_background": {
"image": {
"id": 15684,
"filename": "rm373batch2-17-scaled.jpg",
"size": "full",
"full": "https://test.bricksfusion.com/wp-content/uploads/2025/08/rm373batch2-17-scaled.jpg",
"url": "https://test.bricksfusion.com/wp-content/uploads/2025/08/rm373batch2-17-scaled.jpg"
},
"repeat": "no-repeat",
"size": "cover"
}
}
},
{
"id": text3Id,
"name": "text-basic",
"parent": div3Id,
"children": [],
"settings": {
"text": "Future-Ready Tech",
"tag": "span",
"_typography": {
"color": {
"hex": "#ffffff"
},
"font-weight": "600"
}
}
},
{
"id": codeId,
"name": "code",
"parent": sectionId,
"children": [],
"settings": {
"javascriptCode": jsCode,
"executeCode": true,
"_display": "none"
},
"label": "Card Expand JS"
}
],
"source": "bricksCopiedElements",
"sourceUrl": "https://test.bricksfusion.com",
"version": "2.0.1",
"globalClasses": [],
"globalElements": []
};
return JSON.stringify(fullSectionJSON, null, 2);
}
function generateJavaScriptCode() {
return `(function() {
const EXPANSION_PRESETS = {
'subtle': { expand: 2, shrink: 0.8 },
'normal': { expand: 3, shrink: 0.5 },
'medium': { expand: 4, shrink: 0.3 },
'high': { expand: 5, shrink: 0.2 },
'extreme': { expand: 6, shrink: 0.1 }
};
const ANIMATION_PRESETS = {
'smooth': 'all ${cardExpandConfig.transitionSpeed}s ease-in-out',
'bounce': 'all ${cardExpandConfig.transitionSpeed}s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
'fade': 'all ${cardExpandConfig.transitionSpeed}s cubic-bezier(0.42, 0, 0.58, 1)',
'swift': 'all ${cardExpandConfig.transitionSpeed}s cubic-bezier(0.4, 0, 0.2, 1)'
};
const TRANSFORM_SETTINGS = {
bounce: {
expand: { transform: 'scale(${cardExpandConfig.activeScale}) translateZ(0)', opacity: 1 },
shrink: { transform: 'scale(${cardExpandConfig.inactiveScale}) translateZ(-20px)', opacity: ${cardExpandConfig.inactiveOpacity} }
},
fade: {
expand: { transform: 'scale(${cardExpandConfig.activeScale}) translateY(0)', opacity: 1 },
shrink: { transform: 'scale(${cardExpandConfig.inactiveScale}) translateY(5px)', opacity: ${cardExpandConfig.inactiveOpacity} }
},
swift: {
expand: { transform: 'scale(${cardExpandConfig.activeScale}) translateX(0)', opacity: 1 },
shrink: { transform: 'scale(${cardExpandConfig.inactiveScale}) translateX(-5px)', opacity: ${cardExpandConfig.inactiveOpacity} }
},
smooth: {
expand: { transform: 'scale(${cardExpandConfig.activeScale})', opacity: 1 },
shrink: { transform: 'scale(${cardExpandConfig.inactiveScale})', opacity: ${cardExpandConfig.inactiveOpacity} }
}
};
const createStyles = () => {
const styleSheet = document.createElement('style');
styleSheet.textContent = \`
.brx-card-expand-content-wrapper {
transform-origin: center center;
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.brx-card-expand-item {
overflow: hidden;
flex: 1;
touch-action: pan-y pinch-zoom;
position: relative;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.brx-expand {
flex: var(--expand-flex);
}
.brx-shrink {
flex: var(--shrink-flex);
}
.brx-card-expand-inner-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.brx-card-expand-text-content {
transition: opacity 0.2s ease-out;
opacity: 1;
position: relative;
z-index: 2;
padding: 1rem;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.brx-card-expand-text-content.fade-out {
opacity: 0;
pointer-events: none;
}
.brx-card-expand-image-content {
transition: transform ${cardExpandConfig.transitionSpeed}s ease-in-out;
transform-origin: center center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: center;
z-index: 1;
}
.brx-card-expand-image-content img {
max-width: 100%;
height: auto;
object-fit: cover;
}
.brx-shrink .brx-card-expand-image-content {
transform: scale(${cardExpandConfig.inactiveScale});
}
.brx-expand .brx-card-expand-image-content {
transform: scale(${cardExpandConfig.activeScale});
}
\`;
document.head.appendChild(styleSheet);
};
const initializeCardExpand = (wrapper) => {
const items = wrapper.querySelectorAll('[data-brx-card-expand-item]');
const expansionPreset = wrapper.getAttribute('data-brx-preset') || '${cardExpandConfig.expansionPreset}';
const animationStyle = wrapper.getAttribute('data-brx-animation') || '${cardExpandConfig.animationStyle}';
const config = EXPANSION_PRESETS[expansionPreset] || EXPANSION_PRESETS.normal;
const transitionStyle = ANIMATION_PRESETS[animationStyle] || ANIMATION_PRESETS.smooth;
wrapper.style.setProperty('--expand-flex', config.expand);
wrapper.style.setProperty('--shrink-flex', config.shrink);
items.forEach(item => {
let touchStartX = 0;
let touchStartY = 0;
let touchStartTime = 0;
const TAP_THRESHOLD = 10;
const TAP_TIMEOUT = 200;
item.classList.add('brx-card-expand-item');
item.style.transition = transitionStyle;
let contentWrapper = item.querySelector('.brx-card-expand-content-wrapper');
if (!contentWrapper) {
contentWrapper = document.createElement('div');
contentWrapper.className = 'brx-card-expand-content-wrapper';
contentWrapper.style.transition = transitionStyle;
const contentDiv = document.createElement('div');
contentDiv.className = 'brx-card-expand-inner-content';
const textContent = document.createElement('div');
textContent.className = 'brx-card-expand-text-content';
const imageContent = document.createElement('div');
imageContent.className = 'brx-card-expand-image-content';
while (item.firstChild) {
if (!item.firstChild.classList?.contains('brx-card-expand-content-wrapper')) {
if (item.firstChild.nodeName === 'IMG') {
imageContent.appendChild(item.firstChild);
} else {
textContent.appendChild(item.firstChild);
}
} else {
break;
}
}
contentDiv.appendChild(textContent);
contentDiv.appendChild(imageContent);
contentWrapper.appendChild(contentDiv);
item.insertBefore(contentWrapper, item.firstChild);
}
const handleContentVisibility = (isExpanding, item) => {
const textContent = item.querySelector('.brx-card-expand-text-content');
if (textContent) {
if (isExpanding) {
textContent.classList.remove('fade-out');
setTimeout(() => {
textContent.style.opacity = '1';
}, 100);
} else {
textContent.classList.add('fade-out');
textContent.style.opacity = '0';
}
}
};
const handleEnter = () => {
const isMobile = window.innerWidth <= 768;
const itemsToAnimate = ${cardExpandConfig.enableMobile} && isMobile ?
Array.from(items).filter((otherItem, index) => {
const currentIndex = Array.from(items).indexOf(item);
const currentRow = Math.floor(currentIndex / 2);
const otherRow = Math.floor(index / 2);
return currentRow === otherRow;
}) :
items;
itemsToAnimate.forEach(otherItem => {
if (otherItem === item) {
otherItem.style.flex = config.expand;
otherItem.classList.add('brx-expand');
otherItem.classList.remove('brx-shrink');
handleContentVisibility(true, otherItem);
const imageContent = otherItem.querySelector('.brx-card-expand-image-content');
if (imageContent) {
imageContent.style.transform = 'scale(${cardExpandConfig.activeScale})';
imageContent.style.opacity = '1';
}
} else {
otherItem.style.flex = config.shrink;
otherItem.classList.remove('brx-expand');
otherItem.classList.add('brx-shrink');
handleContentVisibility(false, otherItem);
const imageContent = otherItem.querySelector('.brx-card-expand-image-content');
if (imageContent) {
imageContent.style.transform = 'scale(${cardExpandConfig.inactiveScale})';
imageContent.style.opacity = '${cardExpandConfig.inactiveOpacity}';
}
}
});
};
item.addEventListener('mouseenter', handleEnter);
if (${cardExpandConfig.enableTouch}) {
item.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
touchStartTime = Date.now();
}, { passive: true });
item.addEventListener('touchend', (e) => {
const touchEndX = e.changedTouches[0].clientX;
const touchEndY = e.changedTouches[0].clientY;
const touchEndTime = Date.now();
const touchDuration = touchEndTime - touchStartTime;
const moveX = Math.abs(touchEndX - touchStartX);
const moveY = Math.abs(touchEndY - touchStartY);
if (moveX < TAP_THRESHOLD && moveY < TAP_THRESHOLD && touchDuration < TAP_TIMEOUT) {
handleEnter();
}
}, { passive: true });
}
});
wrapper.addEventListener('mouseleave', () => {
items.forEach(item => {
item.style.flex = '1';
item.classList.remove('brx-expand', 'brx-shrink');
const textContent = item.querySelector('.brx-card-expand-text-content');
if (textContent) {
textContent.classList.remove('fade-out');
setTimeout(() => {
textContent.style.opacity = '1';
}, 100);
}
const imageContent = item.querySelector('.brx-card-expand-image-content');
if (imageContent) {
imageContent.style.transform = 'scale(1)';
imageContent.style.opacity = '1';
}
});
});
};
createStyles();
document.querySelectorAll('[data-brx-card-expand]').forEach(initializeCardExpand);
const observer = new MutationObserver(mutations => {
let shouldInit = false;
mutations.forEach(mutation => {
const targetIsCardExpand = mutation.target.matches?.('[data-brx-card-expand]');
const hasNewCardExpand = Array.from(mutation.addedNodes).some(node =>
node.nodeType === 1 && (
node.matches?.('[data-brx-card-expand]') ||
node.querySelector?.('[data-brx-card-expand]')
)
);
if (targetIsCardExpand || hasNewCardExpand) {
shouldInit = true;
}
});
if (shouldInit) {
document.querySelectorAll('[data-brx-card-expand]').forEach(initializeCardExpand);
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['data-brx-card-expand']
});
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('[data-brx-card-expand]').forEach(initializeCardExpand);
});
})();`;
}
function copyJsToClipboard() {
const jsCode = generateJavaScriptCode();
navigator.clipboard.writeText(jsCode)
.then(() => {
showNotification('JavaScript code copied to clipboard!');
})
.catch(err => {
try {
const textArea = document.createElement('textarea');
textArea.value = jsCode;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('JavaScript code copied to clipboard!');
} catch (fallbackErr) {
showNotification('Failed to copy to clipboard. Please try again.', 'error');
}
});
}
function copyFullSectionToClipboard() {
const sectionJSON = generateFullSectionJSON();
navigator.clipboard.writeText(sectionJSON)
.then(() => {
showNotification('Full section JSON copied to clipboard!');
})
.catch(err => {
try {
const textArea = document.createElement('textarea');
textArea.value = sectionJSON;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('Full section JSON copied to clipboard!');
} catch (fallbackErr) {
showNotification('Failed to copy to clipboard. Please try again.', 'error');
}
});
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text)
.then(() => {
showNotification('Copied to clipboard!');
})
.catch(err => {
showNotification('Failed to copy to clipboard', 'error');
});
}
window.resetParameter = function(parameterId, defaultValue) {
const element = document.getElementById(parameterId);
if (element) {
element.value = defaultValue;
const valueElement = document.getElementById(`${parameterId}-value`);
if (valueElement) {
valueElement.textContent = defaultValue;
}
switch (parameterId) {
case 'active-scale':
cardExpandConfig.activeScale = defaultValue;
break;
case 'inactive-scale':
cardExpandConfig.inactiveScale = defaultValue;
break;
case 'inactive-opacity':
cardExpandConfig.inactiveOpacity = defaultValue;
break;
case 'transition-speed':
cardExpandConfig.transitionSpeed = defaultValue;
break;
}
updatePreview();
showNotification(`${parameterId.replace(/-/g, ' ')} reset to default`);
}
};
function initializeUI() {
const instructionsToggle = document.getElementById('instructions-toggle');
const instructionsContent = document.getElementById('instructions-content');
const instructionsCard = document.getElementById('instructions-card');
const toggleIcon = instructionsToggle.querySelector('.toggle-icon');
instructionsToggle.addEventListener('click', () => {
const isVisible = instructionsContent.classList.contains('show');
if (isVisible) {
instructionsContent.classList.remove('show');
instructionsCard.classList.remove('expanded');
toggleIcon.classList.remove('expanded');
} else {
instructionsContent.classList.add('show');
instructionsCard.classList.add('expanded');
toggleIcon.classList.add('expanded');
}
});
document.getElementById('quick-attribute').addEventListener('click', () => {
copyToClipboard('data-brx-card-expand');
});
document.getElementById('download-config').addEventListener('click', () => {
copyJsToClipboard();
});
document.getElementById('copy-full-section').addEventListener('click', () => {
copyFullSectionToClipboard();
});
document.getElementById('reset-expand').addEventListener('click', () => {
cardExpandConfig.expansionPreset = defaultConfig.expansionPreset;
cardExpandConfig.animationStyle = defaultConfig.animationStyle;
cardExpandConfig.activeScale = defaultConfig.activeScale;
cardExpandConfig.inactiveScale = defaultConfig.inactiveScale;
cardExpandConfig.inactiveOpacity = defaultConfig.inactiveOpacity;
document.getElementById('expansion-preset').value = defaultConfig.expansionPreset;
document.getElementById('animation-style').value = defaultConfig.animationStyle;
document.getElementById('active-scale').value = defaultConfig.activeScale;
document.getElementById('inactive-scale').value = defaultConfig.inactiveScale;
document.getElementById('inactive-opacity').value = defaultConfig.inactiveOpacity;
document.getElementById('active-scale-value').textContent = defaultConfig.activeScale;
document.getElementById('inactive-scale-value').textContent = defaultConfig.inactiveScale;
document.getElementById('inactive-opacity-value').textContent = defaultConfig.inactiveOpacity;
updatePreview();
showNotification('Card expand settings reset');
});
document.getElementById('reset-animation').addEventListener('click', () => {
cardExpandConfig.transitionSpeed = defaultConfig.transitionSpeed;
cardExpandConfig.enableMobile = defaultConfig.enableMobile;
cardExpandConfig.enableTouch = defaultConfig.enableTouch;
document.getElementById('transition-speed').value = defaultConfig.transitionSpeed;
document.getElementById('enable-mobile').value = defaultConfig.enableMobile.toString();
document.getElementById('enable-touch').value = defaultConfig.enableTouch.toString();
document.getElementById('transition-speed-value').textContent = defaultConfig.transitionSpeed;
updatePreview();
showNotification('Animation settings reset');
});
const selectInputs = document.querySelectorAll('select');
selectInputs.forEach(select => {
select.addEventListener('change', updatePreview);
});
const rangeInputs = document.querySelectorAll('input[type="range"]');
rangeInputs.forEach(input => {
let valueElement = document.getElementById(`${input.id}-value`);
if (valueElement) {
valueElement.textContent = input.value;
}
input.addEventListener('input', () => {
if (valueElement) {
valueElement.textContent = input.value;
}
switch (input.id) {
case 'active-scale':
cardExpandConfig.activeScale = parseFloat(input.value);
break;
case 'inactive-scale':
cardExpandConfig.inactiveScale = parseFloat(input.value);
break;
case 'inactive-opacity':
cardExpandConfig.inactiveOpacity = parseFloat(input.value);
break;
case 'transition-speed':
cardExpandConfig.transitionSpeed = parseFloat(input.value);
break;
}
updatePreview();
});
});
document.addEventListener('keydown', (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {
return;
}
if (e.ctrlKey || e.metaKey) {
switch (e.key.toLowerCase()) {
case 'd':
e.preventDefault();
const downloadBtn = document.getElementById('download-config');
if (downloadBtn && downloadBtn.hasAttribute('data-protection-animation')) {
downloadBtn.click();
} else {
copyJsToClipboard();
}
break;
case 's':
e.preventDefault();
const fullSectionBtn = document.getElementById('copy-full-section');
if (fullSectionBtn && fullSectionBtn.hasAttribute('data-protection-animation')) {
fullSectionBtn.click();
} else {
copyFullSectionToClipboard();
}
break;
}
}
});
const cardExpandItems = document.querySelectorAll('.card-expand-item');
cardExpandItems.forEach(item => {
item.addEventListener('mouseenter', function() {
const expansionValues = {
'subtle': { expand: 2, shrink: 0.8 },
'normal': { expand: 3, shrink: 0.5 },
'medium': { expand: 4, shrink: 0.3 },
'high': { expand: 5, shrink: 0.2 },
'extreme': { expand: 6, shrink: 0.1 }
};
const settings = expansionValues[cardExpandConfig.expansionPreset];
cardExpandItems.forEach(otherItem => {
if (otherItem === item) {
otherItem.style.flex = settings.expand;
otherItem.classList.add('expand');
otherItem.classList.remove('shrink');
const content = otherItem.querySelector('.card-expand-content');
if (content) {
content.style.opacity = '1';
content.style.transform = `scale(${cardExpandConfig.activeScale})`;
}
} else {
otherItem.style.flex = settings.shrink;
otherItem.classList.remove('expand');
otherItem.classList.add('shrink');
const content = otherItem.querySelector('.card-expand-content');
if (content) {
content.style.opacity = cardExpandConfig.inactiveOpacity;
content.style.transform = `scale(${cardExpandConfig.inactiveScale})`;
}
}
});
});
});
const cardExpandContainer = document.querySelector('.card-expand-container');
cardExpandContainer.addEventListener('mouseleave', function() {
cardExpandItems.forEach(item => {
item.style.flex = '1';
item.classList.remove('expand', 'shrink');
const content = item.querySelector('.card-expand-content');
if (content) {
content.style.opacity = '1';
content.style.transform = 'scale(1)';
}
});
});
function saveConfiguration() {
try {
localStorage.setItem('bricksfusion-card-expand-config', JSON.stringify(cardExpandConfig));
} catch (e) {
}
}
function loadConfiguration() {
try {
const saved = localStorage.getItem('bricksfusion-card-expand-config');
if (saved) {
const savedConfig = JSON.parse(saved);
Object.assign(cardExpandConfig, savedConfig);
document.getElementById('expansion-preset').value = savedConfig.expansionPreset;
document.getElementById('animation-style').value = savedConfig.animationStyle;
document.getElementById('active-scale').value = savedConfig.activeScale;
document.getElementById('inactive-scale').value = savedConfig.inactiveScale;
document.getElementById('inactive-opacity').value = savedConfig.inactiveOpacity;
document.getElementById('transition-speed').value = savedConfig.transitionSpeed;
document.getElementById('enable-mobile').value = savedConfig.enableMobile.toString();
document.getElementById('enable-touch').value = savedConfig.enableTouch.toString();
document.getElementById('active-scale-value').textContent = savedConfig.activeScale;
document.getElementById('inactive-scale-value').textContent = savedConfig.inactiveScale;
document.getElementById('inactive-opacity-value').textContent = savedConfig.inactiveOpacity;
document.getElementById('transition-speed-value').textContent = savedConfig.transitionSpeed;
updatePreview();
}
} catch (e) {
}
}
const originalUpdatePreview = updatePreview;
updatePreview = function() {
originalUpdatePreview();
saveConfiguration();
};
loadConfiguration();
setTimeout(() => {
showNotification('BricksFusion Card Expand Configurator loaded!');
}, 500);
}
initializeUI();
updatePreview();
});
</script>
</body>
</html>LIGHTWEIGHT
Card Expand
Creates an interactive card grid where hovering over a card expands it while shrinking others. Perfect for portfolios, feature showcases, and interactive galleries.
Expansion
Expansion Preset
subtle / normal / medium / high / extreme
How dramatically cards expand and shrink. Subtle is gentle, extreme creates a big size difference between active and inactive cards.
Default: Normal
Animation
Animation Style
smooth / bounce / fade / swift
The motion curve of the expansion. Smooth is natural, bounce adds a playful spring, fade is soft, swift is quick and snappy.
Default: Smooth
Transition Speed
0.1-2.0 seconds
How fast cards expand and shrink. Lower is quick and responsive, higher is slow and smooth.
Default: 0.5 seconds
Appearance
Active Scale
0.5-1.5
Scale of images inside the active expanded card. 1.0 keeps original size, higher values zoom in slightly.
Default: 1.0
Inactive Scale
0.5-1.0
Scale of images inside inactive shrunk cards. Lower values shrink images more for a stronger contrast effect.
Default: 0.85
Inactive Opacity
0.0-1.0
Transparency of inactive cards. Lower values make them fade out more, drawing attention to the active card.
Default: 0.6
Mobile
Enable Mobile
on/off
Whether the effect works on mobile devices. When on, only cards in the same row expand together on mobile layouts.
Default: On
Enable Touch
on/off
Allow tap to expand on touch devices. When off, the effect only works with hover on desktop.
Default: On
Performance
This element uses pure CSS transitions for smooth performance. No heavy animations or JavaScript calculations during the effect. Works great with many cards on the same page.