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>Tilted Card 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: 500px;
width: 100%;
position: relative;
overflow: visible;
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: 4rem;
}
.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: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.preview-controls {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
gap: 0.5rem;
z-index: 10;
}
.preview-btn {
padding: 0.5rem;
background-color: rgba(0, 0, 0, 0.7);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
cursor: pointer;
transition: var(--transition);
font-size: var(--text-xs);
backdrop-filter: blur(5px);
}
.preview-btn:hover {
background-color: var(--accent);
border-color: var(--accent);
}
.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);
}
input[type="text"],
input[type="number"],
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);
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(239, 96, 19, 0.2);
}
.switch-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.2rem;
padding: 0.5rem 0;
}
.switch-label {
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.switch {
position: relative;
display: inline-block;
width: 52px;
height: 28px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--track);
transition: var(--transition);
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: #f2f2f7;
transition: var(--transition);
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
input:checked + .slider {
background-color: var(--accent);
}
input:checked + .slider:before {
transform: translateX(24px);
}
.tilted-card-container {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.tilted-card-inner {
width: 100%;
height: 100%;
border-radius: var(--card-radius);
background-color: #2a2a2a;
overflow: hidden;
position: relative;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
transform-style: preserve-3d;
}
.tilted-card-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--card-radius);
}
.tilted-card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1.5rem;
text-align: center;
color: white;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.tilted-card-mobile-alert {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
z-index: 10;
pointer-events: none;
opacity: 0;
}
@media (max-width: 768px) {
.tilted-card-mobile-alert {
opacity: 1;
}
}
.tilted-card-caption {
position: absolute;
background-color: #FFFFFF;
color: #2D2D2D;
padding: 4px 8px;
border-radius: 4px;
font-size: 13px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 20;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.notification {
position: fixed;
bottom: calc(var(--action-bar-height) + 1rem);
left: 50%;
background-color: var(--card-bg);
color: var(--text-primary);
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;
border: 1px solid var(--border);
}
.notification.show {
transform: translate(-50%, 0);
opacity: 1;
}
.notification.success {
background-color: var(--success);
color: white;
border-color: var(--success);
}
.notification.error {
background-color: var(--danger);
color: white;
border-color: var(--danger);
}
@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: 400px;
padding: 2rem;
}
.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,
.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">Tilted Card</span>
</nav>
<div class="action-buttons">
<div class="data-attribute-display" id="quick-attribute" title="Click to copy data attribute">
data-tilted-card
</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">Tilted Card</h1>
<p class="page-subtitle">Interactive 3D card effects 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 tilted card 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 the JavaScript code</li>
<li>To add the effect to any element: go to <strong>Section → Style → Attributes</strong>, add <code>data-tilted-card</code> as attribute name (leave value empty)</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<section class="preview-section">
<div class="preview-container" id="tilted-card-preview">
<div class="preview-content">Interactive Tilted Card Preview</div>
<div class="tilted-card-container" data-tilted-card="true">
<div class="tilted-card-inner">
<img src="https://images.unsplash.com/photo-1682686581854-5e71f58e7e3f?q=80&w=1470&auto=format&fit=crop" alt="Preview image" class="tilted-card-img">
<div class="tilted-card-overlay">Hover me!</div>
</div>
</div>
<div class="preview-controls">
<button class="preview-btn" id="randomize-tilted-card" title="Randomize (🎲)">🎲</button>
</div>
</div>
</section>
<section class="controls-section">
<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">
Tilt Amplitude
<span class="help-tooltip" title="Controls the maximum tilt angle in degrees">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="tilt-amplitude-value">12</span>°</span>
<button class="reset-btn" onclick="resetParameter('tilt-amplitude', 12)">↺</button>
</div>
</div>
<input type="range" id="tilt-amplitude" min="5" max="30" step="1" value="12">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Scale on Hover
<span class="help-tooltip" title="Scale multiplier when hovering">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="scale-hover-value">1.2</span>x</span>
<button class="reset-btn" onclick="resetParameter('scale-hover', 1.2)">↺</button>
</div>
</div>
<input type="range" id="scale-hover" min="1" max="1.5" step="0.05" value="1.2">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Card Width
<span class="help-tooltip" title="Width of the card in pixels">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="card-width-value">300</span>px</span>
<button class="reset-btn" onclick="resetParameter('card-width', 300)">↺</button>
</div>
</div>
<input type="range" id="card-width" min="150" max="500" step="10" value="300">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Card Height
<span class="help-tooltip" title="Height of the card in pixels">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="card-height-value">300</span>px</span>
<button class="reset-btn" onclick="resetParameter('card-height', 300)">↺</button>
</div>
</div>
<input type="range" id="card-height" min="150" max="500" step="10" value="300">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Content Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-content" title="Reset Content Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">Image Source</span>
</div>
<input type="text" id="image-src" placeholder="https://example.com/image.jpg" value="https://images.unsplash.com/photo-1682686581854-5e71f58e7e3f?q=80&w=1470&auto=format&fit=crop">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Alt Text</span>
</div>
<input type="text" id="alt-text" placeholder="Descriptive alt text" value="Tilted card image">
</div>
<div class="switch-container">
<span class="switch-label">
Show Overlay Content
<span class="help-tooltip" title="Display overlay text on the card">ℹ</span>
</span>
<label class="switch">
<input type="checkbox" id="show-overlay" checked>
<span class="slider"></span>
</label>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Overlay Content</span>
</div>
<input type="text" id="overlay-content" placeholder="Your overlay content" value="Hover me!">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Advanced Options
<div class="card-actions">
<button class="card-action-btn" id="reset-advanced" title="Reset Advanced Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="switch-container">
<span class="switch-label">
Show Mobile Warning
<span class="help-tooltip" title="Display touch instruction on mobile devices">ℹ</span>
</span>
<label class="switch">
<input type="checkbox" id="show-mobile-warning">
<span class="slider"></span>
</label>
</div>
<div class="switch-container">
<span class="switch-label">
Show Tooltip
<span class="help-tooltip" title="Enable tooltip on hover">ℹ</span>
</span>
<label class="switch">
<input type="checkbox" id="show-tooltip">
<span class="slider"></span>
</label>
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Tooltip Text</span>
</div>
<input type="text" id="tooltip-text" placeholder="Your tooltip text here" value="Interactive 3D Card">
</div>
</div>
</div>
</section>
</div>
</div>
<div class="notification" id="notification"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let tiltedCardConfig = {
tiltAmplitude: 12,
scaleHover: 1.2,
cardWidth: 300,
cardHeight: 300,
imageSrc: 'https://images.unsplash.com/photo-1682686581854-5e71f58e7e3f?q=80&w=1470&auto=format&fit=crop',
altText: 'Tilted card image',
showOverlay: true,
overlayContent: 'Hover me!',
showMobileWarning: false,
showTooltip: false,
tooltipText: 'Interactive 3D Card'
};
const defaultConfig = { ...tiltedCardConfig };
let activeCard = null;
let currentTooltip = null;
function initTiltedCard() {
const cards = document.querySelectorAll('[data-tilted-card]:not([data-tilted-initialized="true"])');
cards.forEach((card) => {
setupTiltedCard(card);
card.dataset.tiltedInitialized = 'true';
if (card.closest('#tilted-card-preview')) {
activeCard = card;
}
});
}
function setupTiltedCard(element) {
const amplitude = parseFloat(element.getAttribute('data-tilt-amplitude')) || tiltedCardConfig.tiltAmplitude;
const scaleAmount = parseFloat(element.getAttribute('data-scale-hover')) || tiltedCardConfig.scaleHover;
const showMobileWarning = element.getAttribute('data-show-mobile-warning') === 'true' || tiltedCardConfig.showMobileWarning;
const showTooltip = element.getAttribute('data-show-tooltip') === 'true' || tiltedCardConfig.showTooltip;
const tooltipText = element.getAttribute('data-tooltip-text') || tiltedCardConfig.tooltipText;
const cardWidth = parseInt(element.getAttribute('data-width')) || tiltedCardConfig.cardWidth;
const cardHeight = parseInt(element.getAttribute('data-height')) || tiltedCardConfig.cardHeight;
const imageSrc = element.getAttribute('data-image-src') || tiltedCardConfig.imageSrc;
const altText = element.getAttribute('data-alt-text') || tiltedCardConfig.altText;
const showOverlay = element.getAttribute('data-show-overlay') !== 'false' && tiltedCardConfig.showOverlay;
const overlayContent = element.getAttribute('data-overlay-content') || tiltedCardConfig.overlayContent;
if (!element.querySelector('.tilted-card-inner')) {
element.innerHTML = `
<div class="tilted-card-inner">
<img src="${imageSrc}" alt="${altText}" class="tilted-card-img">
${showOverlay ? `<div class="tilted-card-overlay">${overlayContent}</div>` : ''}
</div>
`;
if (showMobileWarning) {
const mobileAlert = document.createElement('div');
mobileAlert.className = 'tilted-card-mobile-alert';
mobileAlert.textContent = 'Touch and hold to interact';
element.appendChild(mobileAlert);
}
}
element.style.width = `${cardWidth}px`;
element.style.height = `${cardHeight}px`;
const inner = element.querySelector('.tilted-card-inner');
const img = element.querySelector('.tilted-card-img');
const overlay = element.querySelector('.tilted-card-overlay');
if (img) {
img.src = imageSrc;
img.alt = altText;
}
if (overlay) {
overlay.textContent = overlayContent;
overlay.style.display = showOverlay ? 'flex' : 'none';
}
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
element.removeEventListener('mousemove', element._mouseMoveHandler);
element.removeEventListener('mouseleave', element._mouseLeaveHandler);
element.removeEventListener('touchstart', element._touchStartHandler);
element.removeEventListener('touchmove', element._touchMoveHandler);
element.removeEventListener('touchend', element._touchEndHandler);
function applyTiltEffect(x, y, width, height) {
if (!inner) return;
const xPercent = x / width;
const yPercent = y / height;
const rotateY = amplitude * (0.5 - xPercent);
const rotateX = amplitude * (yPercent - 0.5);
inner.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scaleAmount})`;
}
if (!isTouchDevice) {
element._mouseMoveHandler = function(e) {
const rect = element.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
applyTiltEffect(x, y, rect.width, rect.height);
if (showTooltip) {
showTooltipAtPosition(e.pageX + 15, e.pageY + 15, tooltipText);
}
};
element._mouseLeaveHandler = function() {
if (inner) {
inner.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
}
if (showTooltip) {
hideTooltip();
}
};
element.addEventListener('mousemove', element._mouseMoveHandler);
element.addEventListener('mouseleave', element._mouseLeaveHandler);
} else {
let isCardActive = false;
element._touchStartHandler = function(e) {
isCardActive = true;
if (inner) {
inner.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale(${scaleAmount})`;
}
if (showTooltip) {
const touch = e.touches[0];
showTooltipAtPosition(touch.pageX + 15, touch.pageY - 40, tooltipText);
}
e.preventDefault();
};
element._touchMoveHandler = function(e) {
if (!isCardActive) return;
const touch = e.touches[0];
const rect = element.getBoundingClientRect();
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
applyTiltEffect(x, y, rect.width, rect.height);
if (showTooltip) {
showTooltipAtPosition(touch.pageX + 15, touch.pageY - 40, tooltipText);
}
e.preventDefault();
};
element._touchEndHandler = function() {
if (isCardActive && inner) {
inner.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
isCardActive = false;
}
if (showTooltip) {
hideTooltip();
}
};
element.addEventListener('touchstart', element._touchStartHandler, { passive: false });
element.addEventListener('touchmove', element._touchMoveHandler, { passive: false });
element.addEventListener('touchend', element._touchEndHandler);
element.addEventListener('touchcancel', element._touchEndHandler);
}
}
function showTooltipAtPosition(x, y, text) {
if (!currentTooltip) {
currentTooltip = document.createElement('div');
currentTooltip.className = 'tilted-card-caption';
document.body.appendChild(currentTooltip);
}
currentTooltip.textContent = text;
currentTooltip.style.left = `${x}px`;
currentTooltip.style.top = `${y}px`;
currentTooltip.style.opacity = '1';
}
function hideTooltip() {
if (currentTooltip) {
currentTooltip.style.opacity = '0';
}
}
function updateConfig() {
if (!activeCard) return;
activeCard.setAttribute('data-tilt-amplitude', tiltedCardConfig.tiltAmplitude);
activeCard.setAttribute('data-scale-hover', tiltedCardConfig.scaleHover);
activeCard.setAttribute('data-width', tiltedCardConfig.cardWidth);
activeCard.setAttribute('data-height', tiltedCardConfig.cardHeight);
activeCard.setAttribute('data-image-src', tiltedCardConfig.imageSrc);
activeCard.setAttribute('data-alt-text', tiltedCardConfig.altText);
activeCard.setAttribute('data-show-overlay', tiltedCardConfig.showOverlay);
activeCard.setAttribute('data-overlay-content', tiltedCardConfig.overlayContent);
activeCard.setAttribute('data-show-mobile-warning', tiltedCardConfig.showMobileWarning);
activeCard.setAttribute('data-show-tooltip', tiltedCardConfig.showTooltip);
activeCard.setAttribute('data-tooltip-text', tiltedCardConfig.tooltipText);
setupTiltedCard(activeCard);
const mobileAlert = activeCard.querySelector('.tilted-card-mobile-alert');
if (tiltedCardConfig.showMobileWarning && !mobileAlert) {
const alert = document.createElement('div');
alert.className = 'tilted-card-mobile-alert';
alert.textContent = 'Touch and hold to interact';
activeCard.appendChild(alert);
} else if (!tiltedCardConfig.showMobileWarning && mobileAlert) {
mobileAlert.remove();
}
}
function updateTiltedCardPreview() {
updateConfig();
}
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 generateUniqueId() {
return Math.random().toString(36).substring(2, 8);
}
function generateFullSectionJSON() {
// Generar IDs únicos
const sectionId = generateUniqueId();
const containerId = generateUniqueId();
const divId = generateUniqueId();
const codeId = generateUniqueId();
const divAttributeId = generateUniqueId();
// Obtener el código JavaScript generado
const jsCode = generateJavaScriptCode();
// Crear la estructura JSON completa
const fullSectionData = {
"content": [
{
"id": sectionId,
"name": "section",
"parent": 0,
"children": [containerId, codeId],
"settings": {
"_height": "200",
"_justifyContent": "center",
"_background": {
"color": {
"hex": "#000000"
}
}
},
"label": "Section"
},
{
"id": containerId,
"name": "container",
"parent": sectionId,
"children": [divId],
"settings": {
"_alignItems": "center"
}
},
{
"id": divId,
"name": "div",
"parent": containerId,
"children": [],
"settings": {
"_attributes": [
{
"id": divAttributeId,
"name": "data-tilted-card"
}
]
},
"label": "Tilted Card Div"
},
{
"id": codeId,
"name": "code",
"parent": sectionId,
"children": [],
"settings": {
"javascriptCode": jsCode,
"executeCode": true,
"_display": "none"
},
"label": "Tilted Card JS"
}
],
"source": "bricksCopiedElements",
"sourceUrl": "https://bricksfusion.com",
"version": "2.0.1",
"globalClasses": [],
"globalElements": []
};
return JSON.stringify(fullSectionData, null, 2);
}
function generateJavaScriptCode() {
return `(function() {
const defaultConfig = {
tiltAmplitude: ${tiltedCardConfig.tiltAmplitude},
scaleHover: ${tiltedCardConfig.scaleHover},
cardWidth: ${tiltedCardConfig.cardWidth},
cardHeight: ${tiltedCardConfig.cardHeight},
imageSrc: '${tiltedCardConfig.imageSrc}',
altText: '${tiltedCardConfig.altText}',
showOverlay: ${tiltedCardConfig.showOverlay},
overlayContent: '${tiltedCardConfig.overlayContent}',
showMobileWarning: ${tiltedCardConfig.showMobileWarning},
showTooltip: ${tiltedCardConfig.showTooltip},
tooltipText: '${tiltedCardConfig.tooltipText}'
};
let currentTooltip = null;
function initTiltedCard() {
const cards = document.querySelectorAll('[data-tilted-card]:not([data-tilted-initialized="true"])');
cards.forEach((card) => {
setupTiltedCard(card);
card.dataset.tiltedInitialized = 'true';
});
}
function setupTiltedCard(element) {
const amplitude = parseFloat(element.getAttribute('data-tilt-amplitude')) || defaultConfig.tiltAmplitude;
const scaleAmount = parseFloat(element.getAttribute('data-scale-hover')) || defaultConfig.scaleHover;
const showMobileWarning = element.getAttribute('data-show-mobile-warning') === 'true' || defaultConfig.showMobileWarning;
const showTooltip = element.getAttribute('data-show-tooltip') === 'true' || defaultConfig.showTooltip;
const tooltipText = element.getAttribute('data-tooltip-text') || defaultConfig.tooltipText;
const cardWidth = parseInt(element.getAttribute('data-width')) || defaultConfig.cardWidth;
const cardHeight = parseInt(element.getAttribute('data-height')) || defaultConfig.cardHeight;
const imageSrc = element.getAttribute('data-image-src') || defaultConfig.imageSrc;
const altText = element.getAttribute('data-alt-text') || defaultConfig.altText;
const showOverlay = element.getAttribute('data-show-overlay') !== 'false' && defaultConfig.showOverlay;
const overlayContent = element.getAttribute('data-overlay-content') || defaultConfig.overlayContent;
if (!element.querySelector('.tilted-card-inner')) {
element.innerHTML = \`
<div class="tilted-card-inner">
<img src="\${imageSrc}" alt="\${altText}" class="tilted-card-img">
\${showOverlay ? \`<div class="tilted-card-overlay">\${overlayContent}</div>\` : ''}
</div>
\`;
if (showMobileWarning) {
const mobileAlert = document.createElement('div');
mobileAlert.className = 'tilted-card-mobile-alert';
mobileAlert.textContent = 'Touch and hold to interact';
mobileAlert.style.cssText = \`
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
z-index: 10;
pointer-events: none;
\`;
element.appendChild(mobileAlert);
}
}
element.style.cssText = \`
position: relative;
width: \${cardWidth}px !important;
height: \${cardHeight}px !important;
margin: 0 auto;
\`;
const inner = element.querySelector('.tilted-card-inner');
if (inner) {
inner.style.cssText = \`
width: 100%;
height: 100%;
border-radius: 16px;
overflow: hidden;
position: relative;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
transform-style: preserve-3d;
\`;
const img = inner.querySelector('.tilted-card-img');
if (img) {
img.style.cssText = \`
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
\`;
img.src = imageSrc;
img.alt = altText;
}
const overlay = inner.querySelector('.tilted-card-overlay');
if (overlay) {
overlay.style.cssText = \`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1.5rem;
text-align: center;
color: white;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
\`;
overlay.textContent = overlayContent;
overlay.style.display = showOverlay ? 'flex' : 'none';
}
}
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
element.removeEventListener('mousemove', element._mouseMoveHandler);
element.removeEventListener('mouseleave', element._mouseLeaveHandler);
element.removeEventListener('touchstart', element._touchStartHandler);
element.removeEventListener('touchmove', element._touchMoveHandler);
element.removeEventListener('touchend', element._touchEndHandler);
function applyTiltEffect(x, y, width, height) {
if (!inner) return;
const xPercent = x / width;
const yPercent = y / height;
const rotateY = amplitude * (0.5 - xPercent);
const rotateX = amplitude * (yPercent - 0.5);
inner.style.transform = \`perspective(1000px) rotateX(\${rotateX}deg) rotateY(\${rotateY}deg) scale(\${scaleAmount})\`;
}
function showTooltipAtPosition(x, y, text) {
if (!currentTooltip) {
currentTooltip = document.createElement('div');
currentTooltip.className = 'tilted-card-caption';
currentTooltip.style.cssText = \`
position: absolute;
background-color: #FFFFFF;
color: #2D2D2D;
padding: 4px 8px;
border-radius: 4px;
font-size: 13px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
z-index: 20;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
\`;
document.body.appendChild(currentTooltip);
}
currentTooltip.textContent = text;
currentTooltip.style.left = x + 'px';
currentTooltip.style.top = y + 'px';
currentTooltip.style.opacity = '1';
}
function hideTooltip() {
if (currentTooltip) {
currentTooltip.style.opacity = '0';
}
}
if (!isTouchDevice) {
element._mouseMoveHandler = function(e) {
const rect = element.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
applyTiltEffect(x, y, rect.width, rect.height);
if (showTooltip) {
showTooltipAtPosition(e.pageX + 15, e.pageY + 15, tooltipText);
}
};
element._mouseLeaveHandler = function() {
if (inner) {
inner.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
}
if (showTooltip) {
hideTooltip();
}
};
element.addEventListener('mousemove', element._mouseMoveHandler);
element.addEventListener('mouseleave', element._mouseLeaveHandler);
} else {
let isCardActive = false;
element._touchStartHandler = function(e) {
isCardActive = true;
if (inner) {
inner.style.transform = \`perspective(1000px) rotateX(0deg) rotateY(0deg) scale(\${scaleAmount})\`;
}
if (showTooltip) {
const touch = e.touches[0];
showTooltipAtPosition(touch.pageX + 15, touch.pageY - 40, tooltipText);
}
e.preventDefault();
};
element._touchMoveHandler = function(e) {
if (!isCardActive) return;
const touch = e.touches[0];
const rect = element.getBoundingClientRect();
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
applyTiltEffect(x, y, rect.width, rect.height);
if (showTooltip) {
showTooltipAtPosition(touch.pageX + 15, touch.pageY - 40, tooltipText);
}
e.preventDefault();
};
element._touchEndHandler = function() {
if (isCardActive && inner) {
inner.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
isCardActive = false;
}
if (showTooltip) {
hideTooltip();
}
};
element.addEventListener('touchstart', element._touchStartHandler, { passive: false });
element.addEventListener('touchmove', element._touchMoveHandler, { passive: false });
element.addEventListener('touchend', element._touchEndHandler);
element.addEventListener('touchcancel', element._touchEndHandler);
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initTiltedCard);
} else {
initTiltedCard();
}
document.addEventListener('bricks-lazy-load', initTiltedCard);
})();`;
}
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) {
if (parameterId === 'scale-hover') {
valueElement.textContent = defaultValue.toFixed(2);
} else {
valueElement.textContent = defaultValue;
}
}
switch (parameterId) {
case 'tilt-amplitude':
tiltedCardConfig.tiltAmplitude = defaultValue;
break;
case 'scale-hover':
tiltedCardConfig.scaleHover = defaultValue;
break;
case 'card-width':
tiltedCardConfig.cardWidth = defaultValue;
break;
case 'card-height':
tiltedCardConfig.cardHeight = defaultValue;
break;
}
updateTiltedCardPreview();
showNotification(`${parameterId.replace(/-/g, ' ')} reset to default`);
}
};
function generateRandomCard() {
const randomImages = [
'https://images.unsplash.com/photo-1682686581854-5e71f58e7e3f?q=80&w=1470&auto=format&fit=crop',
'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=1470&auto=format&fit=crop',
'https://images.unsplash.com/photo-1519904981063-b0cf448d479e?q=80&w=1470&auto=format&fit=crop',
'https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?q=80&w=1470&auto=format&fit=crop',
'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?q=80&w=1470&auto=format&fit=crop'
];
const randomOverlays = [
'Hover me!',
'Interactive Card',
'3D Effect',
'Tilt Card',
'Amazing Effect'
];
tiltedCardConfig.imageSrc = randomImages[Math.floor(Math.random() * randomImages.length)];
tiltedCardConfig.tiltAmplitude = Math.floor(Math.random() * 20) + 10;
tiltedCardConfig.scaleHover = 1 + Math.random() * 0.5;
tiltedCardConfig.overlayContent = randomOverlays[Math.floor(Math.random() * randomOverlays.length)];
document.getElementById('image-src').value = tiltedCardConfig.imageSrc;
document.getElementById('tilt-amplitude').value = tiltedCardConfig.tiltAmplitude;
document.getElementById('scale-hover').value = tiltedCardConfig.scaleHover;
document.getElementById('overlay-content').value = tiltedCardConfig.overlayContent;
document.getElementById('tilt-amplitude-value').textContent = tiltedCardConfig.tiltAmplitude;
document.getElementById('scale-hover-value').textContent = tiltedCardConfig.scaleHover.toFixed(2);
updateTiltedCardPreview();
showNotification('Random card generated!');
}
function initializeUI() {
initTiltedCard();
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-tilted-card');
});
document.getElementById('download-config').addEventListener('click', () => {
copyJsToClipboard();
});
document.getElementById('copy-full-section').addEventListener('click', () => {
copyFullSectionToClipboard();
});
document.getElementById('randomize-tilted-card').addEventListener('click', () => {
generateRandomCard();
});
document.getElementById('reset-animation').addEventListener('click', () => {
tiltedCardConfig.tiltAmplitude = defaultConfig.tiltAmplitude;
tiltedCardConfig.scaleHover = defaultConfig.scaleHover;
tiltedCardConfig.cardWidth = defaultConfig.cardWidth;
tiltedCardConfig.cardHeight = defaultConfig.cardHeight;
document.getElementById('tilt-amplitude').value = defaultConfig.tiltAmplitude;
document.getElementById('scale-hover').value = defaultConfig.scaleHover;
document.getElementById('card-width').value = defaultConfig.cardWidth;
document.getElementById('card-height').value = defaultConfig.cardHeight;
document.getElementById('tilt-amplitude-value').textContent = defaultConfig.tiltAmplitude;
document.getElementById('scale-hover-value').textContent = defaultConfig.scaleHover.toFixed(2);
document.getElementById('card-width-value').textContent = defaultConfig.cardWidth;
document.getElementById('card-height-value').textContent = defaultConfig.cardHeight;
updateTiltedCardPreview();
showNotification('Animation settings reset');
});
document.getElementById('reset-content').addEventListener('click', () => {
tiltedCardConfig.imageSrc = defaultConfig.imageSrc;
tiltedCardConfig.altText = defaultConfig.altText;
tiltedCardConfig.showOverlay = defaultConfig.showOverlay;
tiltedCardConfig.overlayContent = defaultConfig.overlayContent;
document.getElementById('image-src').value = defaultConfig.imageSrc;
document.getElementById('alt-text').value = defaultConfig.altText;
document.getElementById('show-overlay').checked = defaultConfig.showOverlay;
document.getElementById('overlay-content').value = defaultConfig.overlayContent;
updateTiltedCardPreview();
showNotification('Content settings reset');
});
document.getElementById('reset-advanced').addEventListener('click', () => {
tiltedCardConfig.showMobileWarning = defaultConfig.showMobileWarning;
tiltedCardConfig.showTooltip = defaultConfig.showTooltip;
tiltedCardConfig.tooltipText = defaultConfig.tooltipText;
document.getElementById('show-mobile-warning').checked = defaultConfig.showMobileWarning;
document.getElementById('show-tooltip').checked = defaultConfig.showTooltip;
document.getElementById('tooltip-text').value = defaultConfig.tooltipText;
updateTiltedCardPreview();
showNotification('Advanced settings reset');
});
const rangeInputs = document.querySelectorAll('input[type="range"]');
rangeInputs.forEach(input => {
const valueElement = document.getElementById(`${input.id}-value`);
if (valueElement) {
if (input.id === 'scale-hover') {
valueElement.textContent = parseFloat(input.value).toFixed(2);
} else {
valueElement.textContent = input.value;
}
}
input.addEventListener('input', () => {
if (valueElement) {
if (input.id === 'scale-hover') {
valueElement.textContent = parseFloat(input.value).toFixed(2);
} else {
valueElement.textContent = input.value;
}
}
switch (input.id) {
case 'tilt-amplitude':
tiltedCardConfig.tiltAmplitude = parseInt(input.value);
break;
case 'scale-hover':
tiltedCardConfig.scaleHover = parseFloat(input.value);
break;
case 'card-width':
tiltedCardConfig.cardWidth = parseInt(input.value);
break;
case 'card-height':
tiltedCardConfig.cardHeight = parseInt(input.value);
break;
}
updateTiltedCardPreview();
});
});
const textInputs = document.querySelectorAll('input[type="text"]');
textInputs.forEach(input => {
input.addEventListener('input', () => {
switch (input.id) {
case 'image-src':
tiltedCardConfig.imageSrc = input.value;
break;
case 'alt-text':
tiltedCardConfig.altText = input.value;
break;
case 'overlay-content':
tiltedCardConfig.overlayContent = input.value;
break;
case 'tooltip-text':
tiltedCardConfig.tooltipText = input.value;
break;
}
updateTiltedCardPreview();
});
});
const switches = document.querySelectorAll('input[type="checkbox"]');
switches.forEach(input => {
input.addEventListener('change', () => {
switch (input.id) {
case 'show-overlay':
tiltedCardConfig.showOverlay = input.checked;
break;
case 'show-mobile-warning':
tiltedCardConfig.showMobileWarning = input.checked;
break;
case 'show-tooltip':
tiltedCardConfig.showTooltip = input.checked;
break;
}
updateTiltedCardPreview();
});
});
document.addEventListener('keydown', (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
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;
}
} else {
switch (e.key.toLowerCase()) {
case 'r':
generateRandomCard();
break;
}
}
});
function saveConfiguration() {
try {
localStorage.setItem('bricksfusion-tilted-card-config', JSON.stringify(tiltedCardConfig));
} catch (e) {
}
}
function loadConfiguration() {
try {
const saved = localStorage.getItem('bricksfusion-tilted-card-config');
if (saved) {
const savedConfig = JSON.parse(saved);
Object.assign(tiltedCardConfig, savedConfig);
document.getElementById('tilt-amplitude').value = savedConfig.tiltAmplitude;
document.getElementById('scale-hover').value = savedConfig.scaleHover;
document.getElementById('card-width').value = savedConfig.cardWidth;
document.getElementById('card-height').value = savedConfig.cardHeight;
document.getElementById('image-src').value = savedConfig.imageSrc;
document.getElementById('alt-text').value = savedConfig.altText;
document.getElementById('show-overlay').checked = savedConfig.showOverlay;
document.getElementById('overlay-content').value = savedConfig.overlayContent;
document.getElementById('show-mobile-warning').checked = savedConfig.showMobileWarning;
document.getElementById('show-tooltip').checked = savedConfig.showTooltip;
document.getElementById('tooltip-text').value = savedConfig.tooltipText;
document.getElementById('tilt-amplitude-value').textContent = savedConfig.tiltAmplitude;
document.getElementById('scale-hover-value').textContent = savedConfig.scaleHover.toFixed(2);
document.getElementById('card-width-value').textContent = savedConfig.cardWidth;
document.getElementById('card-height-value').textContent = savedConfig.cardHeight;
updateTiltedCardPreview();
}
} catch (e) {
}
}
const originalUpdateTiltedCardPreview = updateTiltedCardPreview;
updateTiltedCardPreview = function() {
originalUpdateTiltedCardPreview();
saveConfiguration();
};
loadConfiguration();
setTimeout(() => {
showNotification('BricksFusion Tilted Card Configurator loaded!');
}, 500);
}
initializeUI();
});
</script>
</body>
</html>LIGHTWEIGHT
Card Tilt 3D
Creates an interactive 3D card that tilts and follows your mouse or touch. Perfect for product showcases, portfolios, and adding depth to your designs.
Image
Image URL
image upload / url
The background image for your card. Upload an image or paste a URL. The image covers the entire card area.
Default: None
Alt Text
text
Alternative text for the image. Important for accessibility and SEO.
Default: Card image
Tilt Effect
Tilt Amplitude
5-30 degrees
How much the card tilts when you move your mouse. Lower values are subtle, higher values create dramatic 3D movement.
Default: 12
Scale on Hover
1.0-1.5
How much the card grows when you hover. 1.0 keeps the same size, 1.2 makes it 20% bigger. Adds emphasis to the interaction.
Default: 1.2
Overlay
Show Overlay
on/off
Display text content on top of the card image. Useful for adding titles, descriptions, or call-to-actions.
Default: Off
Overlay Content
text
The text that appears on the overlay. Keep it short and impactful for best results.
Default: Hover me!
Tooltip
Show Tooltip
on/off
Display a small floating tooltip that follows your cursor. Great for hints or additional information.
Default: Off
Tooltip Text
text
The text shown in the tooltip. Keep it brief for a clean look.
Default: Interactive 3D Card
Mobile
Show Mobile Warning
on/off
Display a hint on mobile devices telling users to touch and hold. Helps users discover the interactive feature.
Default: Off
Performance
This element uses hardware-accelerated CSS transforms for smooth 60fps animations. Works on both mouse and touch devices. Lightweight and performant even with multiple cards on the same page.