Skip to content

Commit 70dd3da

Browse files
GoldenMacaGoldenMaca
committed
j
1 parent 28c164b commit 70dd3da

2 files changed

Lines changed: 172 additions & 2 deletions

File tree

‎practice/top_chef.html‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
}
112112

113113

114-
@media (max-width: 70000px) {
114+
@media (max-width: 700000px) {
115115
body {
116116
grid-template-columns: 1fr;
117117
grid-template-areas:
@@ -123,7 +123,37 @@
123123
}
124124
aside {
125125
height: auto;
126-
order: 3;
126+
/* grid order is controlled by grid-template-areas above; clear any flex order */
127+
order: unset;
128+
grid-area: sidebar;
129+
}
130+
131+
/* Use a fixed-position pseudo element for the background on small screens.
132+
This simulates background-attachment: fixed on devices (including iOS/Android). */
133+
main {
134+
/* remove the inline background so the ::before can draw it */
135+
background-image: none;
136+
position: relative;
137+
z-index: 0;
138+
}
139+
140+
main::before {
141+
content: "";
142+
position: fixed;
143+
inset: 0;
144+
background-image: url(dinobg.png);
145+
background-size: cover;
146+
background-position: right center;
147+
background-repeat: no-repeat;
148+
z-index: -1;
149+
pointer-events: none;
150+
transform: translateZ(0);
151+
will-change: transform;
152+
}
153+
154+
/* small tweak for touch devices */
155+
@supports (-webkit-overflow-scrolling: touch) {
156+
main::before { background-position: center top; }
127157
}
128158
}
129159

‎projects/site/index.html‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<title>Base + Scrolling Parallax</title>
7+
<style>
8+
/* Basic layout / reset */
9+
* {box-sizing: border-box; margin:0; padding:0}
10+
html,body {height:100%}
11+
body {font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial; color:#111; line-height:1.5}
12+
13+
/* full-viewport section used for parallax layers */
14+
.hero {
15+
position:relative;
16+
height:100vh;
17+
overflow:hidden; /* keep parallax layers from affecting layout */
18+
display:flex;
19+
align-items:center;
20+
justify-content:center;
21+
color:white;
22+
text-align:center;
23+
}
24+
25+
/* parallax layers (stacked) */
26+
.parallax-layer {
27+
position:absolute;
28+
inset:0; /* top:0; right:0; bottom:0; left:0 */
29+
background-position:center;
30+
background-size:cover;
31+
will-change:transform;
32+
pointer-events:none; /* let content receive pointer events */
33+
}
34+
35+
/* content that sits on top and scrolls normally */
36+
.hero .content {
37+
position:relative; /* above absolute layers */
38+
z-index:10;
39+
padding:2rem;
40+
max-width:900px;
41+
}
42+
43+
h1 {font-size: clamp(2rem, 5vw, 4rem); margin-bottom:.5rem}
44+
p.lead {font-size:1.125rem; opacity:.9}
45+
46+
/* normal page content */
47+
main {background:#fff}
48+
section {
49+
padding:6rem 1.5rem;
50+
max-width:1000px;
51+
margin:0 auto;
52+
}
53+
.muted {color:#666}
54+
55+
/* small styling for demonstration layers (semi-transparent overlays) */
56+
.layer--tint { background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35)); mix-blend-mode:normal; }
57+
</style>
58+
</head>
59+
<body>
60+
61+
<!-- HERO with stacked parallax layers -->
62+
<header class="hero" aria-label="Hero with parallax">
63+
<!-- slow far background (replace URLs with your images) -->
64+
<div class="parallax-layer" data-speed="0.15"
65+
style="background-image: url('https://images.unsplash.com/photo-1503264116251-35a269479413?q=80&w=1600&auto=format&fit=crop'); z-index:1;">
66+
</div>
67+
68+
<!-- middle layer -->
69+
<div class="parallax-layer" data-speed="0.35"
70+
style="background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1600&auto=format&fit=crop'); z-index:2; mix-blend-mode:screen; opacity:0.85;">
71+
</div>
72+
73+
<!-- subtle dark tint layer so text is readable -->
74+
<div class="parallax-layer layer--tint" data-speed="0.05" style="z-index:3;"></div>
75+
76+
<!-- main content sits above layers and scrolls normally -->
77+
<div class="content">
78+
<h1>Simple Scrolling Parallax</h1>
79+
<p class="lead">Layers move at different speeds as you scroll. Use data-speed to change depth.</p>
80+
</div>
81+
</header>
82+
83+
<!-- Normal flow content -->
84+
<main>
85+
<section>
86+
<h2>What this is</h2>
87+
<p class="muted">A minimal base page with a hero that uses layered parallax. The rest of the page scrolls normally so you can mix static and parallax content.</p>
88+
</section>
89+
90+
<section>
91+
<h2>How to tune it</h2>
92+
<ul>
93+
<li>Change data-speed on each .parallax-layer (smaller = farther, larger = moves more).</li>
94+
<li>Replace background-image URLs with your own photos or gradients.</li>
95+
<li>For better performance on heavy pages, use lower-res images and limit number of layers.</li>
96+
</ul>
97+
</section>
98+
99+
<section>
100+
<h2>More content</h2>
101+
<p class="muted">Add more sections here to test scrolling persistence of the parallax effect.</p>
102+
</section>
103+
</main>
104+
105+
<script>
106+
// Parallax: translateY each layer based on page scroll and its data-speed.
107+
// Use requestAnimationFrame to batch updates for smoothness.
108+
(function () {
109+
const layers = Array.from(document.querySelectorAll('.parallax-layer'));
110+
if (!layers.length) return;
111+
112+
let ticking = false;
113+
114+
function update() {
115+
const scrollY = window.scrollY;
116+
layers.forEach(layer => {
117+
const speed = parseFloat(layer.dataset.speed) || 0;
118+
// Negative translate (move up slower/faster depending on speed sign)
119+
// tweak sign if you want opposite direction
120+
const y = scrollY * speed;
121+
layer.style.transform = `translate3d(0, ${y}px, 0)`;
122+
});
123+
ticking = false;
124+
}
125+
126+
function onScroll() {
127+
if (!ticking) {
128+
requestAnimationFrame(update);
129+
ticking = true;
130+
}
131+
}
132+
133+
// initial position
134+
update();
135+
window.addEventListener('scroll', onScroll, {passive: true});
136+
window.addEventListener('resize', update);
137+
})();
138+
</script>
139+
</body>
140+
</html>

0 commit comments

Comments
 (0)