Custom Coding for Brionys Website - To reuse
Parralex Wording
‘listen’ pause’ etc etc - each time you want to create a new section you have to give it a clean anchor name such as ‘pause’ listen etc etc then add this code to custom code and code injector run it through chat gpt first to get it to change the name markers first
CSS
/* ==================================================
BRIONY LISTEN PARALLAX SECTION
================================================== */
#listen-parallax-marker {
display: none;
}
/* The section selected by the JavaScript */
section.listen-parallax-section {
position: relative;
min-height: 100vh;
overflow: hidden;
}
/* Keep the content layer above the background */
section.listen-parallax-section .content-wrapper {
position: relative;
z-index: 2;
}
/* The Listen image block */
section.listen-parallax-section .listen-parallax-image {
position: relative;
z-index: 3;
will-change: transform, opacity;
transform: translate3d(0, 130px, 0);
opacity: 0;
pointer-events: none;
}
/* Make the PNG responsive */
section.listen-parallax-section .listen-parallax-image img {
display: block;
width: 100%;
height: auto;
}
/* Tablet and mobile */
@media screen and (max-width: 767px) {
section.listen-parallax-section {
min-height: 85vh;
}
section.listen-parallax-section .listen-parallax-image {
transform: translate3d(0, 70px, 0);
}
}
/* Respect visitors who reduce motion */
@media (prefers-reduced-motion: reduce) {
section.listen-parallax-section .listen-parallax-image {
transform: none !important;
opacity: 1 !important;
}
}
Footer Code Injection (JavaScript)
<!-- =================================================
BRIONY LISTEN PARALLAX SECTION
================================================= -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const marker = document.getElementById("listen-parallax-marker");
if (!marker) return;
const section = marker.closest("section");
if (!section) return;
section.classList.add("listen-parallax-section");
const imageBlock = section.querySelector(".sqs-block-image");
if (!imageBlock) return;
imageBlock.classList.add("listen-parallax-image");
let ticking = false;
function updateListenParallax() {
const rect = section.getBoundingClientRect();
const viewportHeight = window.innerHeight;
/*
Progress:
0 when the section first enters the screen
1 when the section has nearly passed
*/
const totalDistance = viewportHeight + rect.height;
const travelled = viewportHeight - rect.top;
const progress =
Math.min(Math.max(travelled / totalDistance, 0), 1);
/*
Move from approximately 150px below
to approximately 220px above.
*/
const startY = 150;
const endY = -220;
const translateY =
startY + (endY - startY) * progress;
/*
Fade in during the earlier part
of the scroll.
*/
const opacity =
Math.min(Math.max(progress * 3, 0), 1);
imageBlock.style.transform =
"translate3d(0, " + translateY + "px, 0)";
imageBlock.style.opacity =
opacity.toString();
ticking = false;
}
function requestUpdate() {
if (!ticking) {
window.requestAnimationFrame(updateListenParallax);
ticking = true;
}
}
updateListenParallax();
window.addEventListener(
"scroll",
requestUpdate,
{ passive: true }
);
window.addEventListener(
"resize",
requestUpdate
);
});
</script>
<!-- =================================================
END BRIONY LISTEN PARALLAX SECTION
================================================= -->