Onepage Test

by Marcel Landeweerd

HTML

<script src="https://rawgit.com/peachananr/onepage-scroll/master/jquery.onepage-scroll.js"></script>
<div class="main">
  
  <section class="section page1">
De widget afbeelding zou klikbaar moeten zijn (link):
<h2><a href="https://www.webwinkelkeur.nl/webshop/WebwinkelKeurnl_1" class="webwinkelkeurPopup" title="Webshop Trustmark"></a><img src="https://dashboard.webwinkelkeur.nl/banners/9" alt="Webshop Trustmark" title="Webshop Trustmark"></h2>
</section>

<section class="section page2">
  Hier zou de WebwinkelKeur widget weergegeven moeten worden:
  <script class="wwk_script_container">(function () {
(_wwk_id = (typeof _wwk_id !== 'undefined') ? _wwk_id : []).push('1');
(_wwk_layout = (typeof _wwk_layout !== 'undefined') ? _wwk_layout : []).push('default');
(_wwk_theme = (typeof _wwk_theme !== 'undefined') ? _wwk_theme : []).push('light');
(_wwk_color = (typeof _wwk_color !== 'undefined') ? _wwk_color : []).push('#ea0e8b');
(_wwk_show = (typeof _wwk_show !== 'undefined') ? _wwk_show : []).push('yes');
(_wwk_view = (typeof _wwk_view !== 'undefined') ? _wwk_view : []).push('slider');
(_wwk_amount = (typeof _wwk_amount !== 'undefined') ? _wwk_amount : []).push('6');
(_wwk_width = (typeof _wwk_width !== 'undefined') ? _wwk_width : []).push('manual');
(_wwk_width_amount = (typeof _wwk_width_amount !== 'undefined') ? _wwk_width_amount : []).push('250px');
(_wwk_height = (typeof _wwk_height !== 'undefined') ? _wwk_height : []).push('0');
(_wwk_interval = (typeof _wwk_interval !== 'undefined') ? _wwk_interval : []).push('5000');
(_wwk_language = (typeof _wwk_language !== 'undefined') ? _wwk_language : []).push('1');
(_wwk_inline = (typeof _wwk_inline !== 'undefined') ? _wwk_inline : []).push('0');
var js = document.createElement('script'), c = _wwk_id.length - 1;
js.className = 'wwk_script';
js.type = 'text/javascript';
js.async = true;
js.src = 'https://www.webwinkelkeur.nl/widget2.js?c=' + c;
var s =...

CSS

/* reset */
* {
  margin: 0;
  padding: 0;
}

.section {
  width: 100vw;
  height: 100vh;
}
.page1 { background-color: #a7d2cb; }
.page2 { background-color: #f2d388; }
.page3 { background-color: #c98474; }
.page4 { background-color: #874c62; }

.section > h2 {
  color: white;
  font-size: 80px;
  text-align: center;
  height: 100vh;
  line-height: 100vh;
}

JavaScript

$('.main').onepage_scroll({
	sectionContainer: 'section',
  easing: 'ease',
  animationTime: 500,
  
  pagination: false,
  direction: "horizontal"
});