One Page Scroller & Parallax

Preview: start04.webtool.lt

Additional modules used in preview: additional languages, advanced slideshow (important), simple mobile version (important).

Copy/paste the code below into corresponding fields:

 Custom CSS

/***********************************/
/*CUSTOM GOOGLE FONT - DEMO SETINGS*/
/***********************************/
/*Import the font in HEAD section*/
/*Set the font*/
*{font-family: 'Open Sans', sans-serif !important;}

/******************************************************************/
/*IFRAME BLOCK ENABLER - DEMO SETINGS (i.e. google maps, youtube) */
/******************************************************************/
iframe {pointer-events: none; opacity:0.6; transition: all 0.3s ease; background-image:url('/uploads/userfiles/data/preload.gif'); background-position:center center; background-repeat:no-repeat; background-size:auto;}

/*******************************************************************************************************************************/
/*IFRAME WINDOW FULL WIDTH / 50% WINDOW HEIGHT - DEMO SETINGS (i.e. google maps in Contacts, change tags to use it elsewhere)*/
/*******************************************************************************************************************************/
.it5/*forms id*/ .iframeHolder iframe {height:100%}
.it5/*forms id*/ .iframeHolder {left: 50%; margin-left: -50vw;  width: 100vw; height:50vh;}

/*****************************/
/*FIXED HEADER - DEMO SETINGS*/
/*****************************/
.header_cont {position: fixed; width: 100%; }
.innerpage .betweenHeaderFooter {padding-top: 66px;}
.startpage .betweenHeaderFooter {padding-top: 66px;}
.startpage.it150 .betweenHeaderFooter {padding-top: 0px;}

/**** **** **** **** **** **** **** ****/
/****  LAYOUT/DEFAULT RELATED CSS   ****/
/**** **** **** **** **** **** **** ****/

/*LAYERS, SCROLLING & PARALLAX*/

/*Global layers settings*/
div.layers_cont div.layer {height: 100vh !important; overflow-y:hidden; overflow-x:visible;}
.mobileLayout div.layers_cont div.layer {height: 400px !important;}
div.layers_cont div.layer table.layer {max-height: 400px; height:400px !important;  margin-top: -167px !important; top: 50%; position:absolute;  display:block; overflow-y:hidden; overflow-x:visible; }

/*Layers backgrounds fixed images for paralax efect. Enable/Disable these to get various effect types*/
div.l1preset, div.l1presetSub {background-attachment:fixed;}
/*div.l2preset, div.l2presetSub {background-attachment:fixed;}*/
div.l3preset, div.l3presetSub {background-attachment:fixed;}
div.l4preset, div.l4presetSub {background-attachment:fixed;}

/*All layers*/
/*div.layers_cont div.layer div.title.header {padding-left:10px;}*/

/*Slides layer*/
div.layers_cont div#layer1.layer table.layer {overflow:visible;}

/*About us layer*/
div.layers_cont div#layer2.layer table.layer {}

/*Photos layer*/
div.album_block {margin-right: 1%;  padding: 20px; width: 32%;}
div.album_block div.thumb_side {width:100%;padding-right: 0;}
div.album_block div.data_side {padding-left: 0%; width: 100%;}

/*News Layer*/
div.news_block {margin-bottom: 25px;}
div.news_block {float: left;width: 49%; margin-right: 1%;  padding: 20px; box-sizing:border-box;}
div.news_block div.thumb_side {width:100%;padding-right: 0;}
div.news_block div.thumb_side a {height:210px;}
div.news_block div.data_side {padding-left: 0%; width: 100%;}
div.news_block div.data_side div.summary div.descr span.descr {height: 18px;text-overflow: ellipsis;white-space: nowrap;width: 545px;} /*3 dots at the end of the description*/

/*Catalogue layer*/
.it150 div.cat_list { width: calc(100vw - (100vw - 1200px));}
div.cat_list div.mthumb {width:32% !important;}
div.cat_list div.mthumb:hover {opacity:0.9;}
div.cat_list div.mthumb a.thumb {height: 300px;}
div.cat_list div.mthumb div.title {  background-color: white; margin-top: 0; padding: 6px;}

