This custom code is completely free to use, but please note it does not include 1-on-1 technical support. If you need a bespoke, done-for-you solution to customize your Shopify store, my team is here to help! Head to my channel homepage and use the link in the trailer to reach out.
{% comment %}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{% endcomment %}
{%- liquid
assign onhow_studio_wrapper_class = 'onhow-studio-section-wrapper-' | append: section.settings.onhow_studio_core_logic
assign onhow_studio_section_id = 'onhow-studio-cinematic-scroll-' | append: section.id
assign onhow_studio_height = section.settings.onhow_studio_cinematic_scroll_height
assign onhow_studio_heading = section.settings.onhow_studio_cinematic_scroll_heading
assign onhow_studio_subheading = section.settings.onhow_studio_cinematic_scroll_subheading
assign onhow_studio_heading_tag = section.settings.onhow_studio_cinematic_scroll_heading_tag
assign onhow_studio_text_align = section.settings.onhow_studio_cinematic_scroll_text_alignment
assign onhow_studio_text_pos = section.settings.onhow_studio_cinematic_scroll_text_position
assign onhow_studio_heading_size = section.settings.onhow_studio_cinematic_scroll_heading_size
assign onhow_studio_subheading_size = section.settings.onhow_studio_cinematic_scroll_subheading_size
assign onhow_studio_letter_spacing_raw = section.settings.onhow_studio_cinematic_scroll_letter_spacing
assign onhow_studio_letter_spacing = onhow_studio_letter_spacing_raw | times: 1.0 | divided_by: 100.0
assign onhow_studio_text_transform = section.settings.onhow_studio_cinematic_scroll_text_transform
assign onhow_studio_heading_color = section.settings.onhow_studio_cinematic_scroll_heading_color
assign onhow_studio_vignette = section.settings.onhow_studio_cinematic_scroll_vignette
assign onhow_studio_vignette_intensity = section.settings.onhow_studio_cinematic_scroll_vignette_intensity
assign onhow_studio_grain = section.settings.onhow_studio_cinematic_scroll_grain
assign onhow_studio_grain_opacity = section.settings.onhow_studio_cinematic_scroll_grain_opacity
assign onhow_studio_overlay_blend = section.settings.onhow_studio_cinematic_scroll_overlay_blend
assign onhow_studio_animation_style = section.settings.onhow_studio_cinematic_scroll_animation_style
assign onhow_studio_scroll_distance = section.settings.onhow_studio_cinematic_scroll_scroll_distance
assign onhow_studio_overlay_max_scale_raw = section.settings.onhow_studio_cinematic_scroll_overlay_max_scale
assign onhow_studio_overlay_max_scale = onhow_studio_overlay_max_scale_raw | times: 1.0 | divided_by: 10.0
assign onhow_studio_bg_max_scale_raw = section.settings.onhow_studio_cinematic_scroll_bg_max_scale
assign onhow_studio_bg_max_scale = onhow_studio_bg_max_scale_raw | times: 1.0 | divided_by: 10.0
assign onhow_studio_bg_image = section.settings.onhow_studio_cinematic_scroll_bg_image
assign onhow_studio_overlay_image = section.settings.onhow_studio_cinematic_scroll_overlay_image
assign onhow_studio_grain_decimal = onhow_studio_grain_opacity | times: 1.0 | divided_by: 100.0
assign onhow_studio_vignette_decimal = onhow_studio_vignette_intensity | times: 1.0 | divided_by: 100.0
case onhow_studio_text_pos
when 'top-left'
assign onhow_studio_justify = 'flex-start'
assign onhow_studio_align_items = 'flex-start'
when 'top-center'
assign onhow_studio_justify = 'flex-start'
assign onhow_studio_align_items = 'center'
when 'center'
assign onhow_studio_justify = 'center'
assign onhow_studio_align_items = 'center'
when 'bottom-left'
assign onhow_studio_justify = 'flex-end'
assign onhow_studio_align_items = 'flex-start'
when 'bottom-center'
assign onhow_studio_justify = 'flex-end'
assign onhow_studio_align_items = 'center'
endcase
assign onhow_studio_cta_block = section.blocks | where: 'type', 'cta_button' | first
-%}
{%- style -%}
#shopify-section-{{ section.id }} .{{ onhow_studio_wrapper_class }} * {
box-sizing: border-box;
}
#shopify-section-{{ section.id }} .{{ onhow_studio_wrapper_class }} p,
#shopify-section-{{ section.id }} .{{ onhow_studio_wrapper_class }} h1,
#shopify-section-{{ section.id }} .{{ onhow_studio_wrapper_class }} h2,
#shopify-section-{{ section.id }} .{{ onhow_studio_wrapper_class }} h3,
#shopify-section-{{ section.id }} .{{ onhow_studio_wrapper_class }} ul {
margin: 0;
padding: 0;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll {
--onhow-studio-cinematic-scroll-height: {{ onhow_studio_height }};
--onhow-studio-cinematic-scroll-heading-size: {{ onhow_studio_heading_size }}px;
--onhow-studio-cinematic-scroll-subheading-size: {{ onhow_studio_subheading_size }}px;
--onhow-studio-cinematic-scroll-letter-spacing: {{ onhow_studio_letter_spacing }}em;
--onhow-studio-cinematic-scroll-text-transform: {{ onhow_studio_text_transform }};
--onhow-studio-cinematic-scroll-heading-color: {{ onhow_studio_heading_color }};
--onhow-studio-cinematic-scroll-vignette-intensity: {{ onhow_studio_vignette_decimal }};
--onhow-studio-cinematic-scroll-grain-opacity: {{ onhow_studio_grain_decimal }};
--onhow-studio-cinematic-scroll-overlay-blend: {{ onhow_studio_overlay_blend }};
position: relative;
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 0;
overflow-x: clip;
overflow-y: visible;
color: var(--onhow-studio-text);
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__pin-wrapper {
position: sticky;
top: 0;
width: 100%;
height: var(--onhow-studio-cinematic-scroll-height);
overflow: hidden;
background: var(--onhow-studio-bg);
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__spacer {
width: 100%;
height: 0;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__bg {
z-index: 1;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__bg img,
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__bg svg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__vignette {
z-index: 2;
pointer-events: none;
background: radial-gradient(
ellipse at center,
transparent 30%,
rgba(0, 0, 0, var(--onhow-studio-cinematic-scroll-vignette-intensity)) 100%
);
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__overlay {
z-index: 3;
mix-blend-mode: var(--onhow-studio-cinematic-scroll-overlay-blend);
opacity: 0;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__overlay img,
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__overlay svg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__grain {
z-index: 4;
pointer-events: none;
opacity: var(--onhow-studio-cinematic-scroll-grain-opacity);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 128px 128px;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__content {
z-index: 5;
display: flex;
flex-direction: column;
justify-content: {{ onhow_studio_justify }};
align-items: {{ onhow_studio_align_items }};
text-align: {{ onhow_studio_text_align }};
padding: clamp(2rem, 6vw, 5rem);
pointer-events: none;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__heading {
font-family: inherit;
font-size: var(--onhow-studio-cinematic-scroll-heading-size);
font-weight: 300;
letter-spacing: var(--onhow-studio-cinematic-scroll-letter-spacing);
text-transform: var(--onhow-studio-cinematic-scroll-text-transform);
color: var(--onhow-studio-cinematic-scroll-heading-color);
line-height: 1.1;
opacity: 0;
transform: translateY(20px);
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__subheading {
font-family: inherit;
font-size: var(--onhow-studio-cinematic-scroll-subheading-size);
font-weight: 300;
letter-spacing: 0.05em;
color: var(--onhow-studio-cinematic-scroll-heading-color);
line-height: 1.5;
margin-top: 1rem;
opacity: 0;
transform: translateY(20px);
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
font-family: inherit;
text-decoration: none;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
pointer-events: auto;
opacity: 0;
transform: translateY(10px);
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__cta--small {
font-size: 11px;
padding: 10px 24px;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__cta--medium {
font-size: 13px;
padding: 14px 36px;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__cta--large {
font-size: 15px;
padding: 18px 48px;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__cta--solid {
border: 1px solid transparent;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__cta--solid:hover {
opacity: 0.85;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__cta--outline {
background: transparent;
border: 1px solid currentColor;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__cta--outline:hover {
background: var(--onhow-studio-cinematic-scroll-cta-color);
color: var(--onhow-studio-cinematic-scroll-cta-bg) !important;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__cta--underline {
background: transparent;
border: none;
border-bottom: 1px solid currentColor;
padding-inline: 0;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__cta--underline:hover {
opacity: 0.7;
}
@media (max-width: 1366px) {
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll {
--onhow-studio-cinematic-scroll-heading-size: {{ onhow_studio_heading_size | times: 0.85 | round }}px;
--onhow-studio-cinematic-scroll-subheading-size: {{ onhow_studio_subheading_size | times: 0.9 | round }}px;
}
}
@media (max-width: 1024px) {
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll {
--onhow-studio-cinematic-scroll-heading-size: {{ onhow_studio_heading_size | times: 0.7 | round }}px;
--onhow-studio-cinematic-scroll-subheading-size: {{ onhow_studio_subheading_size | times: 0.8 | round }}px;
}
}
@media (max-width: 768px) {
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll {
--onhow-studio-cinematic-scroll-heading-size: {{ onhow_studio_heading_size | times: 0.55 | round }}px;
--onhow-studio-cinematic-scroll-subheading-size: {{ onhow_studio_subheading_size | times: 0.7 | round }}px;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__pin-wrapper {
position: relative;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__spacer {
display: none;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__overlay {
opacity: 0.7;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__heading,
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__subheading {
opacity: 1;
transform: none;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__cta {
opacity: 1;
transform: none;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll__content {
justify-content: center;
align-items: center;
text-align: center;
}
@keyframes onhow-studio-cinematic-scroll-mobile-fade-{{ section.id }} {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll--mobile-visible .onhow-studio-cinematic-scroll__heading {
animation: onhow-studio-cinematic-scroll-mobile-fade-{{ section.id }} 0.8s ease forwards;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll--mobile-visible .onhow-studio-cinematic-scroll__subheading {
animation: onhow-studio-cinematic-scroll-mobile-fade-{{ section.id }} 0.8s ease 0.2s forwards;
}
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll--mobile-visible .onhow-studio-cinematic-scroll__cta {
animation: onhow-studio-cinematic-scroll-mobile-fade-{{ section.id }} 0.8s ease 0.4s forwards;
}
}
@media (max-width: 496px) {
#shopify-section-{{ section.id }} .onhow-studio-cinematic-scroll {
--onhow-studio-cinematic-scroll-heading-size: {{ onhow_studio_heading_size | times: 0.42 | round }}px;
--onhow-studio-cinematic-scroll-subheading-size: {{ onhow_studio_subheading_size | times: 0.6 | round }}px;
}
}
{%- endstyle -%}
<div
id="{{ onhow_studio_section_id }}"
class="{{ onhow_studio_wrapper_class }} onhow-studio-cinematic-scroll"
data-section-id="{{ section.id }}"
data-section-type="onhow-cinematic-scroll"
data-animation-style="{{ onhow_studio_animation_style }}"
data-scroll-distance="{{ onhow_studio_scroll_distance }}"
data-overlay-max-scale="{{ onhow_studio_overlay_max_scale }}"
data-bg-max-scale="{{ onhow_studio_bg_max_scale }}"
style="
--onhow-studio-bg: {{ section.settings.onhow_studio_bg_color }};
--onhow-studio-text: {{ section.settings.onhow_studio_text_color }};
{%- if onhow_studio_cta_block -%}
--onhow-studio-cinematic-scroll-cta-color: {{ onhow_studio_cta_block.settings.onhow_studio_cinematic_scroll_cta_color }};
--onhow-studio-cinematic-scroll-cta-bg: {{ onhow_studio_cta_block.settings.onhow_studio_cinematic_scroll_cta_bg_color }};
{%- endif -%}
"
>
<div class="onhow-studio-cinematic-scroll__pin-wrapper">
<div class="onhow-studio-cinematic-scroll__layer onhow-studio-cinematic-scroll__bg">
{%- if onhow_studio_bg_image != blank -%}
{{ onhow_studio_bg_image | image_url: width: 2000 | image_tag: loading: 'lazy', class: 'onhow-studio-cinematic-scroll__bg-img' }}
{%- else -%}
{{ 'lifestyle-1' | placeholder_svg_tag: 'onhow-studio-cinematic-scroll__bg-img' }}
{%- endif -%}
</div>
{%- if onhow_studio_vignette -%}
<div class="onhow-studio-cinematic-scroll__layer onhow-studio-cinematic-scroll__vignette"></div>
{%- endif -%}
<div class="onhow-studio-cinematic-scroll__layer onhow-studio-cinematic-scroll__overlay">
{%- if onhow_studio_overlay_image != blank -%}
{{ onhow_studio_overlay_image | image_url: width: 2000 | image_tag: loading: 'lazy', class: 'onhow-studio-cinematic-scroll__overlay-img' }}
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'onhow-studio-cinematic-scroll__overlay-img' }}
{%- endif -%}
</div>
{%- if onhow_studio_grain -%}
<div class="onhow-studio-cinematic-scroll__layer onhow-studio-cinematic-scroll__grain"></div>
{%- endif -%}
<div class="onhow-studio-cinematic-scroll__layer onhow-studio-cinematic-scroll__content">
<{{ onhow_studio_heading_tag }} class="onhow-studio-cinematic-scroll__heading">
{{- onhow_studio_heading -}}
</{{ onhow_studio_heading_tag }}>
{%- if onhow_studio_subheading != blank -%}
<p class="onhow-studio-cinematic-scroll__subheading">
{{- onhow_studio_subheading -}}
</p>
{%- endif -%}
{%- if onhow_studio_cta_block -%}
<a
href="{{ onhow_studio_cta_block.settings.onhow_studio_cinematic_scroll_cta_url }}"
class="onhow-studio-cinematic-scroll__cta onhow-studio-cinematic-scroll__cta--{{ onhow_studio_cta_block.settings.onhow_studio_cinematic_scroll_cta_style }} onhow-studio-cinematic-scroll__cta--{{ onhow_studio_cta_block.settings.onhow_studio_cinematic_scroll_cta_size }}"
style="
color: {{ onhow_studio_cta_block.settings.onhow_studio_cinematic_scroll_cta_color }};
background-color: {{ onhow_studio_cta_block.settings.onhow_studio_cinematic_scroll_cta_bg_color }};
"
{{ onhow_studio_cta_block.shopify_attributes }}
>
{{- onhow_studio_cta_block.settings.onhow_studio_cinematic_scroll_cta_text -}}
</a>
{%- endif -%}
</div>
</div>
<div class="onhow-studio-cinematic-scroll__spacer"></div>
</div>
<script>
(function() {
const onhowStudioCredit = atob("RGVzaWduZWQgYnkgT05IT1cgU3R1ZGlvIC0gU3Vic2NyaWJlIQ==");
console.log(`%c ${onhowStudioCredit}`, 'background: #222; color: #00ff00; padding: 4px; border-radius: 4px;');
function onhowLoadScript(src, cb) {
var existing = document.querySelector('script[src="' + src + '"]');
if (existing) { cb(); return; }
var s = document.createElement('script');
s.src = src;
s.onload = cb;
document.head.appendChild(s);
}
function onhowEnsureGsap(cb) {
if (window.gsap) { cb(); return; }
onhowLoadScript('https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js', cb);
}
function onhowInitCinematicScroll(sectionEl) {
var sectionId = sectionEl.dataset.sectionId;
var instanceKey = 'onhowCinematicScroll_' + sectionId;
if (window[instanceKey]) return;
var isMobile = window.matchMedia('(max-width: 768px)').matches;
if (isMobile) {
onhowInitMobileFallback(sectionEl);
window[instanceKey] = { mobile: true };
return;
}
onhowEnsureGsap(function() {
onhowBuildTimeline(sectionEl, sectionId, instanceKey);
});
}
function onhowInitMobileFallback(sectionEl) {
var wrapper = sectionEl.querySelector('.onhow-studio-cinematic-scroll');
if (!wrapper) wrapper = sectionEl;
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
wrapper.classList.add('onhow-studio-cinematic-scroll--mobile-visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2 });
observer.observe(wrapper);
}
function onhowBuildTimeline(sectionEl, sectionId, instanceKey) {
var spacer = sectionEl.querySelector('.onhow-studio-cinematic-scroll__spacer');
var stickyEl = sectionEl.querySelector('.onhow-studio-cinematic-scroll__pin-wrapper');
var heading = sectionEl.querySelector('.onhow-studio-cinematic-scroll__heading');
var subheading = sectionEl.querySelector('.onhow-studio-cinematic-scroll__subheading');
var overlay = sectionEl.querySelector('.onhow-studio-cinematic-scroll__overlay');
var overlayMedia = overlay ? overlay.querySelector('img, svg') : null;
var bgMedia = sectionEl.querySelector('.onhow-studio-cinematic-scroll__bg img, .onhow-studio-cinematic-scroll__bg svg');
var cta = sectionEl.querySelector('.onhow-studio-cinematic-scroll__cta');
if (!spacer || !stickyEl) return;
var animStyle = sectionEl.dataset.animationStyle || 'zoom-through';
var scrollDist = parseInt(sectionEl.dataset.scrollDistance, 10) || 150;
var overlayScale = parseFloat(sectionEl.dataset.overlayMaxScale) || 2.0;
var bgScale = parseFloat(sectionEl.dataset.bgMaxScale) || 1.4;
var scrollHeight = Math.round(window.innerHeight * (scrollDist / 100));
spacer.style.height = scrollHeight + 'px';
var animationFrameId = null;
var isIntersecting = false;
var sectionTop = 0;
function computeSectionTop() {
sectionTop = sectionEl.getBoundingClientRect().top + window.pageYOffset;
}
computeSectionTop();
var tl = gsap.timeline({ paused: true });
tl.to(heading, {
opacity: 1,
y: 0,
duration: 0.15,
ease: 'power2.out'
}, 0);
if (subheading) {
tl.to(subheading, {
opacity: 1,
y: 0,
duration: 0.15,
ease: 'power2.out'
}, 0.05);
}
if (overlay) {
if (animStyle === 'fade-reveal') {
overlay.style.opacity = '1';
}
tl.to(overlay, {
opacity: animStyle === 'fade-reveal' ? 0 : 1,
duration: 0.2,
ease: 'power1.inOut'
}, 0.2);
}
if (animStyle === 'zoom-through') {
if (overlayMedia) {
tl.to(overlayMedia, {
scale: overlayScale,
z: 250,
transformOrigin: 'center center',
duration: 0.45,
ease: 'power1.inOut'
}, 0.4);
}
if (bgMedia) {
tl.to(bgMedia, {
scale: bgScale,
transformOrigin: 'center center',
duration: 0.45,
ease: 'power1.inOut'
}, 0.4);
}
} else if (animStyle === 'parallax-drift') {
if (overlayMedia) {
tl.to(overlayMedia, {
xPercent: 8,
scale: 1.1,
duration: 0.45,
ease: 'none'
}, 0.4);
}
if (bgMedia) {
tl.to(bgMedia, {
xPercent: -5,
scale: 1.1,
duration: 0.45,
ease: 'none'
}, 0.4);
}
} else if (animStyle === 'fade-reveal') {
if (bgMedia) {
tl.to(bgMedia, {
scale: bgScale,
transformOrigin: 'center center',
duration: 0.45,
ease: 'power1.inOut'
}, 0.4);
}
}
tl.to(heading, {
opacity: 0,
duration: 0.1,
ease: 'power1.in'
}, 0.85);
if (subheading) {
tl.to(subheading, {
opacity: 0,
duration: 0.1,
ease: 'power1.in'
}, 0.85);
}
if (cta) {
tl.to(cta, {
opacity: 1,
y: 0,
duration: 0.15,
ease: 'power2.out'
}, 0.1);
tl.to(cta, {
opacity: 0,
duration: 0.1,
ease: 'power1.in'
}, 0.85);
}
function updateAnimation() {
if (!isIntersecting) return;
var scrollPos = window.pageYOffset - sectionTop;
var totalScroll = stickyEl.offsetHeight + scrollHeight;
var progress = Math.max(0, Math.min(scrollPos / totalScroll, 1));
tl.progress(progress);
}
function scrollLoop() {
if (isIntersecting) {
updateAnimation();
animationFrameId = requestAnimationFrame(scrollLoop);
}
}
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
isIntersecting = entry.isIntersecting;
if (isIntersecting) {
computeSectionTop();
scrollLoop();
} else if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
animationFrameId = null;
}
});
}, {
rootMargin: '100px',
threshold: [0, 0.5, 1.0]
});
observer.observe(sectionEl);
window[instanceKey] = {
timeline: tl,
observer: observer,
destroy: function() {
observer.disconnect();
if (animationFrameId) cancelAnimationFrame(animationFrameId);
tl.kill();
spacer.style.height = '0';
delete window[instanceKey];
}
};
}
function onhowHandleDOMReady() {
document.querySelectorAll('[data-section-type="onhow-cinematic-scroll"]').forEach(function(el) {
onhowInitCinematicScroll(el);
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', onhowHandleDOMReady);
} else {
onhowHandleDOMReady();
}
document.addEventListener('shopify:section:load', function(e) {
var target = e.target.querySelector('[data-section-type="onhow-cinematic-scroll"]');
if (target) onhowInitCinematicScroll(target);
});
document.addEventListener('shopify:section:unload', function(e) {
var target = e.target.querySelector('[data-section-type="onhow-cinematic-scroll"]');
if (target) {
var key = 'onhowCinematicScroll_' + target.dataset.sectionId;
if (window[key] && window[key].destroy) window[key].destroy();
}
});
})();
</script>
{% schema %}
{
"name": "Cinematic Scroll Hero",
"settings": [
{
"type": "header",
"content": "✨ Built by ONHOW Studio"
},
{
"type": "paragraph",
"content": "Get free sections & tutorials at youtube.com/@ONHOWStudio"
},
{
"type": "text",
"id": "onhow_studio_core_logic",
"label": "Section Architecture (Do Not Edit)",
"default": "built-by-onhow-studio",
"info": "Modifying this will break the section's CSS layout."
},
{
"type": "header",
"content": "― Core Settings ―"
},
{
"type": "color",
"id": "onhow_studio_bg_color",
"label": "Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "onhow_studio_text_color",
"label": "Text Color",
"default": "#ffffff"
},
{
"type": "header",
"content": "― Content ―"
},
{
"type": "text",
"id": "onhow_studio_cinematic_scroll_heading",
"label": "Heading",
"default": "Discover Elegance"
},
{
"type": "text",
"id": "onhow_studio_cinematic_scroll_subheading",
"label": "Subheading",
"default": "Crafted for those who appreciate the extraordinary"
},
{
"type": "select",
"id": "onhow_studio_cinematic_scroll_heading_tag",
"label": "Heading Tag",
"options": [
{ "value": "h1", "label": "H1" },
{ "value": "h2", "label": "H2" },
{ "value": "h3", "label": "H3" },
{ "value": "p", "label": "Paragraph" }
],
"default": "h2"
},
{
"type": "select",
"id": "onhow_studio_cinematic_scroll_text_alignment",
"label": "Text Alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "center"
},
{
"type": "select",
"id": "onhow_studio_cinematic_scroll_text_position",
"label": "Text Position",
"options": [
{ "value": "top-left", "label": "Top Left" },
{ "value": "top-center", "label": "Top Center" },
{ "value": "center", "label": "Center" },
{ "value": "bottom-left", "label": "Bottom Left" },
{ "value": "bottom-center", "label": "Bottom Center" }
],
"default": "center"
},
{
"type": "header",
"content": "― Images ―"
},
{
"type": "image_picker",
"id": "onhow_studio_cinematic_scroll_bg_image",
"label": "Background Image",
"info": "Recommended: 2000px wide. Falls back to Shopify placeholder if empty."
},
{
"type": "image_picker",
"id": "onhow_studio_cinematic_scroll_overlay_image",
"label": "Overlay Image",
"info": "Transparent PNG recommended. Falls back to Shopify placeholder if empty."
},
{
"type": "header",
"content": "― Typography ―"
},
{
"type": "range",
"id": "onhow_studio_cinematic_scroll_heading_size",
"label": "Heading Size (px)",
"min": 24,
"max": 120,
"step": 2,
"default": 48
},
{
"type": "range",
"id": "onhow_studio_cinematic_scroll_subheading_size",
"label": "Subheading Size (px)",
"min": 14,
"max": 60,
"step": 2,
"default": 20
},
{
"type": "range",
"id": "onhow_studio_cinematic_scroll_letter_spacing",
"label": "Letter Spacing (em × 100)",
"min": 0,
"max": 30,
"step": 1,
"default": 15,
"info": "Value of 15 = 0.15em. Controls heading letter spacing."
},
{
"type": "select",
"id": "onhow_studio_cinematic_scroll_text_transform",
"label": "Text Transform",
"options": [
{ "value": "none", "label": "None" },
{ "value": "uppercase", "label": "Uppercase" },
{ "value": "capitalize", "label": "Capitalize" }
],
"default": "uppercase"
},
{
"type": "color",
"id": "onhow_studio_cinematic_scroll_heading_color",
"label": "Heading & Subheading Color",
"default": "#ffffff"
},
{
"type": "header",
"content": "― Visual Effects ―"
},
{
"type": "checkbox",
"id": "onhow_studio_cinematic_scroll_vignette",
"label": "Enable Vignette",
"default": true
},
{
"type": "range",
"id": "onhow_studio_cinematic_scroll_vignette_intensity",
"label": "Vignette Intensity",
"min": 0,
"max": 100,
"step": 5,
"default": 60
},
{
"type": "checkbox",
"id": "onhow_studio_cinematic_scroll_grain",
"label": "Enable Film Grain",
"default": true
},
{
"type": "range",
"id": "onhow_studio_cinematic_scroll_grain_opacity",
"label": "Grain Opacity",
"min": 0,
"max": 30,
"step": 1,
"default": 8,
"info": "Value of 8 = 0.08 opacity. Subtle is best."
},
{
"type": "select",
"id": "onhow_studio_cinematic_scroll_overlay_blend",
"label": "Overlay Blend Mode",
"options": [
{ "value": "normal", "label": "Normal" },
{ "value": "multiply", "label": "Multiply" },
{ "value": "screen", "label": "Screen" },
{ "value": "overlay", "label": "Overlay" }
],
"default": "normal"
},
{
"type": "header",
"content": "― Animation ―"
},
{
"type": "select",
"id": "onhow_studio_cinematic_scroll_animation_style",
"label": "Animation Style",
"options": [
{ "value": "zoom-through", "label": "Zoom Through" },
{ "value": "parallax-drift", "label": "Parallax Drift" },
{ "value": "fade-reveal", "label": "Fade Reveal" }
],
"default": "zoom-through",
"info": "Zoom Through: cinematic depth zoom. Parallax Drift: horizontal split parallax. Fade Reveal: overlay unveils background."
},
{
"type": "range",
"id": "onhow_studio_cinematic_scroll_scroll_distance",
"label": "Scroll Distance (%)",
"min": 100,
"max": 300,
"step": 10,
"default": 150,
"info": "How much scrolling (as % of viewport) the animation takes to complete."
},
{
"type": "range",
"id": "onhow_studio_cinematic_scroll_overlay_max_scale",
"label": "Overlay Max Scale",
"min": 12,
"max": 30,
"step": 1,
"default": 20,
"info": "Value of 20 = 2.0× scale. Used in Zoom Through mode."
},
{
"type": "range",
"id": "onhow_studio_cinematic_scroll_bg_max_scale",
"label": "Background Max Scale",
"min": 10,
"max": 18,
"step": 1,
"default": 14,
"info": "Value of 14 = 1.4× scale."
},
{
"type": "header",
"content": "― Layout ―"
},
{
"type": "select",
"id": "onhow_studio_cinematic_scroll_height",
"label": "Section Height",
"options": [
{ "value": "100vh", "label": "Full Screen (100vh)" },
{ "value": "80vh", "label": "Large (80vh)" },
{ "value": "60vh", "label": "Medium (60vh)" }
],
"default": "100vh"
}
],
"blocks": [
{
"type": "cta_button",
"name": "CTA Button",
"limit": 1,
"settings": [
{
"type": "text",
"id": "onhow_studio_cinematic_scroll_cta_text",
"label": "Button Text",
"default": "Explore Collection"
},
{
"type": "url",
"id": "onhow_studio_cinematic_scroll_cta_url",
"label": "Button Link"
},
{
"type": "select",
"id": "onhow_studio_cinematic_scroll_cta_style",
"label": "Button Style",
"options": [
{ "value": "solid", "label": "Solid" },
{ "value": "outline", "label": "Outline" },
{ "value": "underline", "label": "Underline" }
],
"default": "outline"
},
{
"type": "color",
"id": "onhow_studio_cinematic_scroll_cta_color",
"label": "Button Text Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "onhow_studio_cinematic_scroll_cta_bg_color",
"label": "Button Background Color",
"default": "#000000"
},
{
"type": "select",
"id": "onhow_studio_cinematic_scroll_cta_size",
"label": "Button Size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "medium"
}
]
}
],
"presets": [
{
"name": "Cinematic Scroll Hero (By ONHOW Studio)",
"category": "Hero",
"blocks": [
{ "type": "cta_button" }
]
}
]
}
{% endschema %}
{% comment %}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{% endcomment %}