NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Paneel dat over de hero schuift Nieuw

Sticky fotohero met een afgerond inhoudspaneel dat bij scrollen eroverheen schuift; de handgreep is een echte knop die het paneel omhoog of terug zet. De foto dimt via scroll-driven animation (animation-timeline: scroll(), achter @supports) met een kleine scroll-listener als terugval. In het paneel een filter in vier vragen met lege staat.

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

    Zo gebruik je het

    1. Plak de HTML op de plek waar het onderdeel moet komen.
    2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
    3. Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
    <!-- 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>

    Meer uit paginasecties

    Iets gezien dat je mooi vindt?

    Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

    Neem contact op →