/*Map in layers*/
div.layers_cont div#layer6.layer {overflow:visible;}
div.layers_cont div#layer6.layer table.layer {overflow:visible; margin-top:0px !important; top:0;}
div.layers_cont div#layer6.layer table.layer td {width:1200px !important;}
div.layers_cont div#layer6.layer table.layer div.fck p div.iframeHolder {left: 50%; margin-left: -50vw;  width: 100vw; height:100vh; background-color:white;}
div.layers_cont div#layer6.layer table.layer div.fck p div.iframeHolder iframe {height:100%}
 

 
Custom JS

/////////////////////////////////////////////////////////////////////////////////////////   
////////////ONE PAGE SCROLLER////////////////////////////////////////////////////////////  
/////////////////////////////////////////////////////////////////////////////////////////
function isElementVisible(elementToBeChecked)
{
    var TopView = $(window).scrollTop();
    var BotView = TopView + $(window).height();
    
    var TopElement = $(elementToBeChecked).offset().top;
    var BotElement = TopElement + $(elementToBeChecked).height() ;
    
    return ((TopElement >= TopView)&&(BotElement <= BotView)  );  
}

function visibleHeight(id,TopView,BotView)
{
  var layerObj = $('#'+id);
      if (layerObj.length == 0) {return 0;}
    var TopElement = layerObj.offset().top;
    var BotElement = TopElement + layerObj.height() ;
  if (TopElement > BotView) { return 0; }
  if (BotElement < TopView) { return 0; }
  if (TopElement < TopView) { TopElement = TopView; }
  if (BotElement > BotView) { BotElement = BotView; }
  return (BotElement - TopElement);
}

function matchLayer(TopView,BotView)
{
    var actualLayer = 0;
    var actualLayerHeight = 0;
  $('div.layer').each(function()
  {
          var idTemp = $(this).attr('id');
        idTemp = idTemp.split('layer');
        idTemp = idTemp[1];
        var temp = visibleHeight('layer'+idTemp, TopView, BotView);
        if (temp > actualLayerHeight)
        {
        actualLayer = idTemp;
        actualLayerHeight = temp;
        }
  });
  $('ul.tmenu li a').removeClass('top_mp_active');
  if ($('ul.tmenu li a[href$="#layer'+actualLayer+'"]').length > 0)
  {
    var selector = 'ul.tmenu li a[href$="#layer'+actualLayer+'"]';
    
  }
  else { var selector = 'ul.tmenu li a[href="'+current_page_url+'"]'; }
  $(selector).addClass('top_mp_active');
}


