Sidebar - Side scroll

Frameworks er et visuelt indblik i tilblivelsen og opbygningen af moderne Elementor-hjemmesider — fra struktur til færdigt design.

Step 1

Indsæt nedenstående i:
Elementor > Editor > Custom Elements > Kode

				
					<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/locomotive-scroll/bundled/locomotive-scroll.css" />
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll/bundled/locomotive-scroll.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.reveal').forEach(function (el) {
      el.setAttribute('data-scroll', '');
    });

    var mq = window.matchMedia('(min-width: 1025px)');  // horisontal kun > 1024px
    var scroll = null;

    function build() {
      if (scroll) { scroll.destroy(); scroll = null; }
      scroll = new LocomotiveScroll({
        lenisOptions: {
          orientation: mq.matches ? 'horizontal' : 'vertical',
          gestureOrientation: 'vertical',
          lerp: 0.08,
          duration: 1.4,
          smoothWheel: true,
          smoothTouch: false,
        }
      });
    }

    build();
    mq.addEventListener('change', build);
  });
</script>

Gå til step 2

Step 2

Indsæt nedenstående i:
Tilpas CSS

				
					/* ---- Horisontal opsætning (kun > 1024px) ---- */
html[data-scroll-orientation='horizontal'] body {
  width: fit-content;
  overflow-y: hidden;
}

.frames {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: fit-content;
}

/* Låst shrink + højde. BREDDEN sættes i Elementors Bredde-felt (vw eller px). */
.frame-slide {
  flex: 0 0 auto !important;
  height: 100vh;
}

/* Skjul vandret scrollbar (funktionen bevares) */
body::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }
body { -ms-overflow-style: none; }

/* ---- Reveal-on-scroll ---- */
.reveal {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-inview { opacity: 1; transform: none; }

/* ---- Under 1024px: almindelig lodret scroll ---- */
@media (max-width: 1024px) {
  body { width: auto !important; overflow-y: auto !important; }

  .frames,
  .frames > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  .frame-slide {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;   /* fjern linjen hvis panelerne ikke skal fylde fuld højde */
  }

  .reveal { transform: translateY(40px); }
}

Start forfra