v1.0.1
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
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>Page Transition 005 Configurator - BricksFusion</title>
<style>
:root {
--background: #000;
--card-bg: #1e1e1e;
--card-bg-hover: #252525;
--text-primary: #f2f2f7;
--text-secondary: #8e8e93;
--accent: #b4ff99;
--accent-hover: #a1e588;
--border: #2c2c2e;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
--track: #2c2c2e;
--thumb: #b4ff99;
--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(180, 255, 153, 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), #a1e588);
border-color: var(--accent);
color: #000;
font-weight: 600;
}
.action-btn.primary:hover {
background: linear-gradient(90deg, var(--accent-hover), #90d477);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(180, 255, 153, 0.3);
}
.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), #a1e588);
-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: #b4ff99;
}
.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: #000000;
border: 1px solid var(--border);
box-shadow: var(--shadow);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.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;
}
.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);
color: #000;
}
.preview-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
}
.background-selector-wrapper {
position: relative;
display: inline-block;
}
.background-selector-btn {
position: relative;
}
.background-selector-btn:hover {
background-color: rgba(180, 255, 153, 0.2);
border-color: var(--accent);
box-shadow: 0 0 8px rgba(180, 255, 153, 0.3);
}
.hidden-color-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.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(180, 255, 153, 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;
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(180, 255, 153, 0.5);
}
.color-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.color-row {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1rem 1.25rem;
background-color: rgba(30, 30, 30, 0.7);
border: 1px solid var(--border);
border-radius: var(--input-radius);
transition: var(--transition);
}
.color-row:hover {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(180, 255, 153, 0.1);
}
.color-picker-container {
position: relative;
width: 40px;
height: 40px;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--border);
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
background: var(--card-bg);
display: flex;
align-items: center;
justify-content: center;
--selected-color: #ffffff;
}
.color-picker-container:hover {
border-color: var(--accent);
transform: scale(1.05);
box-shadow: 0 0 12px rgba(180, 255, 153, 0.3);
}
.color-picker-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--selected-color, #ffffff);
border-radius: 6px;
transition: var(--transition);
}
input[type="color"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
cursor: pointer;
background: transparent;
opacity: 0;
z-index: 2;
}
.color-input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.color-label {
font-size: 10px;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 0.25rem;
}
.color-input {
padding: 0.5rem 0.75rem;
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-primary);
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
font-size: 12px;
transition: var(--transition);
min-width: 0;
}
.color-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(180, 255, 153, 0.2);
outline: none;
}
.color-input.invalid {
border-color: var(--danger);
box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2);
}
.hex-input,
.hsl-input {
width: 100%;
}
.color-input-group:nth-child(2) {
flex: 0.3;
}
.color-input-group:nth-child(3) {
flex: 0.7;
}
input[type="text"],
input[type="url"] {
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="url"]:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(180, 255, 153, 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;
}
.TransitionPage005-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 10;
overflow: hidden;
pointer-events: none;
}
.TransitionPage005-container.active {
opacity: 1;
visibility: visible;
}
.TransitionPage005-logo-wrapper {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
.TransitionPage005-logo {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 8px;
}
@keyframes logoPulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.TransitionPage005-logo.pulse {
animation: logoPulse 0.8s ease-in-out infinite;
}
@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;
}
.color-row {
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1rem;
}
.color-picker-container {
align-self: center;
margin-bottom: 0.5rem;
}
.color-input-group {
align-items: stretch;
}
.hex-input,
.hsl-input {
width: 100%;
}
.preview-container {
height: 300px;
}
.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/transition-pages/" class="breadcrumb-item">Transition Pages</a>
<span class="breadcrumb-separator">›</span>
<span class="breadcrumb-item active">Page Transition 005</span>
</nav>
<div class="action-buttons">
<button class="action-btn primary" id="download-config" title="Copy JavaScript code (Ctrl+D)" data-protection-animation="true">
<span>⬇</span>
Copy JS
</button>
</div>
</div>
<div class="container">
<div class="page-header">
<h1 class="page-title">Page Transition 005</h1>
<p class="page-subtitle">Interactive page transitions 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 page transition effect using the controls below</li>
<li>Click <strong>Copy JS</strong> to copy the JavaScript code to clipboard</li>
<li>Go to your <strong>Template</strong> (Header/Footer) that appears on all pages</li>
<li>Click <strong>Manage</strong> → <strong>Page Settings</strong> → <strong>Custom Code</strong></li>
<li>Paste the code in <strong>Body (Footer) Scripts</strong> section</li>
<li>The smooth transition effect will now appear automatically when visitors navigate between pages on your website</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<section class="preview-section">
<div class="preview-container" id="transition-preview">
<div class="preview-content">Click here to test the transition effect</div>
<div class="preview-controls">
<button class="preview-btn" id="randomize-transition" title="Randomize (R)">🎲</button>
<div class="background-selector-wrapper">
<button class="preview-btn background-selector-btn" id="background-selector">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12,2 2,7 12,12 22,7"/>
<polyline points="2,17 12,22 22,17"/>
<polyline points="2,12 12,17 22,12"/>
</svg>
</button>
<input type="color" id="preview-background-picker" class="hidden-color-input" value="#000000" title="Change Preview Background (B)">
</div>
</div>
<div class="TransitionPage005-container" id="previewTransitionContainer">
<div class="TransitionPage005-logo-wrapper" id="previewLogoWrapper">
<img id="previewLogo" class="TransitionPage005-logo" src="https://bricksfusion.com/wp-content/uploads/2025/05/Bricksfusionv3-1.png" alt="Logo">
</div>
</div>
</div>
</section>
<section class="controls-section">
<div class="card">
<div class="card-heading">
Logo Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-logo" title="Reset Logo Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Logo URL
<span class="help-tooltip" title="URL of your logo image">ℹ</span>
</span>
</div>
<input type="url" id="logo-url" placeholder="https://example.com/logo.png" value="https://bricksfusion.com/wp-content/uploads/2025/05/Bricksfusionv3-1.png">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Logo Size
<span class="help-tooltip" title="Size of the logo in pixels">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="logo-size-value">200</span>px</span>
<button class="reset-btn" onclick="resetParameter('logo-size', 200)">↺</button>
</div>
</div>
<input type="range" id="logo-size" min="100" max="400" step="10" value="200">
</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 Duration
<span class="help-tooltip" title="Total duration of the transition">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="transition-duration-value">2000</span>ms</span>
<button class="reset-btn" onclick="resetParameter('transition-duration', 2000)">↺</button>
</div>
</div>
<input type="range" id="transition-duration" min="1000" max="5000" step="100" value="2000">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Pulse Duration
<span class="help-tooltip" title="Duration of each pulse animation">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="pulse-duration-value">0.8</span>s</span>
<button class="reset-btn" onclick="resetParameter('pulse-duration', 0.8)">↺</button>
</div>
</div>
<input type="range" id="pulse-duration" min="0.4" max="2" step="0.1" value="0.8">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Scale Factor
<span class="help-tooltip" title="How much the logo scales during pulse">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="scale-factor-value">1.1</span>x</span>
<button class="reset-btn" onclick="resetParameter('scale-factor', 1.1)">↺</button>
</div>
</div>
<input type="range" id="scale-factor" min="1.05" max="1.3" step="0.05" value="1.1">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Fade Duration
<span class="help-tooltip" title="Duration of fade in/out effect">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="fade-duration-value">0.3</span>s</span>
<button class="reset-btn" onclick="resetParameter('fade-duration', 0.3)">↺</button>
</div>
</div>
<input type="range" id="fade-duration" min="0.1" max="0.8" step="0.1" value="0.3">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Background Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-background" title="Reset Background Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Background Opacity
<span class="help-tooltip" title="Transparency of the overlay background">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="background-opacity-value">0.9</span></span>
<button class="reset-btn" onclick="resetParameter('background-opacity', 0.9)">↺</button>
</div>
</div>
<input type="range" id="background-opacity" min="0.1" max="1" step="0.1" value="0.9">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Background Color</span>
</div>
<div class="color-list">
<div class="color-row">
<div class="color-picker-container" style="--selected-color: #ffffff;">
<input type="color" id="background-color" value="#ffffff">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="background-color-hex" value="#ffffff" placeholder="#ffffff">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="background-color-hsl" placeholder="hsl(0, 0%, 100%)">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="notification" id="notification"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let transitionConfig = {
logoUrl: "https://bricksfusion.com/wp-content/uploads/2025/05/Bricksfusionv3-1.png",
logoSize: 200,
transitionDuration: 2000,
pulseDuration: 0.8,
scaleFactor: 1.1,
fadeDuration: 0.3,
backgroundColor: "#ffffff",
backgroundOpacity: 0.9
};
const defaultConfig = { ...transitionConfig };
function updateConfig() {
updatePreviewStyles();
saveConfiguration();
}
function initializePreview() {
updateConfig();
}
function updatePreviewStyles() {
const rgbColor = hexToRgb(transitionConfig.backgroundColor);
const container = document.getElementById('previewTransitionContainer');
const logoWrapper = document.getElementById('previewLogoWrapper');
const logo = document.getElementById('previewLogo');
if (container) {
container.style.backgroundColor = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${transitionConfig.backgroundOpacity})`;
container.style.transition = `opacity ${transitionConfig.fadeDuration}s ease, visibility ${transitionConfig.fadeDuration}s ease`;
}
if (logoWrapper) {
logoWrapper.style.width = `${transitionConfig.logoSize}px`;
logoWrapper.style.height = `${transitionConfig.logoSize}px`;
}
if (logo) {
logo.src = transitionConfig.logoUrl;
}
const style = document.createElement('style');
style.textContent = `
@keyframes logoPulsePreview {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(${transitionConfig.scaleFactor});
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.TransitionPage005-logo.pulse {
animation: logoPulsePreview ${transitionConfig.pulseDuration}s ease-in-out infinite !important;
}
`;
const existingStyle = document.getElementById('preview-pulse-style');
if (existingStyle) {
existingStyle.remove();
}
style.id = 'preview-pulse-style';
document.head.appendChild(style);
}
function testTransition() {
const container = document.getElementById('previewTransitionContainer');
const logo = document.getElementById('previewLogo');
if (!container || !logo) return;
container.classList.remove('active');
logo.classList.remove('pulse');
setTimeout(() => {
container.classList.add('active');
logo.classList.add('pulse');
setTimeout(() => {
logo.classList.remove('pulse');
setTimeout(() => {
container.classList.remove('active');
}, 200);
}, transitionConfig.transitionDuration);
}, 100);
}
function generateJavaScriptCode() {
const rgbColor = hexToRgb(transitionConfig.backgroundColor);
return `<div id="TransitionPage005Container" class="TransitionPage005-container">
<div class="TransitionPage005-logo-wrapper">
<img id="TransitionPage005Logo" class="TransitionPage005-logo" src="${transitionConfig.logoUrl}" alt="Logo">
</div>
</div>
<style>
.TransitionPage005-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${transitionConfig.backgroundOpacity});
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity ${transitionConfig.fadeDuration}s ease, visibility ${transitionConfig.fadeDuration}s ease;
z-index: 9999;
}
.TransitionPage005-container.active {
opacity: 1;
visibility: visible;
}
.TransitionPage005-logo-wrapper {
width: ${transitionConfig.logoSize}px;
height: ${transitionConfig.logoSize}px;
display: flex;
justify-content: center;
align-items: center;
}
.TransitionPage005-logo {
width: 100%;
height: 100%;
object-fit: contain;
}
@keyframes logoPulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(${transitionConfig.scaleFactor});
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.TransitionPage005-logo.pulse {
animation: logoPulse ${transitionConfig.pulseDuration}s ease-in-out infinite;
}
</style>
<script>
(function() {
'use strict';
const CONFIG = {
logoUrl: '${transitionConfig.logoUrl}',
transitionDuration: ${transitionConfig.transitionDuration},
minPulses: 2,
logoSize: '${transitionConfig.logoSize}px'
};
let transitionContainer, logoElement, logoWrapper;
function initializeTransition() {
transitionContainer = document.getElementById('TransitionPage005Container');
logoElement = document.getElementById('TransitionPage005Logo');
logoWrapper = document.querySelector('.TransitionPage005-logo-wrapper');
if (!transitionContainer || !logoElement || !logoWrapper) {
return;
}
logoElement.src = CONFIG.logoUrl;
logoWrapper.style.width = CONFIG.logoSize;
logoWrapper.style.height = CONFIG.logoSize;
resetTransitionState();
window.addEventListener('pageshow', resetTransitionState);
window.addEventListener('popstate', resetTransitionState);
attachLinkListeners();
}
function resetTransitionState() {
if (transitionContainer && logoElement) {
transitionContainer.classList.remove('active');
logoElement.classList.remove('pulse');
}
}
function startTransition(url) {
transitionContainer.classList.add('active');
logoElement.classList.add('pulse');
const startTime = Date.now();
const checkTransitionEnd = () => {
const elapsedTime = Date.now() - startTime;
if (elapsedTime >= CONFIG.transitionDuration && logoElement.classList.contains('pulse')) {
logoElement.classList.remove('pulse');
setTimeout(() => {
window.location.href = url;
}, 100);
} else {
requestAnimationFrame(checkTransitionEnd);
}
};
requestAnimationFrame(checkTransitionEnd);
}
function handleLinkClick(e) {
const link = e.currentTarget;
if (link.origin === window.location.origin && !link.hasAttribute('target')) {
e.preventDefault();
startTransition(link.href);
}
}
function attachLinkListeners() {
document.querySelectorAll('a').forEach(link => {
link.removeEventListener('click', handleLinkClick);
link.addEventListener('click', handleLinkClick);
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeTransition);
} else {
initializeTransition();
}
})();
<\/script>`;
}
function generateFullSectionJSON() {
return "";
}
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 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 generateRandomTransition() {
const randomLogos = [
"https://bricksfusion.com/wp-content/uploads/2025/05/Bricksfusionv3-1.png",
"https://via.placeholder.com/200x200/4CAF50/FFFFFF?text=LOGO",
"https://via.placeholder.com/200x200/2196F3/FFFFFF?text=BRAND",
"https://via.placeholder.com/200x200/FF9800/FFFFFF?text=COMPANY"
];
transitionConfig.logoUrl = randomLogos[Math.floor(Math.random() * randomLogos.length)];
transitionConfig.logoSize = Math.floor(Math.random() * 300) + 100;
transitionConfig.transitionDuration = Math.floor(Math.random() * 4000) + 1000;
transitionConfig.pulseDuration = Math.round((Math.random() * 1.6 + 0.4) * 10) / 10;
transitionConfig.scaleFactor = Math.round((Math.random() * 0.25 + 1.05) * 100) / 100;
transitionConfig.fadeDuration = Math.round((Math.random() * 0.7 + 0.1) * 10) / 10;
transitionConfig.backgroundColor = generateRandomColor();
transitionConfig.backgroundOpacity = Math.round((Math.random() * 0.9 + 0.1) * 10) / 10;
updateAllInputs();
updateConfig();
showNotification('Random transition generated!');
}
function generateRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
}
function updateAllInputs() {
document.getElementById('logo-url').value = transitionConfig.logoUrl;
document.getElementById('logo-size').value = transitionConfig.logoSize;
document.getElementById('transition-duration').value = transitionConfig.transitionDuration;
document.getElementById('pulse-duration').value = transitionConfig.pulseDuration;
document.getElementById('scale-factor').value = transitionConfig.scaleFactor;
document.getElementById('fade-duration').value = transitionConfig.fadeDuration;
document.getElementById('background-opacity').value = transitionConfig.backgroundOpacity;
document.getElementById('logo-size-value').textContent = transitionConfig.logoSize;
document.getElementById('transition-duration-value').textContent = transitionConfig.transitionDuration;
document.getElementById('pulse-duration-value').textContent = transitionConfig.pulseDuration;
document.getElementById('scale-factor-value').textContent = transitionConfig.scaleFactor;
document.getElementById('fade-duration-value').textContent = transitionConfig.fadeDuration;
document.getElementById('background-opacity-value').textContent = transitionConfig.backgroundOpacity;
updateColorInputs('background-color', transitionConfig.backgroundColor);
}
function updateColorInputs(colorId, color) {
const colorInput = document.getElementById(colorId);
const hexInput = document.getElementById(`${colorId}-hex`);
const hslInput = document.getElementById(`${colorId}-hsl`);
if (colorInput && hexInput && hslInput) {
colorInput.value = color;
hexInput.value = color;
hslInput.value = `hsl(${hexToHsl(color).h}, ${hexToHsl(color).s}%, ${hexToHsl(color).l}%)`;
hexInput.classList.remove('invalid');
hslInput.classList.remove('invalid');
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
if (colorPickerContainer) {
colorPickerContainer.style.setProperty('--selected-color', color);
}
}
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function hexToHsl(hex) {
const r = parseInt(hex.slice(1, 3), 16) / 255;
const g = parseInt(hex.slice(3, 5), 16) / 255;
const b = parseInt(hex.slice(5, 7), 16) / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}
function hslToHex(hsl) {
const match = hsl.match(/hsl\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)/);
if (!match) return null;
let h = parseInt(match[1]) / 360;
let s = parseInt(match[2]) / 100;
let l = parseInt(match[3]) / 100;
const hue2rgb = (p, q, t) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};
let r, g, b;
if (s === 0) {
r = g = b = l;
} else {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
const toHex = (c) => {
const hex = Math.round(c * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
function isValidHex(hex) {
return /^#[0-9A-F]{6}$/i.test(hex);
}
function isValidHsl(hsl) {
return /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/i.test(hsl);
}
function formatHex(value) {
let hex = value.replace(/[^0-9A-Fa-f#]/g, '');
if (!hex.startsWith('#')) {
hex = '#' + hex;
}
if (hex.length > 7) {
hex = hex.substring(0, 7);
}
return hex.toUpperCase();
}
function formatHsl(value) {
const cleanValue = value.replace(/[^\d,\s]/g, '');
const numbers = cleanValue.match(/\d+/g);
if (!numbers || numbers.length < 3) {
const partialMatch = value.match(/(\d+)/g);
if (partialMatch && partialMatch.length >= 1) {
const h = Math.min(360, Math.max(0, parseInt(partialMatch[0]) || 0));
const s = Math.min(100, Math.max(0, parseInt(partialMatch[1]) || 50));
const l = Math.min(100, Math.max(0, parseInt(partialMatch[2]) || 50));
return `hsl(${h}, ${s}%, ${l}%)`;
}
return value;
}
let h = Math.min(360, Math.max(0, parseInt(numbers[0])));
let s = Math.min(100, Math.max(0, parseInt(numbers[1])));
let l = Math.min(100, Math.max(0, parseInt(numbers[2])));
return `hsl(${h}, ${s}%, ${l}%)`;
}
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 'logo-size':
transitionConfig.logoSize = defaultValue;
break;
case 'transition-duration':
transitionConfig.transitionDuration = defaultValue;
break;
case 'pulse-duration':
transitionConfig.pulseDuration = defaultValue;
break;
case 'scale-factor':
transitionConfig.scaleFactor = defaultValue;
break;
case 'fade-duration':
transitionConfig.fadeDuration = defaultValue;
break;
case 'background-opacity':
transitionConfig.backgroundOpacity = defaultValue;
break;
}
updateConfig();
showNotification(`${parameterId.replace(/-/g, ' ')} reset to default`);
}
};
function setupColorInputHandlers(colorId, configProperty) {
const colorInput = document.getElementById(colorId);
const hexInput = document.getElementById(`${colorId}-hex`);
const hslInput = document.getElementById(`${colorId}-hsl`);
if (!colorInput || !hexInput || !hslInput) return;
hslInput.value = `hsl(${hexToHsl(colorInput.value).h}, ${hexToHsl(colorInput.value).s}%, ${hexToHsl(colorInput.value).l}%)`;
colorInput.addEventListener('input', () => {
const color = colorInput.value;
hexInput.value = color;
hslInput.value = `hsl(${hexToHsl(color).h}, ${hexToHsl(color).s}%, ${hexToHsl(color).l}%)`;
hexInput.classList.remove('invalid');
hslInput.classList.remove('invalid');
transitionConfig[configProperty] = color;
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', color);
updateConfig();
});
hexInput.addEventListener('input', (e) => {
let hex = e.target.value;
hex = formatHex(hex);
e.target.value = hex;
if (isValidHex(hex)) {
colorInput.value = hex;
hslInput.value = `hsl(${hexToHsl(hex).h}, ${hexToHsl(hex).s}%, ${hexToHsl(hex).l}%)`;
transitionConfig[configProperty] = hex;
e.target.classList.remove('invalid');
hslInput.classList.remove('invalid');
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', hex);
updateConfig();
} else {
e.target.classList.add('invalid');
}
});
hexInput.addEventListener('blur', (e) => {
if (!isValidHex(e.target.value)) {
e.target.value = colorInput.value;
e.target.classList.remove('invalid');
}
});
hslInput.addEventListener('input', (e) => {
let hsl = e.target.value;
if (isValidHsl(hsl)) {
const hex = hslToHex(hsl);
if (hex) {
colorInput.value = hex;
hexInput.value = hex;
transitionConfig[configProperty] = hex;
e.target.classList.remove('invalid');
hexInput.classList.remove('invalid');
const colorPickerContainer = colorInput.closest('.color-row').querySelector('.color-picker-container');
colorPickerContainer.style.setProperty('--selected-color', hex);
updateConfig();
return;
}
}
e.target.classList.add('invalid');
});
hslInput.addEventListener('blur', (e) => {
let hsl = e.target.value;
if (!isValidHsl(hsl) && hsl.trim()) {
const formatted = formatHsl(hsl);
if (isValidHsl(formatted)) {
e.target.value = formatted;
const hex = hslToHex(formatted);
if (hex) {
colorInput.value = hex;
hexInput.value = hex;
transitionConfig[configProperty] = hex;
e.target.classList.remove('invalid');
hexInput.classList.remove('invalid');
updateConfig();
return;
}
}
}
if (!isValidHsl(e.target.value)) {
e.target.value = `hsl(${hexToHsl(colorInput.value).h}, ${hexToHsl(colorInput.value).s}%, ${hexToHsl(colorInput.value).l}%)`;
e.target.classList.remove('invalid');
}
});
}
function saveConfiguration() {
try {
localStorage.setItem('bricksfusion-page-transition005-config', JSON.stringify(transitionConfig));
} catch (e) {
}
}
function loadConfiguration() {
try {
const saved = localStorage.getItem('bricksfusion-page-transition005-config');
if (saved) {
const savedConfig = JSON.parse(saved);
Object.assign(transitionConfig, savedConfig);
updateAllInputs();
updateConfig();
}
} catch (e) {
}
}
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('download-config').addEventListener('click', () => {
copyJsToClipboard();
});
document.getElementById('randomize-transition').addEventListener('click', () => {
generateRandomTransition();
});
const backgroundPicker = document.getElementById('preview-background-picker');
const previewContainer = document.getElementById('transition-preview');
backgroundPicker.addEventListener('input', (e) => {
const selectedColor = e.target.value;
previewContainer.style.backgroundColor = selectedColor;
showNotification(`Preview background changed to ${selectedColor}`);
});
previewContainer.style.backgroundColor = '#000000';
previewContainer.addEventListener('click', testTransition);
document.getElementById('reset-logo').addEventListener('click', () => {
transitionConfig.logoUrl = defaultConfig.logoUrl;
transitionConfig.logoSize = defaultConfig.logoSize;
document.getElementById('logo-url').value = defaultConfig.logoUrl;
document.getElementById('logo-size').value = defaultConfig.logoSize;
document.getElementById('logo-size-value').textContent = defaultConfig.logoSize;
updateConfig();
showNotification('Logo settings reset');
});
document.getElementById('reset-animation').addEventListener('click', () => {
transitionConfig.transitionDuration = defaultConfig.transitionDuration;
transitionConfig.pulseDuration = defaultConfig.pulseDuration;
transitionConfig.scaleFactor = defaultConfig.scaleFactor;
transitionConfig.fadeDuration = defaultConfig.fadeDuration;
document.getElementById('transition-duration').value = defaultConfig.transitionDuration;
document.getElementById('pulse-duration').value = defaultConfig.pulseDuration;
document.getElementById('scale-factor').value = defaultConfig.scaleFactor;
document.getElementById('fade-duration').value = defaultConfig.fadeDuration;
document.getElementById('transition-duration-value').textContent = defaultConfig.transitionDuration;
document.getElementById('pulse-duration-value').textContent = defaultConfig.pulseDuration;
document.getElementById('scale-factor-value').textContent = defaultConfig.scaleFactor;
document.getElementById('fade-duration-value').textContent = defaultConfig.fadeDuration;
updateConfig();
showNotification('Animation settings reset');
});
document.getElementById('reset-background').addEventListener('click', () => {
transitionConfig.backgroundOpacity = defaultConfig.backgroundOpacity;
transitionConfig.backgroundColor = defaultConfig.backgroundColor;
document.getElementById('background-opacity').value = defaultConfig.backgroundOpacity;
document.getElementById('background-opacity-value').textContent = defaultConfig.backgroundOpacity;
updateColorInputs('background-color', defaultConfig.backgroundColor);
updateConfig();
showNotification('Background settings reset');
});
document.getElementById('logo-url').addEventListener('input', (e) => {
transitionConfig.logoUrl = e.target.value;
updateConfig();
});
const rangeInputs = document.querySelectorAll('input[type="range"]');
rangeInputs.forEach(input => {
const 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 'logo-size':
transitionConfig.logoSize = parseInt(input.value);
break;
case 'transition-duration':
transitionConfig.transitionDuration = parseInt(input.value);
break;
case 'pulse-duration':
transitionConfig.pulseDuration = parseFloat(input.value);
break;
case 'scale-factor':
transitionConfig.scaleFactor = parseFloat(input.value);
break;
case 'fade-duration':
transitionConfig.fadeDuration = parseFloat(input.value);
break;
case 'background-opacity':
transitionConfig.backgroundOpacity = parseFloat(input.value);
break;
}
updateConfig();
});
});
setupColorInputHandlers('background-color', 'backgroundColor');
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;
}
} else {
switch (e.key.toLowerCase()) {
case 'r':
generateRandomTransition();
break;
case 'b':
document.getElementById('preview-background-picker').click();
break;
}
}
});
loadConfiguration();
initializePreview();
setTimeout(() => {
showNotification('BricksFusion Page Transition 005 Configurator loaded!');
}, 500);
}
initializeUI();
});
</script>
</body>
</html>LIGHT
Transition 005
Elegant logo pulse transition creating branded loading experience. Features customizable logo display with smooth pulsating animation during page transitions. Configure logo size, pulse speed, scale intensity, and background appearance. Includes adjustable fade transitions and background opacity for perfect brand integration. Ideal for establishing brand presence and providing visual feedback during navigation. Creates professional, polished experience across entire website.
Logo Pulse Transition
Click anywhere to preview the logo pulse effect.
Logo
Logo URL
URL input
Direct URL to your logo image file. Supports PNG, SVG, JPG formats for maximum flexibility. PNG with transparency recommended for clean appearance over any background color. SVG provides crisp scaling at any size. Ensure logo hosted on reliable CDN or server for fast loading. Logo displays centered during entire transition sequence. File size impacts loading speed, optimize images for web use.
Default: Bricksfusion logo
Logo Size
Number (pixels)
Dimensions of logo display in pixels, applied to both width and height. Smaller sizes create subtle, minimalist transitions. Larger sizes produce bold, prominent brand statements. Consider viewing distance and device sizes when selecting. Test across desktop and mobile for optimal visibility. Square logos work best, rectangular logos may crop. Balance between visibility and elegance.
Default: 200px (Range: 100-400px)
Animation
Transition Duration
Number (milliseconds)
Total time logo remains visible during page transition. Shorter durations create snappy, efficient transitions. Longer durations allow more pulse cycles and reduce perceived loading time. Balance between showing transition and actual page load speed. Too short feels abrupt. Too long frustrates users. Coordinate with expected page load times for seamless experience.
Default: 2000ms (Range: 1000-5000ms)
Pulse Duration
Number (seconds)
Duration of single pulse cycle from normal to scaled and back. Faster pulses create energetic, dynamic feel. Slower pulses produce calm, elegant motion. Multiple pulses occur during total transition duration. Pulse provides visual feedback indicating active loading. Consider brand personality when selecting speed. Medical or corporate brands prefer slower pulses. Youth or tech brands suit faster rhythms.
Default: 0.8s (Range: 0.4-2s)
Scale Factor
Decimal multiplier
Maximum size logo reaches at pulse peak relative to normal size. Lower values create subtle, gentle pulsing. Higher values produce dramatic, attention-grabbing motion. Affects perceived energy and brand personality. Conservative brands use 1.05-1.15. Bold brands use 1.2-1.3. Combine with pulse duration for desired effect. Larger scale factors require more visual space around logo.
Default: 1.1x (Range: 1.05-1.3x)
Fade Duration
Number (seconds)
Speed of transition container appearing and disappearing. Controls opacity fade at start and end of sequence. Shorter fades feel instant and direct. Longer fades create smooth, gentle transitions. Fade occurs before pulse starts and after pulse completes. Coordinate with pulse duration for cohesive timing. Faster fades work for frequent navigation. Slower fades suit occasional transitions.
Default: 0.3s (Range: 0.1-0.8s)
Background
Background Color
Color picker
Color of full-screen overlay behind pulsing logo. White creates clean, professional appearance. Black produces dramatic, elegant look. Brand colors reinforce identity and recognition. Choose colors matching logo for cohesive design. Consider contrast with logo for visibility. Light backgrounds suit colorful logos. Dark backgrounds work with light or colorful logos. Opacity adjusts color intensity separately.
Default: White (#ffffff)
Background Opacity
Number (0.1-1)
Transparency level of background overlay during transition. Higher values create solid, opaque backgrounds completely hiding previous page. Lower values produce translucent effects showing subtle content behind. Full opacity (1.0) provides clean slate for logo display. Partial opacity (0.5-0.8) maintains slight connection to previous page. Very low opacity (0.1-0.3) creates ghost-like effect. Balance between focus and context.
Default: 0.9 (Range: 0.1-1.0)
Performance & Usage
This transition uses CSS animations and transforms for smooth GPU-accelerated rendering. Lightweight implementation with minimal performance impact. Automatically intercepts all internal link clicks for consistent site-wide transitions. Logo preloads on page load to prevent delay. Pulse animation uses efficient keyframes animation. Works seamlessly across all modern browsers and devices. Add to header or footer template for global availability. Only one transition element needed per site. Perfect for establishing brand presence during navigation.