$(document).ready(function() {    //// .ready /////////////////////////////////////////////////////////////

/*  
/////youtube, vimeo iframe wrapper - in case its needed/////

$('iframe[src*="youtube.com"]').each(function() {
        var url = $(this).attr("src")
       $(this).add( $(this).andSelf() ).wrapAll('<div class="iframeVideoHolder" ></div>');
        
    });
$('iframe[src*="vimeo.com"]').each(function() {
        var url = $(this).attr("src")
        $(this).add( $(this).andSelf() ).wrapAll('<div class="iframeVideoHolder" ></div>');
    });   
*/

/////iframe wrapper//////////////////////////////////////////////////////////////////////////////////////////  
 $(document).ready(function(){
 $('iframe').each(function(){
  $(this).add( $(this).andSelf()).wrapAll('<div class="iframeHolder" ></div>');
 })
});

/////youtube, vimeo iframe wrap remover/////  
$('iframe[src*="youtube.com"]').each(function() {
        var url = $(this).attr("src")
       $('iframe').css({'pointer-events':'auto', 'opacity':'1'});      
       $(this).remove( $(this).andSelf() ).wrapAll();
        
    });
$('iframe[src*="vimeo.com"]').each(function() {
        var url = $(this).attr("src")
       $('iframe').css({'pointer-events':'auto', 'opacity':'1'});      
       $(this).remove( $(this).andSelf() ).wrapAll();
    });  
 
    
 
/////select wrapper/////////////////////////////////////////////////////////////////////////////////////////  
 $(document).ready(function(){
 $('select').each(function(){
  $(this).add( $(this).andSelf() ).wrapAll('<div class="selectHolder"></div>');
 })
});
 
////next prev product animation on click////////////////////////////////////////////////////////////////////  
 
$('.next > a').click(function (e) {
    e.preventDefault();                   
    var goTo = this.getAttribute("href");
    $("body").css("transition","all 0.5s ease");
    $("body").css("opacity","0");

    setTimeout(function(){
         window.location = goTo;
    },500);       
});
 
$('.prev > a').click(function (e) {
    e.preventDefault();                   
    var goTo = this.getAttribute("href");
    $("body").css("transition","all 0.5s ease");
    $("body").css("opacity","0");

    setTimeout(function(){
         window.location = goTo;
    },500);       
});  
/////////////////////////////////////////////////////////////////////////////////////////   
////////////PARALAX EFFECTS//////////////////////////////////////////////////////////////  
/////////////////////////////////////////////////////////////////////////////////////////
 
$('#layer6').addClass('noParalax'); //disable effects on certain layer

 
$( window ).scroll(function()
{
    var scrollTop = $(window).scrollTop();
      var scrollBot = scrollTop + $(window).height();
 
 
      matchLayer(scrollTop, scrollBot); //rodome atitinkanti kontentui linka
    //window.location.hash = '#layer'+actualLayer;
 
// DEFAULT effect for all layers
$('div.layer:not(.noParalax)').each(function()
    {
        var TopElement = $(this).offset().top;
      $(this).find('table.layer').css({'top':(50 + ((scrollTop-TopElement)/20))+'%'});
    });

 
 
// Effect rotate
  $('div#layer2:not(.noParalax)').each(function()
    {
        var TopElement = $(this).offset().top;
      $(this).find('table.layer').css({'transform':'rotate(' + (0 + ((scrollTop-TopElement)/20)) + 'deg)'});
      $(this).css({'overflow':'hidden'});
    });  
 

// Effect from right to left
  $('div#layer3:not(.noParalax)').each(function()
    {
        var TopElement = $(this).offset().top;
      $(this).css({'right':(0 + ((scrollTop-TopElement)/10))+'%'});         
    });
 
 
// Effect from left to right
  $('div#layer5:not(.noParalax)').each(function()
    {
        var TopElement = $(this).offset().top;
      $(this).css({'left':(0 + ((scrollTop-TopElement)/10))+'%'});         
    });  
 

//Change Layer Opacity on scroll
      var p = visibleHeight('layer18',scrollTop,scrollBot);
      var percent = p/$('#layer18').height();
      if (percent > 1) percent = 1;
    $('#layer18').find('table.layer').css({'opacity':(0 + percent)});

 
});
 
 
$(document).ready(function() {   
    var scrollTop = $(window).scrollTop();
      var scrollBot = scrollTop + $(window).height();
      matchLayer(scrollTop, scrollBot); //rodome atitinkanti kontentui linka
});
 
////////////// smoothScroll to element////////////////////////////////////////////////////////////////////////
 
var $root = $('html, body');
$('ul.tmenu a').click(function(event) {

    var href = $.attr(this, 'href');  
    $root.animate({
      
        //  scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
       //   scrollTop: $('[class="' + $.attr(this, 'href').substr(1) + '"]').offset().top
            scrollTop: $( $.attr(this, 'href') ).offset().top
      
    }, 900,  function () {
        window.location.hash = href;
        
    });
    return false;
});

 
}); //////// .ready end ///////////////////////////////////////////////////////////////////////////////////////

window.onload = function () {

/////iframe enabler/////  
$('div.iframeHolder').click(function () {  
  $('iframe').css({'pointer-events':'auto', 'opacity':'1'});  
});
 
 

}; //////// .onload end ///////////////////////////////////////////////////////////////////////////////////////
 

HEAD tag

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>