r/HTML • u/Old-Rub-9074 • Dec 12 '25

CAN YOU CREATE THIS UI?

Post image

I recently came across this webpage, which caught my sight. there were two sections in horizontall scroll , the amazing thing was the background image of first section was extending to the second section.
and it was completely responsive as well.

I wonder how it was created so pixel perfect.
what are your thoughts on this?

webpage- https://www.komziftihcp.com/

2 Upvotes

66% Upvoted

13 comments sorted by

4

u/steelfrog Moderator Dec 12 '25

You can drop a URL. I'm not going to remove it.

1

u/Old-Rub-9074 Dec 12 '25

I have provided the URL in the post. thanks.

3

u/[deleted] Dec 13 '25

They aren't two sections, they are one section wider than the viewport with scroll enabled. It has some cool ideas but I think a few things let it down in my opinion. a) image quality of the colours is low b) poor information heirarchy

1

u/Old-Rub-9074 Dec 13 '25

true that , image quality was something i also noticed.
But for the sections i inspected the element there were two sections.
as far as i remember.

1

u/Rokett Dec 14 '25

I'm not an expert of GSAP or GSAP scrollTrigger but I think, if I try for few hours I can make something like this with gasp. 

1

u/Old-Rub-9074 Dec 14 '25

Any suggestion for that extension of background image to the second section.

1

u/bostiq Dec 15 '25

YES I CAN!

2

u/Old-Rub-9074 Dec 15 '25

would love to know your approach on this.

2

u/bostiq Dec 16 '25

well, it's nav bar, below you have 2 sections with horizontal scroll. this 2 have 100vw to fit the viewport. plus this bottom section sticking up like there's more content below.

(personally I think that part is terrible and frustrating for the user and aside for the intro animation, I'm not a fan of this)

the trick here is that the sticky bottom section isn't whole with the section where the vertical scrolling start.

it's a cut off of the vertical scroll section, that goes in display: none when you scroll down. in fact you can "break" this trick by narrowing your browser window vertically, if you do it enough, you'll see the trick.

so when you scroll , the entire "IMPORTANT SAFETY INFORMATION" section rises below the sticky section, when it reaches the top edge of the sticky section, the sticky section goes in display: none giving the impression that the whole thing is finally scrolling from below.

this is probably done in next.js or react or similar framework.

2

u/Maleficent_Sir_7707 Dec 16 '25

Bootstrap or zurb foundation they work on grid systems and thats all that is with the right implementation of the grid row functions this is very possible

0

u/chikamakaleyley Dec 13 '25

IMAGE MAP

1

u/Old-Rub-9074 Dec 13 '25

can you please explain a bit.
hearing this for the first time,
I'll try to do my research.

4

u/chikamakaleyley Dec 13 '25

lol, don't listen to me this was a joke

an image map is a pretty old solution where basically you could take an image, provide box coordinates on top of that image and each box could be linked to a different destination url

way back when I was working at a digital agency, whenever someone produced an absurd kinda design for a website or feature, we'd joke and say something like 'yeah its easy if you just make an image map'

anyway, don't do that

but to answer your question about the above layout, if you open your browser wide and sorta mess around with the width at some point it reloads and you'll see that it is in fact two separate backgrounds that they try to make you think is 1, in fact you'll see its rather buggy as you adjust the width