NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Paneel dat over de hero schuift New

Sticky photo hero with a rounded content panel that slides over it on scroll; the handle is a real button that moves the panel up or back. The photo dims via a scroll-driven animation (animation-timeline: scroll(), behind @supports) with a small scroll listener as fallback. Inside the panel a four-question filter with empty state.

Werkplekken met eikenhouten tafels achter stalen ramen aan de Maas
PlekkenVergaderenCommunityBoek een rondleiding

Coworking · Rotterdam · Kop van Zuid en Katendrecht

Werken aan het water, per dag of per jaar.

Wat werkt voor jou?

    Pakhuiskade · Rijnhaven Oostzijde 14, Rotterdam · KvK 81234567 · ma t/m vr 8.00 tot 20.00 uur

    How to use it

    1. Paste the HTML where the page sections should appear.
    2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
    3. Add the JavaScript and call init() with the element that contains the HTML.
    <!-- Paneel dat over de hero schuift · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="poh">
  <div class="poh__scroll" tabindex="0" role="region" aria-label="Pakhuiskade, scroll om het aanbod te zien">
    <div class="poh__hero">
      <img class="poh__img" src="https://neddev.com/lab-media/paneel-over-hero-1.webp" alt="Werkplekken met eikenhouten tafels achter stalen ramen aan de Maas" loading="lazy">
      <div class="poh__top"><span class="poh__logo">Pakhuiskade</span><span class="poh__nav"><a href="#">Plekken</a><a href="#">Vergaderen</a><a href="#">Community</a></span><a class="poh__book" href="#">Boek een rondleiding</a></div>
      <div class="poh__copy"><p class="poh__eyebrow">Coworking · Rotterdam · Kop van Zuid en Katendrecht</p><h2 class="poh__h">Werken aan het water, per dag of per jaar.</h2></div>
    </div>
    <div class="poh__panel" id="poh-panel">
      <button type="button" class="poh__handle" aria-controls="poh-panel" aria-expanded="false"><span class="poh__grip" aria-hidden="true"></span><span class="poh__hl">Bekijk het aanbod</span></button>
      <div class="poh__pin">
        <h3 class="poh__ph">Wat werkt voor jou?</h3>
        <form class="poh__f">
          <label><span>Waar</span><select data-k="loc"><option value="">Beide locaties</option><option>Kop van Zuid</option><option>Katendrecht</option></select></label>
          <label><span>Met hoeveel</span><select data-k="team"><option value="1">Alleen</option><option value="4">2 tot 5</option><option value="10">6 tot 12</option></select></label>
          <label><span>Hoe lang</span><select data-k="dur"><option value="dag">Een dag</option><option value="maand" selected>Per maand</option><option value="jaar">Per jaar</option></select></label>
          <label><span>Belangrijk</span><select data-k="feat"><option value="">Maakt niet uit</option><option value="stilte">Stilte</option><option value="vergader">Vergaderruimte</option><option value="parkeren">Parkeren</option></select></label>
        </form>
        <p class="poh__cnt" aria-live="polite"></p>
        <ul class="poh__res"></ul>
        <div class="poh__empty" hidden><p></p><button type="button" class="poh__clear">Wis filters</button></div>
        <p class="poh__foot">Pakhuiskade · Rijnhaven Oostzijde 14, Rotterdam · KvK 81234567 · ma t/m vr 8.00 tot 20.00 uur</p>
      </div>
    </div>
  </div>
</div>
</div>

    More page sections

    Seen something you like?

    Add it to your selection and send it over. We build your site around it, in your brand.

    Get in touch →