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>Transition Page 007 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"] {
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 {
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;
}
.TransitionPage007-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
contain: strict;
isolation: isolate;
}
.TransitionPage007-container.TransitionPage007-active {
visibility: visible;
}
.TransitionPage007-blur-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
}
.TransitionPage007-phrase-container {
position: relative;
z-index: 1;
width: 100%;
text-align: center;
overflow: visible;
}
.TransitionPage007-phrase {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 48px;
color: white;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.TransitionPage007-phrase.active {
opacity: 1;
transform: translateY(0);
}
.TransitionPage007-fade-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
transition: opacity 0.5s ease;
z-index: 2;
}
@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;
}
.TransitionPage007-phrase {
font-size: 36px;
}
}
@media (max-width: 480px) {
.TransitionPage007-phrase {
font-size: 24px;
}
}
@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">Transition Page 007</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">Transition Page 007</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 sequential phrase 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 engaging phrase 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 phrase transition effect</div>
<div class="preview-controls">
<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="TransitionPage007-container" id="previewTransitionContainer">
<div class="TransitionPage007-blur-background" id="previewBlurBackground"></div>
<div class="TransitionPage007-phrase-container">
<div class="TransitionPage007-phrase" id="previewPhrase1">Ready for change?</div>
<div class="TransitionPage007-phrase" id="previewPhrase2">GO!</div>
</div>
<div class="TransitionPage007-fade-overlay" id="previewFadeOverlay"></div>
</div>
</div>
</section>
<section class="controls-section">
<div class="card">
<div class="card-heading">
Phrase Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-phrases" title="Reset Phrase Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
First Phrase
<span class="help-tooltip" title="The first phrase displayed during transition">ℹ</span>
</span>
</div>
<input type="text" id="phrase1" value="Ready for change?" placeholder="Enter first phrase">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Second Phrase
<span class="help-tooltip" title="The second phrase displayed during transition">ℹ</span>
</span>
</div>
<input type="text" id="phrase2" value="GO!" placeholder="Enter second phrase">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Font Size
<span class="help-tooltip" title="Size of the phrase text">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="font-size-value">48</span>px</span>
<button class="reset-btn" onclick="resetParameter('font-size', 48)">↺</button>
</div>
</div>
<input type="range" id="font-size" min="24" max="72" step="2" value="48">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">Text Color</span>
</div>
<div class="color-list">
<div class="color-row">
<div class="color-picker-container" style="--selected-color: #ffffff;">
<input type="color" id="text-color" value="#ffffff">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="text-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="text-color-hsl" placeholder="hsl(0, 0%, 100%)">
</div>
</div>
</div>
</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 Color</span>
</div>
<div class="color-list">
<div class="color-row">
<div class="color-picker-container" style="--selected-color: #000000;">
<input type="color" id="bg-color" value="#000000">
</div>
<div class="color-input-group">
<span class="color-label">HEX</span>
<input type="text" class="color-input hex-input" id="bg-color-hex" value="#000000" placeholder="#000000">
</div>
<div class="color-input-group">
<span class="color-label">HSL</span>
<input type="text" class="color-input hsl-input" id="bg-color-hsl" placeholder="hsl(0, 0%, 0%)">
</div>
</div>
</div>
</div>
<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="bg-opacity-value">0.8</span></span>
<button class="reset-btn" onclick="resetParameter('bg-opacity', 0.8)">↺</button>
</div>
</div>
<input type="range" id="bg-opacity" min="0.3" max="1" step="0.05" value="0.8">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Blur Intensity
<span class="help-tooltip" title="Blur effect intensity for the background">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="blur-intensity-value">10</span>px</span>
<button class="reset-btn" onclick="resetParameter('blur-intensity', 10)">↺</button>
</div>
</div>
<input type="range" id="blur-intensity" min="0" max="25" step="1" value="10">
</div>
</div>
</div>
<div class="card">
<div class="card-heading">
Timing Settings
<div class="card-actions">
<button class="card-action-btn" id="reset-timing" title="Reset Timing Settings">↺</button>
</div>
</div>
<div class="card-content">
<div class="control-group">
<div class="control-label">
<span class="label-text">
Phrase Display Duration
<span class="help-tooltip" title="How long each phrase is displayed">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="phrase-duration-value">1.5</span>s</span>
<button class="reset-btn" onclick="resetParameter('phrase-duration', 1.5)">↺</button>
</div>
</div>
<input type="range" id="phrase-duration" min="0.5" max="3" step="0.1" value="1.5">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Phrase Animation Speed
<span class="help-tooltip" title="Speed of phrase fade in/out animation">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="animation-speed-value">0.5</span>s</span>
<button class="reset-btn" onclick="resetParameter('animation-speed', 0.5)">↺</button>
</div>
</div>
<input type="range" id="animation-speed" min="0.2" max="1" step="0.1" value="0.5">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Final Fade Duration
<span class="help-tooltip" title="Duration of the final fade to black">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="fade-duration-value">0.5</span>s</span>
<button class="reset-btn" onclick="resetParameter('fade-duration', 0.5)">↺</button>
</div>
</div>
<input type="range" id="fade-duration" min="0.2" max="1.5" step="0.1" value="0.5">
</div>
<div class="control-group">
<div class="control-label">
<span class="label-text">
Last Phrase Hold Time
<span class="help-tooltip" title="How long to hold the last phrase before fading">ℹ</span>
</span>
<div class="value-display">
<span class="value-text"><span id="hold-time-value">1.0</span>s</span>
<button class="reset-btn" onclick="resetParameter('hold-time', 1.0)">↺</button>
</div>
</div>
<input type="range" id="hold-time" min="0.5" max="2" step="0.1" value="1.0">
</div>
</div>
</div>
</section>
</div>
</div>
<div class="notification" id="notification"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let transitionConfig = {
phrase1: "Ready for change?",
phrase2: "GO!",
textColor: "#ffffff",
fontSize: 48,
bgColor: "#000000",
bgOpacity: 0.8,
blurIntensity: 10,
phraseDuration: 1.5,
animationSpeed: 0.5,
fadeDuration: 0.5,
holdTime: 1.0
};
const defaultConfig = { ...transitionConfig };
function updateConfig() {
updatePreviewStyles();
saveConfiguration();
}
function initializePreview() {
updateConfig();
}
function updatePreviewStyles() {
const rgbColor = hexToRgb(transitionConfig.bgColor);
const blurBackground = document.getElementById('previewBlurBackground');
const phrase1 = document.getElementById('previewPhrase1');
const phrase2 = document.getElementById('previewPhrase2');
const fadeOverlay = document.getElementById('previewFadeOverlay');
if (blurBackground) {
blurBackground.style.backgroundColor = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${transitionConfig.bgOpacity})`;
blurBackground.style.backdropFilter = `blur(${transitionConfig.blurIntensity}px)`;
}
if (phrase1) {
phrase1.textContent = transitionConfig.phrase1;
phrase1.style.color = transitionConfig.textColor;
phrase1.style.fontSize = `${transitionConfig.fontSize}px`;
phrase1.style.transition = `opacity ${transitionConfig.animationSpeed}s ease, transform ${transitionConfig.animationSpeed}s ease`;
}
if (phrase2) {
phrase2.textContent = transitionConfig.phrase2;
phrase2.style.color = transitionConfig.textColor;
phrase2.style.fontSize = `${transitionConfig.fontSize}px`;
phrase2.style.transition = `opacity ${transitionConfig.animationSpeed}s ease, transform ${transitionConfig.animationSpeed}s ease`;
}
if (fadeOverlay) {
fadeOverlay.style.transition = `opacity ${transitionConfig.fadeDuration}s ease`;
}
}
function testTransition() {
const container = document.getElementById('previewTransitionContainer');
const phrase1 = document.getElementById('previewPhrase1');
const phrase2 = document.getElementById('previewPhrase2');
const fadeOverlay = document.getElementById('previewFadeOverlay');
if (!container || !phrase1 || !phrase2 || !fadeOverlay) return;
container.classList.remove('TransitionPage007-active');
phrase1.classList.remove('active');
phrase2.classList.remove('active');
fadeOverlay.style.opacity = '0';
setTimeout(() => {
container.classList.add('TransitionPage007-active');
const phrases = [phrase1, phrase2];
let currentIndex = 0;
const showNextPhrase = () => {
if (currentIndex > 0) {
phrases[currentIndex - 1].classList.remove('active');
}
if (currentIndex < phrases.length) {
phrases[currentIndex].classList.add('active');
currentIndex++;
const delay = currentIndex === phrases.length
? transitionConfig.holdTime * 1000
: transitionConfig.phraseDuration * 1000;
setTimeout(
currentIndex === phrases.length ? startFadeOut : showNextPhrase,
delay
);
}
};
const startFadeOut = () => {
fadeOverlay.style.opacity = '1';
setTimeout(() => {
container.classList.remove('TransitionPage007-active');
phrase1.classList.remove('active');
phrase2.classList.remove('active');
fadeOverlay.style.opacity = '0';
}, transitionConfig.fadeDuration * 1000 + 300);
};
showNextPhrase();
}, 100);
}
function generateJavaScriptCode() {
const rgbColor = hexToRgb(transitionConfig.bgColor);
return `<div id="TransitionPage007Container" class="TransitionPage007-container">
<div class="TransitionPage007-blur-background"></div>
<div class="TransitionPage007-phrase-container">
<div class="TransitionPage007-phrase">${transitionConfig.phrase1}</div>
<div class="TransitionPage007-phrase">${transitionConfig.phrase2}</div>
</div>
<div class="TransitionPage007-fade-overlay"></div>
<iframe id="TransitionPage007Frame" class="TransitionPage007-frame"></iframe>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
.TransitionPage007-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2147483647;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
.TransitionPage007-blur-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${transitionConfig.bgOpacity});
backdrop-filter: blur(${transitionConfig.blurIntensity}px);
}
.TransitionPage007-phrase-container {
position: relative;
z-index: 1;
width: 100%;
text-align: center;
overflow: visible;
}
.TransitionPage007-phrase {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: ${transitionConfig.fontSize}px;
color: ${transitionConfig.textColor};
opacity: 0;
transform: translateY(20px);
transition: opacity ${transitionConfig.animationSpeed}s ease, transform ${transitionConfig.animationSpeed}s ease;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.TransitionPage007-phrase.active {
opacity: 1;
transform: translateY(0);
}
.TransitionPage007-fade-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0;
transition: opacity ${transitionConfig.fadeDuration}s ease;
z-index: 2;
}
.TransitionPage007-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 3;
}
.TransitionPage007-frame.loaded {
opacity: 1;
}
@media (max-width: 768px) {
.TransitionPage007-phrase {
font-size: ${Math.round(transitionConfig.fontSize * 0.75)}px;
}
}
@media (max-width: 480px) {
.TransitionPage007-phrase {
font-size: ${Math.round(transitionConfig.fontSize * 0.5)}px;
}
}
</style>
<script>
(function() {
'use strict';
const TransitionPage007 = {
container: null,
phrases: null,
fadeOverlay: null,
frame: null,
isTransitioning: false,
init() {
this.container = document.getElementById('TransitionPage007Container');
this.phrases = this.container.querySelectorAll('.TransitionPage007-phrase');
this.fadeOverlay = this.container.querySelector('.TransitionPage007-fade-overlay');
this.frame = this.container.querySelector('.TransitionPage007-frame');
if (!this.container || this.phrases.length === 0 || !this.fadeOverlay || !this.frame) {
return;
}
document.body.addEventListener('click', this.handleClick.bind(this));
},
startTransition(url) {
if (this.isTransitioning) return;
this.isTransitioning = true;
this.container.style.visibility = 'visible';
this.frame.src = url;
this.animatePhrases()
.then(() => this.fadeOut())
.then(() => this.completeTransition());
},
animatePhrases() {
return new Promise(resolve => {
let delay = 0;
this.phrases.forEach((phrase, index) => {
setTimeout(() => {
phrase.classList.add('active');
if (index > 0) {
this.phrases[index - 1].classList.remove('active');
}
if (index === this.phrases.length - 1) {
setTimeout(resolve, ${transitionConfig.holdTime * 1000});
}
}, delay);
delay += ${transitionConfig.phraseDuration * 1000};
});
});
},
fadeOut() {
return new Promise(resolve => {
this.fadeOverlay.style.opacity = '1';
setTimeout(resolve, ${transitionConfig.fadeDuration * 1000});
});
},
completeTransition() {
const targetUrl = this.frame.src;
window.location.replace(targetUrl);
},
cleanup() {
this.container.style.visibility = 'hidden';
this.phrases.forEach(phrase => phrase.classList.remove('active'));
this.fadeOverlay.style.opacity = '0';
this.frame.src = 'about:blank';
this.isTransitioning = false;
},
handleClick(e) {
const link = e.target.closest('a');
if (link && link.origin === window.location.origin && !link.hasAttribute('target')) {
e.preventDefault();
this.startTransition(link.href);
}
}
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', TransitionPage007.init.bind(TransitionPage007));
} else {
TransitionPage007.init();
}
})();
<\/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 updateAllInputs() {
document.getElementById('phrase1').value = transitionConfig.phrase1;
document.getElementById('phrase2').value = transitionConfig.phrase2;
document.getElementById('font-size').value = transitionConfig.fontSize;
document.getElementById('bg-opacity').value = transitionConfig.bgOpacity;
document.getElementById('blur-intensity').value = transitionConfig.blurIntensity;
document.getElementById('phrase-duration').value = transitionConfig.phraseDuration;
document.getElementById('animation-speed').value = transitionConfig.animationSpeed;
document.getElementById('fade-duration').value = transitionConfig.fadeDuration;
document.getElementById('hold-time').value = transitionConfig.holdTime;
document.getElementById('font-size-value').textContent = transitionConfig.fontSize;
document.getElementById('bg-opacity-value').textContent = transitionConfig.bgOpacity;
document.getElementById('blur-intensity-value').textContent = transitionConfig.blurIntensity;
document.getElementById('phrase-duration-value').textContent = transitionConfig.phraseDuration;
document.getElementById('animation-speed-value').textContent = transitionConfig.animationSpeed;
document.getElementById('fade-duration-value').textContent = transitionConfig.fadeDuration;
document.getElementById('hold-time-value').textContent = transitionConfig.holdTime;
updateColorInputs('text-color', transitionConfig.textColor);
updateColorInputs('bg-color', transitionConfig.bgColor);
}
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 'font-size':
transitionConfig.fontSize = defaultValue;
break;
case 'bg-opacity':
transitionConfig.bgOpacity = defaultValue;
break;
case 'blur-intensity':
transitionConfig.blurIntensity = defaultValue;
break;
case 'phrase-duration':
transitionConfig.phraseDuration = defaultValue;
break;
case 'animation-speed':
transitionConfig.animationSpeed = defaultValue;
break;
case 'fade-duration':
transitionConfig.fadeDuration = defaultValue;
break;
case 'hold-time':
transitionConfig.holdTime = 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-transitionpage007-config', JSON.stringify(transitionConfig));
} catch (e) {
}
}
function loadConfiguration() {
try {
const saved = localStorage.getItem('bricksfusion-transitionpage007-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();
});
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-phrases').addEventListener('click', () => {
transitionConfig.phrase1 = defaultConfig.phrase1;
transitionConfig.phrase2 = defaultConfig.phrase2;
transitionConfig.fontSize = defaultConfig.fontSize;
transitionConfig.textColor = defaultConfig.textColor;
document.getElementById('phrase1').value = defaultConfig.phrase1;
document.getElementById('phrase2').value = defaultConfig.phrase2;
document.getElementById('font-size').value = defaultConfig.fontSize;
document.getElementById('font-size-value').textContent = defaultConfig.fontSize;
updateColorInputs('text-color', defaultConfig.textColor);
updateConfig();
showNotification('Phrase settings reset');
});
document.getElementById('reset-background').addEventListener('click', () => {
transitionConfig.bgColor = defaultConfig.bgColor;
transitionConfig.bgOpacity = defaultConfig.bgOpacity;
transitionConfig.blurIntensity = defaultConfig.blurIntensity;
document.getElementById('bg-opacity').value = defaultConfig.bgOpacity;
document.getElementById('bg-opacity-value').textContent = defaultConfig.bgOpacity;
document.getElementById('blur-intensity').value = defaultConfig.blurIntensity;
document.getElementById('blur-intensity-value').textContent = defaultConfig.blurIntensity;
updateColorInputs('bg-color', defaultConfig.bgColor);
updateConfig();
showNotification('Background settings reset');
});
document.getElementById('reset-timing').addEventListener('click', () => {
transitionConfig.phraseDuration = defaultConfig.phraseDuration;
transitionConfig.animationSpeed = defaultConfig.animationSpeed;
transitionConfig.fadeDuration = defaultConfig.fadeDuration;
transitionConfig.holdTime = defaultConfig.holdTime;
document.getElementById('phrase-duration').value = defaultConfig.phraseDuration;
document.getElementById('phrase-duration-value').textContent = defaultConfig.phraseDuration;
document.getElementById('animation-speed').value = defaultConfig.animationSpeed;
document.getElementById('animation-speed-value').textContent = defaultConfig.animationSpeed;
document.getElementById('fade-duration').value = defaultConfig.fadeDuration;
document.getElementById('fade-duration-value').textContent = defaultConfig.fadeDuration;
document.getElementById('hold-time').value = defaultConfig.holdTime;
document.getElementById('hold-time-value').textContent = defaultConfig.holdTime;
updateConfig();
showNotification('Timing settings reset');
});
const textInputs = document.querySelectorAll('input[type="text"]');
textInputs.forEach(input => {
input.addEventListener('input', () => {
switch (input.id) {
case 'phrase1':
transitionConfig.phrase1 = input.value;
break;
case 'phrase2':
transitionConfig.phrase2 = input.value;
break;
}
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 'font-size':
transitionConfig.fontSize = parseInt(input.value);
break;
case 'bg-opacity':
transitionConfig.bgOpacity = parseFloat(input.value);
break;
case 'blur-intensity':
transitionConfig.blurIntensity = parseInt(input.value);
break;
case 'phrase-duration':
transitionConfig.phraseDuration = parseFloat(input.value);
break;
case 'animation-speed':
transitionConfig.animationSpeed = parseFloat(input.value);
break;
case 'fade-duration':
transitionConfig.fadeDuration = parseFloat(input.value);
break;
case 'hold-time':
transitionConfig.holdTime = parseFloat(input.value);
break;
}
updateConfig();
});
});
setupColorInputHandlers('text-color', 'textColor');
setupColorInputHandlers('bg-color', 'bgColor');
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 'b':
document.getElementById('preview-background-picker').click();
break;
}
}
});
loadConfiguration();
initializePreview();
setTimeout(() => {
showNotification('BricksFusion Transition Page 007 Configurator loaded!');
}, 500);
}
initializeUI();
});
</script>
</body>
</html>LIGHT
Transition 007
Sequential phrase transition effect that displays animated text messages during page navigation. Features customizable phrases, colors, timing, and blur effects. Each phrase fades in and out smoothly before proceeding to the next, creating an engaging loading experience. Perfect for storytelling or brand messaging during transitions. All parameters configurable directly in Bricks Builder without touching code.
Sequential Phrases
Click anywhere to preview the phrase transition effect.
Phrase Settings
First Phrase
Text input
First message displayed during transition sequence. Sets tone for loading experience. Can be question, statement, or brand message. Keep concise for quick reading during animation. Appears first in sequential display before second phrase.
Default: "Ready for change?"
Second Phrase
Text input
Second message in transition sequence. Typically shorter and more emphatic than first. Creates momentum toward page load completion. Works as answer or continuation of first phrase. Displayed after first phrase fades out.
Default: "GO!"
Font Size
Number (pixels)
Size of phrase text in pixels. Larger values create bold, prominent displays. Smaller values produce subtle messaging. Automatically scales down on mobile devices for optimal readability. Balance visibility with elegance.
Default: 48px (Range: 24-72px)
Text Color
Color picker
Color of phrase text. Ensure strong contrast with background for readability. Light colors recommended for dark backgrounds. Consider brand colors for consistent identity. Affects both phrases equally for cohesive appearance.
Default: White (#ffffff)
Background Settings
Background Color
Color picker
Base color of overlay background behind phrases. Provides foundation for entire transition effect. Dark colors create professional, cinematic feel. Light colors produce airy, modern aesthetic. Combined with opacity for final appearance.
Default: Black (#000000)
Background Opacity
Decimal (0-1)
Transparency level of background overlay. Lower values allow more underlying page visibility. Higher values create stronger separation from original page. Affects how much previous page shows through during transition.
Default: 0.8 (Range: 0.3-1.0)
Blur Intensity
Number (pixels)
Strength of backdrop blur effect applied to background. Higher values create more pronounced blur. Zero removes blur completely for sharp background. Uses CSS backdrop-filter for smooth, modern appearance. Enhances focus on phrases.
Default: 10px (Range: 0-25px)
Timing Settings
Phrase Display Duration
Number (seconds)
How long each phrase remains visible at full opacity. Longer durations ensure readability. Shorter creates faster, more dynamic transitions. Applies to both phrases equally. Balance reading time with user patience.
Default: 1.5s (Range: 0.5-3.0s)
Phrase Animation Speed
Number (seconds)
Duration of fade in and fade out animations for phrases. Controls smoothness of appearance and disappearance. Faster speeds create snappy transitions. Slower produces gentle, elegant motion. Affects both opacity and vertical slide animation.
Default: 0.5s (Range: 0.2-1.0s)
Final Fade Duration
Number (seconds)
Duration of final black fade overlay before page loads. Creates smooth transition to new page. Shorter values reveal page quickly. Longer produces gradual, cinematic reveal. Final step after all phrases complete.
Default: 0.5s (Range: 0.2-1.5s)
Last Phrase Hold Time
Number (seconds)
Additional time to hold final phrase before starting fade to black. Gives emphasis to concluding message. Longer holds create anticipation. Shorter moves quickly to page reveal. Only applies to last phrase in sequence.
Default: 1.0s (Range: 0.5-2.0s)
Performance & Usage
This transition uses CSS transforms and backdrop-filter for smooth GPU-accelerated animations. Features sequential phrase display system with precise timing control. Automatically loads new page in iframe during animation to minimize wait time. Intercepts all internal link clicks for consistent site-wide transitions. Includes responsive font sizing for mobile devices. Uses Inter font family for clean, professional typography. Lightweight implementation with minimal performance impact. Add to header or footer template for global availability. Only one transition element needed per site.
Ready for change?
GO!