How To Use fullPage.js With Oxygen in WordPress

Webdesign

 

  1. DIV erstellen, in den die Sections abgelegt werden. 100% Breite; Name id = „fullpage„
  2. Section erstellen; class id = „section“ vergeben. Dann 100 vh Höhe einstellen / Layout: Display „flex“     Align Items = „center“ Justify Content = „center“
  3. Background der Section einstellen, Columns erstellen, Text und Bilder einfügen, Effekte ; Styling betreiben
  4. Sections duplizieren und jeweils anpassen
  5. Im Body einen CodeBlock einfügen und an den Beginn der Website schieben.

    in PHP & HTML das CDN-Skript eintragen (Nr. 1 unten)

    in CSS den Code aus Skript Nr. 2 eintragen

    in Java das Skript Nr. 3 eintragen

  6. einen weiteren DIV für die Navigation erstellen. Die ID des DIVs kopieren und ins Java-Skript des CodeBlocks einfügen.

    Layout Position = „fixed“ / Z-Index = 1000 / Abstand Top 0 Right 32
    Size & Spacing: Höhe 100 vh
    Primary: Zentrien und Inhalt vermitteln

  7. im Navi-Div einen Link-Wrapper erstellen und mit class „fullpage-anchor“ benennen. 
    Rund stylen und mit Effekten versehen: Hintergrundfarbe, Margin top / bottom = 8, Breite & Höhe = 16 px / Border: Border-Radius 100%, weißer Rand 2Px / Effekte – hover: transform, Background-color weniger transparent.

  8. Den Link-Wrapper so oft kopieren, wie man Sections hat.
  9. Jeweils den Link im LinkWrapper eintragen 
    #firstPage
    #secondPage
    #thirdPage

    >>> muss mit Java-Skript übereinstimmen

 

 

 

 

fullPage.js: https://alvarotrigo.com/fullPage/

SVG Backgrounds: https://www.svgbackgrounds.com/

 

 

 

Nr. 1 –  Code Block HTML: https://gist.github.com/Spellhammer/2330a63dd76f54652157a6c04dd1671c

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.js" integrity="sha256-wypDCQw+qwWtdARZAAtUMv/1SWOEB1XHZwAFoNc9Wn8=" crossorigin="anonymous"></script>

 

 

Nr. 2 – Code Block CSS: https://gist.github.com/Spellhammer/ddbd46ebdb84d81b7ab97a96cf82500a

.anchor-active {
transition: 0.3s all ease-in-out;
background-color: #5288e5;
transform: scale3d(1.3, 1.3, 1);
}

 

Nr. 3 – Code Block JS: https://gist.github.com/Spellhammer/5347655a8de1b4202e7b48cd07b5f56a 

jQuery(document).ready( function() {

new fullpage('#fullpage', {
//options here
autoScrolling:true,
scrollHorizontally: true,
anchors: ['firstPage', 'secondPage', 'thirdPage'],
lockAnchors: false,
menu: '#div_block-28-6',
afterLoad: function(anchorLink, index) {
jQuery('.fullpage-anchor').removeClass('anchor-active');
jQuery('a[href="#' + index["anchor"] + '"]').addClass('anchor-active');
}
});

//methods
fullpage_api.setAllowScrolling(true);

});