Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="author" content="Copyright (c) 2016 Marcin Gierczak (www.viewdesic.com)">
    <meta name="description" content="viewScroller plugin by Marcin Gierczak. This plugin allows creating fullscreen scrollable webpage." />
    <meta name="keywords" content="viewScroller, fullscreen, html fullpage, scroll page, page scrolling, page scroll, full scroll" />
    <title>Web : Mano Santa</title>
    <link rel="stylesheet" type="text/css" href="viewScroller.min.css">
    <link rel="stylesheet" type="text/css" href="examples.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/e1389227cc.js"></script>   
    

    <style>


    </style>
</head>

<body>
    


    <img src="images/arrows.png" alt="You can use arrows to change a view" class="arrows">

   
			    <div id="side">
			    	<div class="icMenu">
			    		<div class="hamburger">
			    			<div class="hamburger-inner"></div>
			    		</div> 
			    	</div>
			    	<h3 class="tituloSection" id="tittle">Home</h3> 
			    </div>
                <div id="sidePrev">
                  <a><i class="fa fa-arrow-right fa-lg vs-mainview-next indicadorNext"></i></a>
                </div>
                <div id="sideNex">
                    <a><i class="fa fa-arrow-left fa-lg indicadorNext vs-mainview-prev"> </i></a>
                </div>
                <div id="sideFoot">
                    <i class="fa fa-instagram fa-lg whiteIcons" ></i><br><br><br>
                    <i class="fa fa-facebook fa-lg whiteIcons" ></i>
                </div>
                <div id="menuBarra">
                </div>
    <div class="mainbag" id="topmenu">

        <div vs-anchor="view-1" class="mainview view1" id="v1">
            <div class="logoUp">
                <img src="imagenes/web-mano-santa-2.png" class="img-responsive" id="imgNav">
            </div>
            <div class="vs-center-wrap">
                <div class="vs-center">
                    
                </div>
            </div>



        </div>
        <div vs-anchor="view-2" class="mainview" id="v2">
            <div class="subbag">
                <div vs-anchor="subview-a" class="subview subview-a">
                    <div class="box">
                        <div class="info">
                            Subview A
                            <div class="pos">
                                <input type="button" value="&lt;" class="vs-subview-prev">
                                <a href="#subview-a" class="vs-anchor"><input type="button" value="A"></a>
                                <a href="#subview-b" class="vs-anchor"><input type="button" value="B"></a>
                                <a href="#subview-c" class="vs-anchor"><input type="button" value="C"></a>
                                <input type="button" value="&gt;" class="vs-subview-next">
                            </div>
                        </div>
                    </div>                <div class="logoUp">
                    <img src="imagenes/web-mano-santa-2.png" class="img-responsive" id="imgNav">
                </div>
                </div>
                <div vs-anchor="subview-b" class="subview subview-b">
                    <div class="box">
                        <div class="info">
                            Subview B
                            <div class="pos">
                                <input type="button" value="&lt;" class="vs-subview-prev">
                                <a href="#subview-a" class="vs-anchor"><input type="button" value="A"></a>
                                <a href="#subview-b" class="vs-anchor"><input type="button" value="B"></a>
                                <a href="#subview-c" class="vs-anchor"><input type="button" value="C"></a>
                                <input type="button" value="&gt;" class="vs-subview-next">
                            </div>
                        </div>
                    </div>
                <div class="logoUp">
                    <img src="imagenes/web-mano-santa-2.png" class="img-responsive" id="imgNav">
                </div>
                </div>
                <div vs-anchor="subview-c" class="subview subview-c">
                    <div class="box">
                        <div class="info">
                            Subview C
                            <div class="pos">
                                <input type="button" value="&lt;" class="vs-subview-prev">
                                <a href="#subview-a" class="vs-anchor"><input type="button" value="A"></a>
                                <a href="#subview-b" class="vs-anchor"><input type="button" value="B"></a>
                                <a href="#subview-c" class="vs-anchor"><input type="button" value="C"></a>
                                <input type="button" value="&gt;" class="vs-subview-next">
                            </div>
                        </div>
                    </div>
                <div class="logoUp">
                    <img src="imagenes/web-mano-santa-2.png" class="img-responsive" id="imgNav">
                </div>
                </div>
            </div>

        </div>
        <div vs-anchor="view-3" class="mainview view3" id="v3">
            <div class="box">
                <div class="info">View 3</div>
            </div>

        </div>
        <div vs-anchor="view-4" class="mainview" id="v4">
            <div class="subbag">
                <div vs-anchor="subview-d" class="subview subview-d">
                    <div class="box">
                        <div class="info">
                            Subview D
                            <div class="pos">
                                <input type="button" value="&lt;" class="vs-subview-prev">
                                <a href="#subview-d" class="vs-anchor"><input type="button" value="D"></a>
                                <a href="#subview-e" class="vs-anchor"><input type="button" value="E"></a>
                                <input type="button" value="&gt;" class="vs-subview-next">
                            </div>
                        </div>
                    </div>
                <div class="logoUp">
                    <img src="imagenes/web-mano-santa-3.png" class="img-responsive" id="imgNav">
                </div>
                </div>
                <div vs-anchor="subview-e" class="subview subview-e">
                    <div class="box">
                        <div class="info">
                            Subview E
                            <div class="pos">
                                <input type="button" value="&lt;" class="vs-subview-prev">
                                <a href="#subview-d" class="vs-anchor"><input type="button" value="D"></a>
                                <a href="#subview-e" class="vs-anchor"><input type="button" value="E"></a>
                                <input type="button" value="&gt;" class="vs-subview-next">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div vs-anchor="view-5" class="mainview view5" id="v5">
            <div class="box">
                <div class="info">View 5</div>
            </div>

        </div>
        <div vs-anchor="view-6" class="mainview view6" id="v6">
            <div class="box">
                <div class="info">View 6</div>
            </div>

        </div>
        <div vs-anchor="view-7" class="mainview view6" id="v7">
            <div class="box">
                <div class="info">View 7</div>
            </div>

        </div>
    </div>

    <script src="jquery-3.1.0.min.js"></script>
    <script src="jquery.easing.min.js"></script>
    <script src="jquery.mousewheel.min.js"></script>
    <script src="viewScroller.js"></script>
    <script>

        $(document).ready(function() {


            // Sets viewScroller with sample events
            $('.mainbag').viewScroller({

                useScrollbar: false,
                navigation: true,
                beforeChange: function() {
                    console.log('beforeChange fired!');
                    return true; // It means that views change will be terminate
                },
                afterChange: function() {
                    console.log('afterChange fired!');
                },
                beforeResize: function() {
                    console.log('beforeResize fired!');
                },
                afterResize: function() {
                    console.log('afterResize fired!');
                }



            });

            // Show / hide menu panel
            $('#hidePanel').on('click', function() {
                if ($('.panel').css('display') !== 'none') {
                    $('#hidePanel').text('>>');
                    $('.panel').hide();
                    $('.mainbag').css({
                        'left': '0px'
                    });
                    $.fn.viewScroller.setSpaceMainBag(0); // sets mainbag's width when panel is closed
                } else {
                    $('#hidePanel').text('<<');
                    $('.panel').show();
                    $('.mainbag').css({
                        'left': '140px'
                    });
                    $.fn.viewScroller.setSpaceMainBag(140); // sets mainbag's width when panel is open
                }
            });

            //Show / hide examples panel
            $('.examples').hide();
            $('.examples-show').click(function() {
                $('.examples').toggle();
            });

            // Turnon / turnoff the scroll views when they are animate
            $('#scroll').on('click', function() {
                if ($('#scroll').prop("checked")) {
                    $.fn.viewScroller.setChangeWhenAnim(true);
                } else {
                    $.fn.viewScroller.setChangeWhenAnim(true);
                }
            });
            
            });

    </script>
    <script>
        $(function () {
            $('.hamburger').click(function () {
                $('.hamburger').toggleClass('open');
                $('#menuBarra').toggleClass('muestraMenu');
                $('#side').toggleClass('sideOpen');
                $('#sidePrev').toggleClass('sideOpen');
                $('#sideNex').toggleClass('sideOpen');
                $('#sideFoot').toggleClass('sideOpen');
            });
            $('#v1').change(function () {
            	console.log('asd');
            });
        });



    </script>


</body>

</html>
            
          
!
            
              /*animacion*/

/*******MENU HAMBURGUESA*************/
            .hamburger 
            {
                min-height: 30px;
                max-width: 50px;
            }

            .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
                background-color: #fff;
                position: absolute;
                width: 40px;
                height: 4px;
                border-radius: 5px;
                content: '';
                transition-timing-function: ease;
                transition-duration: .2s;
                transition-property: opacity,-webkit-transform;
                transition-property: transform,opacity;
                transition-property: transform,opacity,-webkit-transform;
            }

            .hamburger-inner:before {
                top: 10px;
            }

            .hamburger-inner:after {
                top: 20px;
            }

            .hamburger.open .hamburger-inner {
                -webkit-transform: translate3d(0,10px,0) rotate(45deg);
                transform: translate3d(0,10px,0) rotate(45deg);
            }

            .hamburger.open .hamburger-inner:after {
                -webkit-transform: translate3d(0,-20px,0) rotate(-90deg);
                transform: translate3d(0,-20px,0) rotate(-90deg);
            }

            .hamburger.open .hamburger-inner:before {
                -webkit-transform: translate3d(0,-20px,0) rotate(90deg);
                transform: translate3d(0,-20px,0) rotate(90deg);
                opacity: 0;
            }
 @font-face {
  font-family: effra-bold;
  src: url(fonts/Effra_Std_Bd.ttf);
  }
  @font-face {
  font-family: effra-light;
  src: url(fonts/Effra_Std_Lt.ttf);
  }
  @font-face {
  font-family: effra-regular;
  src: url(fonts/Effra_Std_Rg.ttf);
  }

body
{
    font-family: effra-regular;
}
button,
input {
    font: inherit;
    margin: 0;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
    border-style: none;
}

/* Custom views styles */

.view1 {
background-color: #2ABAAE;
}

.view2 {
    background-color: #2ABAAE;
}

.view3 {
background-color: green;
}

.view4 {
    background-color: #13544F;
}

.view5 {
    background-color: #fff;
}
.view6 {
    background-color: #fff;
}
.view7 {
    background-color: #fff;
}


.subview-a {
        background-image: linear-gradient(
      rgba(0, 0, 0, 0.3), 
      rgba(0, 0, 0, 0.3)
    ),
 url(imagenes/sec-mano-santa.jpg); 
    background-repeat: no-repeat;
    /*background-position: center -200%;*/
    /*background: linear-gradient(to left, #1A1E26 , #1F3350);*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    /*background-attachment: fixed;*/
    height: 100%
}

.subview-b {
    background-color: #0EAB91;
}

.subview-c {
    background-color: #13AD58;
}

.subview-d {
    background-color: #fff;
}

.subview-e {
    background-color: #23dc94;
}

/* GUI */

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -100px;
    width: 200px;
    height: 150px;
    background-color: #ff3547;
    border-radius: 10px;
    box-shadow: 5px 4px 0 0 rgba(179, 13, 35, 1);
}

.info {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -35px;
    margin-left: -100px;
    width: 200px;
    height: 70px;
    font-family: Arial, Tahoma;
    font-size: 32px;
    text-align: center;
}

.menu {
    position: fixed;
    margin-top: 50px;
    font-family: Arial, Tahoma;
    font-size: 13px;
    z-index: 10;
}

.menu-text {
    position: fixed;
    bottom: 10px;
    line-height: 28px;
    font-family: Arial, Tahoma;
    font-size: 14px;
    border-radius: 5px;
    padding: 5px 5px;
    background-color: #fff;
    z-index: 20;
}

.panel {
    position: fixed;
    height: 100%;
    width: 140px;
    background-color: #e2face;
}

.pos {
    font-family: Arial, Tahoma;
    font-size: 14px;
}

.link:hover,
.link-small:hover {
    text-decoration: underline;
}

.link-small {
    font-size: 11px;
}

.forkme {
    position: fixed;
    z-index: 30;
    top: 0;
    right: 0;
    border: 0;
}

.logo {
    width: 80%;
    min-width: 230px;
    min-height: 230px;
    max-width: 488px;
    max-height: 488px;
}

.arrows {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 10;
}

.examples {
    position: fixed;
    top: 0;
    left: 140px;
    width: 200px;
    height: 100%;
    padding-left: 10px;
    z-index: 10;
    /*border-right: 10px solid #fff;*/
    background: rgba(255, 255, 255, 0.6);
    font-family: Arial;
    font-size: 16px;
}

.scroll-checkbox {
    position: relative;
    margin-top: 25px;
    width: 100px;
    font-family: Arial, Tahoma;
    font-size: 10px;
}

/*****************************/

#side {
    position: absolute;
    z-index: 2;
    right: 0%;
    top: 0%;
    width: 10%;
    height: 40%;
    background-color: #d85f4c;
    transition-timing-function: ease;
    transition-duration: 0.3s;
}
.sideOpen {
    right: 21% !important;
    transition-timing-function: ease;
    transition-duration: 0.3s;

}
#sidePrev {
    position: absolute;
    z-index: 2;
    right: 0%;
    top: 40%;
    width: 10%;
    height: 15%;
    background-color: #ffdede;
    transition-timing-function: ease;
    transition-duration: 0.3s;
}
#sideNex {
    position: absolute;
    z-index: 2;
    right: 0%;
    top: 55%;
    width: 10%;
    height: 15%;
    background-color: #fff;
    transition-timing-function: ease;
    transition-duration: 0.3s;
}
#sideFoot {
    position: absolute;
    z-index: 2;
    right: 0%;
    top: 70%;
    width: 10%;
    height: 30%;
    background-color: rgba(0, 0, 0, 0.8);
    padding-top: 55px;
    padding-left: 60px;
    transition-timing-function: ease;
    transition-duration: 0.3s;
}
/**DSf**/
#side2 {
    position: absolute;
    z-index: 2;
    right: 0%;
    top: 0%;
    width: 10%;
    height: 40%;
    background-color: #d85f4c;
    transition-timing-function: ease;
    transition-duration: 0.3s;
}
.sideOpen2 {
    right: 21% !important;
    transition-timing-function: ease;
    transition-duration: 0.3s;

}
#sidePrev2 {
    position: absolute;
    z-index: 2;
    right: 0%;
    top: 40%;
    width: 10%;
    height: 15%;
    background-color: #ffdede;
    transition-timing-function: ease;
    transition-duration: 0.3s;
}
#sideNex2 {
    position: absolute;
    z-index: 2;
    right: 0%;
    top: 55%;
    width: 10%;
    height: 15%;
    background-color: #fff;
    transition-timing-function: ease;
    transition-duration: 0.3s;
}
#sideFoot2 {
    position: absolute;
    z-index: 2;
    right: 0%;
    top: 70%;
    width: 10%;
    height: 30%;
    background-color: rgba(0, 0, 0, 0.8);
    padding-top: 55px;
    padding-left: 60px;
    transition-timing-function: ease;
    transition-duration: 0.3s;
}
#header {
    position: fixed;
    z-index: 2;
    left: 0%;
    top: -10%;
    width: 100%;
    background-color: transparent;
}
.logoUp {
    position: absolute;
    z-index: 2;
    left: 10%;
    top: 5%;
    width: 30%;
    height: 40%;
}   
.tituloSection
{
    /* Safari */
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* IE */
    -ms-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    position: absolute;
    font-size: 1.5em;
    font-weight: 700;
    color: white;
    right: 5%;
    top: 60%;
    font-family: effra-regular;
    width: 122px;
}
.indicadorNext
{
    position: absolute;
    top: 35%;
    left: 30%
}

.indicadorPrev
{
    position: absolute;
    top: 35%;
    left: 30%
}
.whiteIcons
{
    color: white;
}
#menuBarra
{
    z-index: 2;
    width: 0px;
    position: absolute;
    top: 0%;
    right: 0%;
    background-color: #d85f4c;
    transition-timing-function: ease;
    transition-duration: 1.0s;
}
.muestraMenu
{
    width: 287px !important;
    height: 100%;
    position: absolute;
    background-color: #d85f4c;
    top: 0%;
    right: 0%;
    z-index: 2;
}
/*RDGT*/
#menuBarra2
{
    z-index: 2;
    width: 0px;
    position: absolute;
    top: 100%;
    right: 0%;
    background-color: #d85f4c;
    transition-timing-function: ease;
    transition-duration: 1.0s;
}
.muestraMenu2
{
    width: 287px !important;
    height: 100%;
    position: absolute;
    background-color: #d85f4c;
    top: 0%;
    right: 0%;
    z-index: 2;
}
.icMenu
{
    padding-top: 10px;
    padding-left: 50px
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.main-nav {
  background: darkslateblue;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.menu {
  transition: all 0.5s;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  opacity: 0;
  visibility: hidden;
}
.menu__item {
  margin: 0 15px;
}
.menu__link {
  color: #fff;
  text-decoration: none;
}
.menu-bar {
  width: 30px;
  margin: 0 10px;
  cursor: pointer;
}
.uno,
.dos,
.tres {
  width: 100%;
  background: white;
  height: 3px;
  transition: all 0.5s;
}
.dos {
  margin: 5px 0;
}


/****************************/


a {
    text-decoration: none;
    color: #000;
}

h1 {
    margin-left: 18px;
    font-family: Arial, Tahoma;
    font-size: 20px;
    color: #0c7068;
}

ul li {
    list-style-type: none;
    padding-top: 5px;
    margin-left: -20px;
}

input[type="button"] {
    -webkit-appearance: none;
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px #000;
}

input[type="button"]:hover {
    background-color: #fff;
}

input[type="button"]:active {
    background-color: #fff;
    box-shadow: 0 1px #000;
    transform: translateY(2px);
}

/* Main buttons */

.btn-own {
    padding: 10px 20px;
    border: 0 none;
    border-radius: 6px;
    font-family: Arial, Tahoma;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-own:focus,
.btn-own:active:focus,
.btn-own.active:focus {
    outline: 0 none;
}

.buttons-section {
    position: relative;
    top: 20px;
    height: 45px;
}

.buttons-section-fxd {
    position: fixed;
    top: 20px;
    height: 60px;
}

.hidepanel-button {
    position: absolute;
    height: 50px;
    left: -150px;
}

.nextword-button {
    position: absolute;
    height: 50px;
    left: -25px;
}

/* Standard buttons */

.btn-own-changeview {
    background: #31cde8;
    color: #ffffff;
}

.btn-own-changeview:hover,
.btn-own-changeview:focus,
.btn-own-changeview:active {
    background: #5fd4e8;
}

.btn-own-changeview:active,
.btn-own-changeview.active {
    background: #35a2b5;
    box-shadow: none;
}

.btn-own-hidepanel {
    background: #f25454;
    color: #ffffff;
}

.btn-own-hidepanel:hover,
.btn-own-hidepanel:focus,
.btn-own-hidepanel:active {
    background: #f26d6d;
}

.btn-own-hidepanel:active,
.btn-own-hidepanel.active {
    background: #bf4343;
    box-shadow: none;
}

/* Raised buttons */

.btn-own-changeview.raised {
    box-shadow: 0 3px 0 0 #35a2b5;
}

.btn-own-changeview.raised:active {
    background: #5fd4e8;
    box-shadow: none;
    margin-bottom: -20px;
    margin-top: 3px;
}

.btn-own-hidepanel.raised {
    box-shadow: 0 3px 0 0 #bf4343;
}

.btn-own-hidepanel.raised:active {
    background: #f26d6d;
    box-shadow: none;
    margin-bottom: -20px;
    margin-top: 3px;
}

@media screen and (max-height: 700px) {
    .examples {
        font-size: 13px;
    }
    .logo {
        width: 50%;
        min-width: 220px;
        min-height: 220px;
        max-width: 488px;
        max-height: 488px;
    }
    .forkme {
        width: 100px;
        height: 100px;
    }
    .arrows {
        display: none;
    }
    .btn-own {
        padding: 6px 20px;
    }
    .buttons-section {
        top: 0;
        height: 31px;
    }
    .buttons-section-fxd {
        top: 10px;
        height: 20px;
    }
    .btn-own-changeview.raised {
        box-shadow: 0 2px 0 0 #35a2b5;
    }
    .btn-own-hidepanel.raised {
        box-shadow: 0 2px 0 0 #bf4343;
    }
}

@media screen and (max-width: 550px) {
    .logo {
        width: 50%;
        min-width: 220px;
        min-height: 220px;
        max-width: 488px;
        max-height: 488px;
    }
    .forkme {
        width: 100px;
        height: 100px;
    }
}
            
          
!
            
              /* 
 * =================================================
 * viewScroller
 * Version: 2.1.1
 * Copyright (c) 2016 Marcin Gierczak
 * http://www.viewdesic.com
 * =================================================
 */

(function($) {
    $.fn.viewScroller = function(params) {

        // User's settings of this plugin
        if (typeof params === "object") {
            params = $.extend({
                // Animation
                animSpeedMainView: 700, // Animation speed of mainviews: 0 - fastest
                animSpeedSubView: 700, // Animation speed of subviews: 0 - fastest
                animEffectMainView: 'easeInOutCubic', // Animation effect of mainviews change - jQuery (easing)
                animEffectSubView: 'easeInOutCubic', // Animation effect of subviews change - jQuery (easing)
                animEffectMainViewCss3: 'ease', // Animation effect of mainviews change - CSS3 (easing)
                animEffectSubViewCss3: 'ease', // Animation effect of subviews change - CSS3 (easing)

                // Steering
                useKeyboard: true, // Use keyboard to change views
                useScrollbar: false, // Use scrollbar to change views
                changeWhenAnim: true, // Change views when they are changing
                loopMainViews: false, // Change horizontal views (mainviews) in loop mode
                loopSubViews: false, // Change vertical views (subviews) in loop mode
                fitToView: true, // Will the browser fit to the closest view (works if the useScrollbar option is true)
                timeToFit: 1000, // Time between stop scrolling and start fitting to the closest view

                // Mainbag dimension
                fixedWidth: 0, // (in px) width of the mainbag - if 0 - then width = 100% of window (in px) = .mainbag { width: XXX }
                spaceMainBag: 0, // (in px) a total value of the right and the left CSS margin dimensions of the .mainbag, for example: if .mainbag { left: XXX, right: YYY} then spaceMainBag = XXX + YYY

                // Callbacks
                beforeChange: null, // Callback which is called before views change
                afterChange: null, // Callback which is called after views change
                beforeResize: null, // Callback which is called before browser window resize
                afterResize: null, // Callback which is called after browser window resize

                // Views size
                viewsHeight: [] // Array of mainviews height
            }, params);
        }

        // Main functions
        $.fn.viewScroller.setAnimSpeedMainView = function(val) {
            params.animSpeedMainView = parseInt(val, 10) || 700;
        };

        $.fn.viewScroller.setAnimSpeedSubView = function(val) {
            params.animSpeedSubView = parseInt(val, 10) || 700;
        };

        $.fn.viewScroller.setAnimEffectMainView = function(effectName) {
            params.animEffectMainView = effectName;
        };

        $.fn.viewScroller.setAnimEffectSubView = function(effectName) {
            params.animEffectSubView = effectName;
        };

        $.fn.viewScroller.setAnimEffectMainViewCss3 = function(effectName) {
            params.animEffectMainViewCss3 = effectName;
        };

        $.fn.viewScroller.setAnimEffectSubViewCss3 = function(effectName) {
            params.animEffectSubViewCss3 = effectName;
        };

        $.fn.viewScroller.setUseKeyboard = function(isActive) {
            if (isActive === true || isActive === false)
                params.useKeyboard = isActive;
        };

        $.fn.viewScroller.setUseScrollbar = function(isActive) {
            changeView(allBagObjs[0], allBagObjs[0].viewsData.views[0], false, false);
            if (isActive === true || isActive === false)
                params.useScrollbar = isActive;
            changeCssOnScrollbarVisible();
            onResize(false, false, false);
        };

        $.fn.viewScroller.setChangeWhenAnim = function(isActive) {
            if (isActive === true || isActive === false)
                params.changeWhenAnim = isActive;
        };

        $.fn.viewScroller.setLoopMainViews = function(isActive) {
            if (isActive === true || isActive === false)
                params.loopMainViews = isActive;
        };

        $.fn.viewScroller.setLoopSubViews = function(isActive) {
            if (isActive === true || isActive === false)
                params.loopSubViews = isActive;
        };

        $.fn.viewScroller.setFitToView = function(isActive) {
            if (isActive === true || isActive === false)
                params.fitToView = isActive;
        };

        $.fn.viewScroller.setTimeToFit = function(val) {
            params.timeToFit = parseInt(val, 10) || 1000;
        };

        $.fn.viewScroller.setFixedWidth = function(val) {
            params.fixedWidth = parseInt(val, 10) || 0;
            setMainbagDimWhenFixed();
            calcViewsDimensions();
            onResize(false, true, false);
        };

        $.fn.viewScroller.setSpaceMainBag = function(val) {
            params.spaceMainBag = parseInt(val, 10) || 0;
            calcViewsDimensions();
            onResize(false, true, false);
        };

        $.fn.viewScroller.showMainView = function(dir) {
            if (dir === 'next') {
                showMainView(direction.NEXT);
            } else {
                showMainView(direction.PREV);
            }
        };

        $.fn.viewScroller.showSubView = function(bagNbr, dir) {
            if (dir === 'next') {
                showSubView(bagNbr, direction.NEXT);
            } else {
                showSubView(bagNbr, direction.PREV);
            }
        };

        $.fn.viewScroller.showView = function(anchor) {
            setHash(anchor, false);
        };

        $.fn.viewScroller.getCurrentBagNbr = function() {
            return getCurrBagNbr();
        };

        // Main classes
        var mainbag_sel = '.mainbag', // mainbag class
            subbag_sel = '.subbag', // subbag class
            mainview_sel = '.mainview', // mainview class
            subview_sel = '.subview', // subview class
            anchor_sel = '.vs-anchor', // Any anchor class
            active_sel = '.vs-active', // Active view class
            center_sel = '.vs-center', // Any content class inside a view
            subviewprev_sel = '.vs-subview-prev', // Class for the element which changes current subview to the previous subview
            subviewnext_sel = '.vs-subview-next', // Class for the element which changes current subview to the next subview
            mainviewprev_sel = '.vs-mainview-prev', // Class for the element which changes current mainview to the previous mainview
            mainviewnext_sel = '.vs-mainview-next', // Class for the element which changes current mainview to the next mainview
            getallmainviews_sel = mainbag_sel + '>' + mainview_sel, // Select all mainviews from the mainbag
            getallsubviews_sel = subbag_sel + '>' + subview_sel; // Select all subviews from the subbag

        // Types of bags (container for views)
        var bagType = {
            MAINBAG: 0, // Bag type for mainviews
            SUBBAG: 1 // Bag type for subviews
        };

        // DO NOT CHANGE!!! Shows view direction 
        var direction = {
            NEXT: 1,
            PREV: -1
        };

        var timeoutId = 0, // DO NOT CHANGE!!! setTimeout of bindHash function
            timeouts = [], // DO NOT CHANGE!!! Array of setTimeouts for scrolling
            times = 0, // DO NOT CHANGE!!! How many times beforeChange event has been fired
            allBagObjs = [], // DO NOT CHANGE!!! Array of all bag objects (one mainbag and all subbags)
            byAnchor = false, // DO NOT CHANGE!!! Is this first time when views are changing by anchor
            currentMainView = '', // DO NOT CHANGE!!! Name of current view
            stopHashEvent = false, // DO NOT CHANGE!!!
            $window = $(window), // DO NOT CHANGE!!!
            $document = $(document), // DO NOT CHANGE!!! 
            windowHeight = $window.height(), // DO NOT CHANGE!!!
            windowWidth = $window.width(), // DO NOT CHANGE!!!
            isChanging = false, // DO NOT CHANGE!!!
            isStart = false, // DO NOT CHANGE!!! Declare hidden scrolling effect
            startTime = Date.now(), // DO NOT CHANGE!!! For mousewheel events handling
            stepViaX = 10, // Step to start scrolling a page by X axis (in px) - for touch only!
            stepViaY = 50, // Step to start scrolling a page by Y axis (in px) - for touch only!
            correctHeight = true, // Corrects height of each view when mobile browser's toolbar has been hidden/shown (this generates visual skip effect)
            css3Active = true; // CSS3 or jQuery animate will be used to change views

        // ----------------------------------------
        // START SELECTOR CACHE
        // ----------------------------------------

        // Selector cache function
        function SelectorCache() {
            var collection = {};

            function getFromCache(selector) {
                if (undefined === collection[selector]) {
                    collection[selector] = $(selector);
                }
                return collection[selector];
            }

            return {
                get: getFromCache
            };
        }

        // Creates cache object
        var sel = new SelectorCache();

        // ----------------------------------------
        // START VIEWS LOGIC
        // ----------------------------------------

        // CSS3 support detection
        var detectCssTrans = function() {
            var es = document.createElement('p').style,
                cssTransSupport = 'transition' in es ||
                'WebkitTransition' in es ||
                'MozTransition' in es ||
                'msTransition' in es ||
                'OTransition' in es;
            return cssTransSupport; // true || false
        };

        // Adds indexOf function for IE8 only (polyfill)
        var addIndexOf = function() {
            if (!Array.prototype.indexOf) { // IE8 only - add indexOf function
                Array.prototype.indexOf = function(viewsData, start) {
                    var len = this.length;
                    for (var i = (start || 0), j = len; i < j; i++) {
                        if (this[i] === viewsData) {
                            return i;
                        }
                    }
                    return -1;
                };
            }
        };

        // Adds includes function to IE (polyfill) - ECMAScript 6
        var addIncludes = function() {
            if (!String.prototype.includes) {
                String.prototype.includes = function() {
                    'use strict';
                    return String.prototype.indexOf.apply(this, arguments) !== -1;
                };
            }
        };

        // Checks if resize event is fired during mobile orientation change
        var isMobile = function() {
            if (typeof window.orientation !== 'undefined') { // Smartphones usually support this property but not desktop browsers
                return true;
            }
            return false;
        };

        // Checks if orientation has been changed
        var isMobileOrientation = function() {
            var currWindowHeight = $window.height(),
                currWindowWidth = $window.width();
            if (Math.abs(windowHeight - currWindowHeight) > 100) {
                windowHeight = currWindowHeight;
                return true;
            }
            if (Math.abs(windowWidth - currWindowWidth) > 100) {
                windowWidth = currWindowWidth;
                return true;
            }
            return false;
        };

        // Gets view name
        var getViewName = function(mainViewNbr, view) {
            var viewId = '#' + view.attr('vs-anchor');
            if (viewId === '#undefined') {
                viewId = '';
            }
            return mainViewNbr + viewId;
        };

        // Gets all mainviews from the mainbag
        var getAllMainViews = function() {
            var mainViews = [];
            sel.get(getallmainviews_sel).each(function(mainViewNbr) {
                mainViews.push(getViewName(mainViewNbr, $(this)));
            });
            return mainViews;
        };

        // Gets all subviews from specified mainview
        var getAllSubViews = function(mainViewNbr) {
            var subViews = [];
            // Gets specified (based on mainViewNbr) mainview from mainbag
            var getSpecifiedMainView = sel.get(getallmainviews_sel).slice(mainViewNbr, mainViewNbr + 1);
            // Gets all subviews from specified mainview
            getSpecifiedMainView.find(sel.get(getallsubviews_sel)).each(function(subViewNbr) {
                subViews.push(getViewName(subViewNbr, $(this)));
            });
            var subViewNbr = 0,
                len = subViews.length;
            while (subViewNbr < len) {
                subViewNbr++;
            }
            return subViews;
        };

        // Gets bag number which includes the view
        var getBagNbr = function(viewName) {
            for (var bagObjNbr = 0, len = allBagObjs.length; bagObjNbr < len; bagObjNbr++) {
                for (var viewNbr = 0, len2 = allBagObjs[bagObjNbr].viewsData.views.length; viewNbr < len2; viewNbr++) {
                    if (allBagObjs[bagObjNbr].viewsData.views[viewNbr].split('#')[1] === viewName) {
                        return bagObjNbr;
                    }
                }
            }
            return -1;
        };

        // Gets current bag number for the viewname from url
        var getCurrBagNbr = function() {
            if (window.location.hash.indexOf('#') > -1) {
                urlViewName = window.location.hash.replace('#', '');
                var subviews = [],
                    anchor_sel = 'div[vs-anchor=' + urlViewName + '], section[vs-anchor=' + urlViewName + '], article[vs-anchor=' + urlViewName + ']';
                sel.get(anchor_sel).find(sel.get(getallsubviews_sel)).each(function(idx) {
                    subviews.push($(this).attr('vs-anchor'));
                });
                if (subviews.length > 0) {
                    return getBagNbr(subviews[0]);
                } else if (subviews.length === 0) {
                    sel.get(anchor_sel).parents(sel.get(subbag_sel)).each(function(idx) {
                        subviews.push($(this).attr('class'));
                    });
                    if (subviews.length > 0) {
                        if (subviews[0].includes(subbag_sel.replace('.', ''))) {
                            return getBagNbr(urlViewName);
                        }
                    }
                }
                return -1;
            } else {
                return 0;
            }
        };

        // Sets hash in the URL
        var setHash = function(id, addHash) {
            if (addHash === true) {
                stopHashEvent = true;
            } else {
                stopHashEvent = false;
            }
            window.location.hash = id;
        };

        // Creates bag object
        var createBagObj = function(container, views, bagType) {
            var newBagObj = new bagObject();
            newBagObj.setBagObj(container, views, bagType);
            return newBagObj;
        };

        // Creates bag objects for all subviews inside each mainview
        var createBagObjsForAllSubViews = function(mainViews) {
            var subViews = [],
                mainViewName = '',
                mainViewNbr = 0,
                subViewNbr = 0,
                len = mainViews.length;
            while (mainViewNbr < len) {
                subViews = getAllSubViews(mainViewNbr);
                mainViewName = mainViews[mainViewNbr].split('#')[1];
                if (subViews.length > 0) {
                    allBagObjs.push(createBagObj(subbag_sel + '|' + subViewNbr + '|' + mainViewName + '|' + mainViewNbr, subViews, bagType.SUBBAG));
                    subViewNbr++;
                }
                mainViewNbr++;
            }
        };

        // Creates bag objects for all views
        var createBagObjsForAllViews = function() {
            var mainViews = getAllMainViews();
            allBagObjs.push(createBagObj(mainbag_sel, mainViews, bagType.MAINBAG));
            createBagObjsForAllSubViews(mainViews);
        };

        // Changes view on the hash change
        var changeViewOnHashChange = function(e) {
            if (stopHashEvent === false && window.location.hash.indexOf('#') > -1) {
                var id = window.location.hash.replace('#', ''),
                    viewData = getViewDataForID(id);
                if (typeof viewData !== 'undefined' && viewData.length > 0) {
                    changeView(allBagObjs[viewData[0]], viewData[1], false, false);
                }
            }
            stopHashEvent = false;
        };

        // Looks for anchor id among all views in all bag objects and return the view data which has the same id
        var getViewDataForID = function(id) {
            var viewData = [];
            for (var subObjNbr = 0, len = allBagObjs.length; subObjNbr < len; subObjNbr++) {
                var views = allBagObjs[subObjNbr].viewsData.views,
                    bagType = allBagObjs[subObjNbr].viewsData.bagType;
                for (var viewNbr = 0, len2 = views.length; viewNbr < len2; viewNbr++) {
                    if (views[viewNbr].indexOf('#') > -1) {
                        if (views[viewNbr].split('#')[1] === id) {
                            viewData.push(subObjNbr, views[viewNbr], bagType);
                            return viewData;
                        }
                    }
                }
            }
        };

        // Gets view number
        var getViewNbr = function(bagObj, direction) {
            var nbr = bagObj.viewsData.views.indexOf(bagObj.viewsData.activeView) + direction;
            if ((params.loopSubViews && typeof bagObj.viewsData.views[nbr] === 'undefined' && bagObj.viewsData.container.includes(subbag_sel)) ||
                (params.loopMainViews && typeof bagObj.viewsData.views[nbr] === 'undefined' && bagObj.viewsData.container.includes(mainbag_sel))) {
                nbr = nbr < 0 ? bagObj.viewsData.views.length - 1 : 0;
            }
            return nbr;
        };

        // Adds styles to the bag selectors when useScrollbar option is enabled
        var changeCssOnScrollbarVisible = function() {
            if (params.useScrollbar) {
                sel.get('html').css('overflow-y', 'scroll');
                sel.get('body').css('overflow-y', '');
            } else {
                sel.get('body').css('overflow-y', 'hidden'); // Needed due to Firefox when useScrollbar = false, not required in other browsers
                sel.get('html').css('overflow-y', 'hidden');
            }
        };

        // Checks if window has been resized
        var checkIfResize = function(animSpeed, isResize) {
            if (isResize) {
                return 1;
            } else {
                return animSpeed;
            }
        };

        // Sets views position
        var calcViewsPos = function(bagObj) {
            var viewsPos = [];
            bagObj.viewsData.viewsPos.length = 0;
            var isValidVHA = isValidViewsHeightArray();
            for (var viewNbr = 0, len = bagObj.viewsData.views.length; viewNbr < len; viewNbr++) {
                if (bagObj.viewsData.bagType === bagType.SUBBAG) {
                    setSubViewsPos(bagObj, viewNbr);
                } else {
                    setMainViewsPos(bagObj, viewNbr, isValidVHA);
                }
            }
        };

        // Sets subviews position
        var setSubViewsPos = function(bagObj, viewNbr) {
            var width = sel.get(mainbag_sel).width();
            windowWidth = $window.width();
            if (params.fixedWidth === 0) {
                width = windowWidth - params.spaceMainBag;
            } else {
                width = params.fixedWidth;
            }
            bagObj.viewsData.viewsPos.push(width * viewNbr);
        };

        // Sets mainviews position
        var setMainViewsPos = function(bagObj, viewNbr, isValidVHA) {
            windowHeight = $window.height();
            if (viewNbr === 0) {
                bagObj.viewsData.viewsPos.push(0);
            } else if (viewNbr > 0 && isValidVHA && params.viewsHeight.length >= viewNbr && params.viewsHeight[viewNbr - 1] !== 0) {
                bagObj.viewsData.viewsPos.push(bagObj.viewsData.viewsPos[viewNbr - 1] + params.viewsHeight[viewNbr - 1]); // Sets view size defined by a user
            } else if (viewNbr > 0) {
                bagObj.viewsData.viewsPos.push(bagObj.viewsData.viewsPos[viewNbr - 1] + windowHeight); // Sets default view size (100% vh/vw)
            }
        };

        // Calculates which view is closer to the current scroll position
        var calcViewPos = function(viewsPosArr) {
            var currPos = $window.scrollTop(),
                prevDiffPos = 0,
                diffPos = 0,
                getArrNbr = 0;
            for (var viewPosNbr = 0, len = viewsPosArr.length; viewPosNbr < len; viewPosNbr++) {
                diffPos = Math.abs(viewsPosArr[viewPosNbr] - currPos);
                if (diffPos < prevDiffPos) {
                    getArrNbr = viewPosNbr;
                }
                prevDiffPos = diffPos;
            }
            return getArrNbr; // Returns view number which includes the closest value to the current scroll position
        };

        // Sets width and height css properties for mainviews and subviews
        var calcViewsDimensions = function() {
            var width = sel.get(mainbag_sel).width(),
                height = $window.height();
            if (params.fixedWidth === 0) {
                width = $window.width() - params.spaceMainBag;
            } else {
                width = params.fixedWidth;
            }
            sel.get(mainbag_sel).css('width', width + 'px');
            sel.get(mainview_sel).css('height', height + 'px');
            if (isValidViewsHeightArray()) {
                setViewHeight(height);
            }
            sel.get(subview_sel).css('width', width + 'px');
            sel.get(subbag_sel).each(function(idx) {
                $(this).css('width', width * $(this).find(subview_sel).length + 'px'); // How many subviews are placed inside the subbag
            });
            if (css3Active) {
                sel.get(mainbag_sel).css('height', 'auto');
            }
        };

        // Sets mainviews height
        var setViewHeight = function(height) {
            Array.prototype.forEach.call(params.viewsHeight, function(viewHeight, viewNbr) {
                var currViewHeight = parseInt(viewHeight, 10);
                if (currViewHeight === 0) {
                    currViewHeight = height;
                }
                viewNbr = viewNbr + 1;
                sel.get(mainview_sel + ':nth-child(' + viewNbr + ')').css('height', currViewHeight + 'px');
            });
        };

        // Checks if viewsHeight array is valid
        var isValidViewsHeightArray = function() {
            var isValid = true;
            Array.prototype.forEach.call(params.viewsHeight, function(viewHeight) {
                if (isNaN(viewHeight) || parseInt(viewHeight, 10) < 0) {
                    isValid = false;
                }
            });
            return isValid;
        };

        // Adds own classes with subbag number
        var addClassesForSubBags = function() {
            sel.get(subbag_sel).each(function(subBagNbr) {
                $(this).addClass(subbag_sel.replace('.', '') + '-' + subBagNbr);
            });
        };

        // Adds wrappers for subbags (generates tag: <div style="..."'>subbag</div>
        var addWrappersForSubBags = function() {
            sel.get(subbag_sel).wrap('<div style="overflow: hidden; height: 100%; width: 100%;"></div>');
        };

        // Sets dimension of mainbag includes rooms for menu right or left
        var setStartDimension = function() {
            if (params.fixedWidth === 0) {
                sel.get(mainbag_sel).css('width', sel.get(mainbag_sel).width() - params.spaceMainBag + 'px');
            } else {
                sel.get(mainbag_sel).css('width', params.fixedWidth + 'px');
            }
        };

        // Sets mainbag's position on absolute when its width is fixed
        var setMainbagDimWhenFixed = function() {
            if (params.fixedWidth > 0) {
                sel.get(mainbag_sel).css({
                    'position': 'absolute'
                });
            }
        };

        // Sets active view (for vs-active class)
        var setActiveView = function() {
            sel.get(mainbag_sel).find(sel.get(active_sel)).each(function(viewNbr) {
                if (viewNbr === 0) {
                    setHash($(this).attr('vs-anchor'));
                }
            });
        };

        // Shows next or prev subview
        var showSubView = function(currBagNbr, dir) {
            if (currBagNbr > -1) {
                // Prevent views from scrolling when they are still animate
                if (params.changeWhenAnim || (!params.changeWhenAnim && !isChanging)) {
                    changeView(allBagObjs[currBagNbr], '', false, false, dir);
                }
            }
        };

        // Shows next or prev mainview
        var showMainView = function(dir) {
            // Prevent views from scrolling when they are still animate
            if (params.changeWhenAnim || (!params.changeWhenAnim && !isChanging)) {
                changeView(allBagObjs[0], '', false, false, dir);
            }
        };

        // Scrolls views on x or y axis - via CSS3
        var translateElement = function(elem, viewPos, isResize, orientation, callback) {
            if (orientation === 'x') {
                var doResizeSubView = checkIfResize(params.animSpeedMainView, isResize);
                elem.css({
                    '-webkit-transition': 'all ' + doResizeSubView + 'ms ' + params.animEffectSubViewCss3 + ' 0ms',
                    '-moz-transition': 'all ' + doResizeSubView + 'ms ' + params.animEffectSubViewCss3 + ' 0ms',
                    '-o-transition': 'all ' + doResizeSubView + 'ms ' + params.animEffectSubViewCss3 + ' 0ms',
                    'transition': 'all ' + doResizeSubView + 'ms ' + params.animEffectSubViewCss3 + ' 0ms',
                    '-webkit-transform': 'translate3d(' + viewPos + 'px,0,0)',
                    '-moz-transform': 'translate3d(' + viewPos + 'px,0,0)',
                    '-o-transform': 'translate3d(' + viewPos + 'px,0,0)',
                    'transform': 'translate3d(' + viewPos + 'px,0,0)'
                });
            } else {
                var doResizeMainView = checkIfResize(params.animSpeedMainView, isResize);
                elem.css({
                    '-webkit-transition': 'all ' + doResizeMainView + 'ms ' + params.animEffectMainViewCss3 + ' 0ms',
                    '-moz-transition': 'all ' + doResizeMainView + 'ms ' + params.animEffectMainViewCss3 + ' 0ms',
                    '-o-transition': 'all ' + doResizeMainView + 'ms ' + params.animEffectMainViewCss3 + ' 0ms',
                    'transition': 'all ' + doResizeMainView + 'ms ' + params.animEffectMainViewCss3 + ' 0ms',
                    '-webkit-transform': 'translate3d(0,' + viewPos + 'px,0)',
                    '-moz-transform': 'translate3d(0,' + viewPos + 'px,0)',
                    '-o-transform': 'translate3d(0,' + viewPos + 'px,0)',
                    'transform': 'translate3d(0,' + viewPos + 'px,0)'
                });
            }
            // Calls when CSS3 transition is over
            elem.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
                if (typeof callback === 'function') {
                    callback();
                }
            });
        };

        // Scrolls views on x or y axis - via jQuery
        var animatejQuery = function(elem, viewPos, isResize, orientation, callback) {
            if (orientation === 'x') {
                elem.stop().animate({
                    scrollLeft: viewPos
                }, checkIfResize(params.animSpeedSubView, isResize), params.animEffectSubView, function() {
                    // Calls when jQuery animation is over
                    if (typeof callback === 'function') {
                        callback();
                    }
                });
            } else {
                elem.stop().animate({
                    scrollTop: viewPos
                }, checkIfResize(params.animSpeedMainView, isResize), params.animEffectMainView, function() {
                    // Calls when jQuery animation is over
                    if (typeof callback === 'function') {
                        callback();
                    }
                });
            }
        };

        // Shows specified view - this function manage of views change
        var changeView = function(bagObj, viewName, isResize, isScroll, direction) {
            if (typeof direction !== 'undefined') { // Show next or previous view
                viewName = bagObj.viewsData.views[getViewNbr(bagObj, direction)];
            }

            if (bagObj.viewsData.views.length > 0 && typeof viewName !== 'undefined') {
                var indexOfView = bagObj.viewsData.views.indexOf(viewName),
                    viewPosition = bagObj.viewsData.viewsPos[indexOfView],
                    viewType = bagObj.viewsData.bagType,
                    viewSelector = bagObj.viewsData.container,
                    scrollPos = 0;

                if (isStart || (byAnchor === false && ((typeof isResize === 'undefined' && isScroll === false) || (bagObj.viewsData.activeView !== viewName && isResize === false)))) {
                    callFuncBeforeChange();
                }

                if (viewSelector === mainbag_sel) {
                    currentMainView = viewName.split('#')[1];
                } else {
                    if (!isStart) {
                        if (!isResize && currentMainView !== viewSelector.split('|')[2]) {
                            byAnchor = true; // Informs that changing view is fired by anchor
                            changeView(allBagObjs[0], viewSelector.split('|')[3] + '#' + viewSelector.split('|')[2], false, false); // Change view when anchor is changed
                        }
                        currentMainView = viewSelector.split('|')[2];
                    }
                }

                if (!isResize && !isStart) {
                    if (window.location.hash !== viewName.split('#')[1]) {
                        setHash(viewName.split('#')[1], true); // Also changes hash to the current view, ex. view-2
                    }
                }

                if (viewType === bagType.SUBBAG) {
                    var container = viewSelector.split('|')[0],
                        containerNbr = viewSelector.split('|')[1];
                    viewSelector = sel.get((container + '-' + containerNbr)); // Gets subbag container from the DOM
                } else {
                    viewSelector = sel.get(viewSelector);
                }

                var elem = viewSelector; // Get current view container
                isChanging = true; // Prevent of scrolling views when they are still animate

                if (viewType === bagType.SUBBAG) {
                    if (!css3Active) {
                        // Scroll via jQuery animation
                        animatejQuery(elem.parent(), viewPosition, isResize, 'x', function() {
                            animationDone(isScroll, bagObj, viewName);
                        });
                    } else {
                        // Scroll via CSS3 transitions
                        translateElement(elem, viewPosition * -1, isResize, 'x', function() {
                            animationDone(isScroll, bagObj, viewName);
                        });
                    }
                } else {
                    if (!isScroll) {
                        unbindWheel();
                    }

                    if (params.useScrollbar || isScroll) {
                        if (css3Active) {
                            elem = setMainElem();
                        }
                    }

                    if (params.useScrollbar || !css3Active) {
                        // Scroll via jQuery animation
                        unbindScroll();
                        animatejQuery(elem, viewPosition, isResize, 'y', function() {
                            animationDone(isScroll, bagObj, viewName);
                        });
                    } else {
                        // Scroll via CSS3 transitions
                        scrollPos = sel.get('body').scrollTop();
                        viewPosition = viewPosition - scrollPos; // Calculates position and moves to the nearest view
                        translateElement(elem, viewPosition * -1, isResize, 'y', function() {
                            animationDone(isScroll, bagObj, viewName);
                        });
                    }

                    if (!params.useScrollbar) {
                        bindWheel();
                    }
                }

                if (!isStart) {
                    bagObj.viewsData.activeView = viewName; // Sets name of the current view, for example: 1#view-2
                    byAnchor = false;
                }
            }
        };

        // Sets main element to scrolling
        var setMainElem = function() {
            if (navigator.userAgent.includes('Firefox') || navigator.userAgent.includes('.NET') || navigator.userAgent.includes('MSIE') || navigator.userAgent.includes('Windows Phone')) {
                return sel.get('html'); // for ie/firefox
            } else {
                return sel.get('body'); // for edge/chrome/opera/safari
            }
        };

        // Calls when jQuery or CSS3 animation is over
        var animationDone = function(isScroll, bagObj, viewName) {
            callFuncAfterChange();
            if (!params.useScrollbar && !isScroll) {} else {
                stopHashEvent = false;
                unbindResize();
                recalcWindowHeight();
                changeViewHeightOnMobileToolbar();
                bindResize();
                bindScroll();
            }
            isChanging = false; // Prevent of scrolling views when they are changing
            isStart = false; // Clear hidden scrolling effect
        };

        // Recalculates window height property
        var recalcWindowHeight = function() {
            if ($window.height() !== windowHeight) {
                onResize(false, false, false);
                windowHeight = $window.height();
            }
        };

        // This code changes view's height if mobile browser is hiding/showing toolbar
        var changeViewHeightOnMobileToolbar = function() {
            if (allBagObjs[0].viewsData.viewsPos.length > 1) {
                if (correctHeight && isMobile() && $window.height() !== Math.abs(allBagObjs[0].viewsData.viewsPos[0] - allBagObjs[0].viewsData.viewsPos[1])) {
                    calcViewsDimensions();
                    for (var bagObjNbr = 0, len = allBagObjs.length; bagObjNbr < len; bagObjNbr++) {
                        calcViewsPos(allBagObjs[bagObjNbr]);
                        changeView(allBagObjs[bagObjNbr], allBagObjs[bagObjNbr].viewsData.activeView, true);
                    }
                }
            }
        };

        // Calls function before change view
        var callFuncBeforeChange = function() {
            var stop = false;
            if (typeof params.beforeChange === 'function') {
                stop = params.beforeChange();
            }
            times++;
            if (stop) { // Stop changing views if beforeChange function returns false
                return false;
            }
        };

        // Calls function after change view
        var callFuncAfterChange = function() {
            if (times > 0) {
                if (typeof params.afterChange === 'function') {
                    params.afterChange();
                }
                times -= 1; // This variable counts how many beforeChange callback has been invoked
            }
        };

        // ----------------------------------------
        // START REGION EVENTS
        // ----------------------------------------

        // Adds click event to all anchors with 'vs-anchor' class declared
        var bindAnchor = function() {
            // If user click on this element, application will search for id of the anchor among all views inside all bag objects and for this id change view
            sel.get(anchor_sel).on('click', onAnchor);
        };

        // Sets anchor
        var onAnchor = function(e) {
            e.preventDefault();
            var id = $(this).attr('href').replace('#', ''),
                viewData = getViewDataForID(id);
            if (viewData && viewData.length > 0) {
                // Prevent of changing views when they are still animate
                if (params.changeWhenAnim || (!params.changeWhenAnim && !isChanging)) {
                    setHash(id);
                }
            }
        };

        // Adds hashchange event
        var bindHashChange = function() {
            $window.on('hashchange', changeViewOnHashChange);
        };

        // Removes hashchange event
        var unbindHashChange = function() {
            $window.off('hashchange', changeViewOnHashChange);
        };

        // Adds scroll event
        var bindScroll = function() {
            $window.on('scroll', onScroll);
        };

        // Removes scroll event
        var unbindScroll = function() {
            $window.off('scroll', onScroll);
        };

        // Scrolls the window
        var onScroll = function(e) {
            // Sets hash name and the current view
            var idx = calcViewPos(allBagObjs[0].viewsData.viewsPos); // Calculates which view is closer to the current scroll position
            clearTimeout(timeoutId);
            unbindHashChange();
            if (window.location.hash !== '#' + allBagObjs[0].viewsData.views[idx].split('#')[1]) {
                setHash(allBagObjs[0].viewsData.views[idx].split('#')[1], false); // Sets the hash to the closests view
                allBagObjs[0].viewsData.activeView = allBagObjs[0].viewsData.views[idx]; // Sets current view on mainbag
            }
            // Delays hash bind after hash change (there is very small timespan between hash change and hash bind)
            timeoutId = setTimeout(function() {
                bindHashChange();
            }, 10);
            // Fire the scroll
            Array.prototype.forEach.call(timeouts, function(elem) {
                clearTimeout(elem);
            });
            var currPos = $window.scrollTop();
            timeouts.length = 0;
            timeouts.push(setTimeout(function() {
                if (params.fitToView) {
                    // Let's scroll only when scrollTop position is other than current mainview's position
                    var go = true;
                    Array.prototype.forEach.call(allBagObjs[0].viewsData.viewsPos, function(elem) {
                        if (elem === currPos) {
                            go = false;
                        }
                    });
                    if (go) {
                        isStart = true;
                        changeView(allBagObjs[0], allBagObjs[0].viewsData.activeView, false, false);
                    }
                }
            }, params.timeToFit));
        };

        // Adds mousewheel event
        var bindWheel = function() {
            $window.on('mousewheel', onMouseWheel);
        };

        // Removes mousewheel event
        var unbindWheel = function() {
            $window.off('mousewheel', onMouseWheel);
        };

        // Changes view depending on the mouse wheel direction
        var onMouseWheel = function(e) {
            var wheelTime = Date.now();
            // Calculates time to prevent views from scrolling at the same time (especially on MAC OS)
            var timeDiff = wheelTime - startTime;
            startTime = wheelTime;
            // Prevents views from scrolling when ctrl key is pressed and when the time diff is less than 50 ms
            if (!e.ctrlKey && timeDiff > 50) {
                if (e.deltaY < 0) {
                    showMainView(direction.NEXT);
                } else {
                    showMainView(direction.PREV);
                }
            }
        };

        // Adds click event on elements with next or prev class
        var bindPrevNextClickEvent = function() {
            sel.get(subviewprev_sel).each(function(idx) {
                $(this).on('click', function() {
                    currBagNbr = getCurrBagNbr();
                    if (currBagNbr > -1) {
                        showSubView(currBagNbr, direction.PREV);
                    }
                });
            });
            sel.get(subviewnext_sel).each(function(idx) {
                $(this).on('click', function() {
                    currBagNbr = getCurrBagNbr();
                    if (currBagNbr > -1) {
                        showSubView(currBagNbr, direction.NEXT);
                    }
                });
            });
            sel.get(mainviewprev_sel).each(function(idx) {
                $(this).on('click', function() {
                    showMainView(direction.PREV);
                });
            });
            sel.get(mainviewnext_sel).each(function(idx) {
                $(this).on('click', function() {
                    showMainView(direction.NEXT);
                });
            });
        };

        // Adds touch event
        var bindTouch = function() {
            var elem = window; // don't use jQuery because of argument of the touchAttachEvents function
            touchAttachEvents(elem);
        };

        // Adds resize event to the window selector
        var bindResize = function() {
            $window.on('resize', onResize);
        };

        // Adds resize event to the window selector
        var unbindResize = function() {
            $window.off('resize', onResize);
        };

        // Changes view depending on the window size
        var onResize = function(e, isRoomChange, isCallback) {
            if (!isMobile() || isRoomChange || (isMobile() && isMobileOrientation())) {
                // Releases beforeEvent
                if (typeof params.beforeResize === 'function' && typeof isCallback === 'undefined') {
                    params.beforeResize();
                }
                // Recalculates dimension of each view
                calcViewsDimensions();
                for (var bagObjNbr = 0, len = allBagObjs.length; bagObjNbr < len; bagObjNbr++) {
                    calcViewsPos(allBagObjs[bagObjNbr]);
                    changeView(allBagObjs[bagObjNbr], allBagObjs[bagObjNbr].viewsData.activeView, true);
                }
                // Releases afterEvent
                if (typeof params.afterResize === 'function' && typeof isCallback === 'undefined') {
                    params.afterResize();
                }
            }
        };

        // Adds keyboard events
        var bindKeyboard = function() {
            $document.on('keydown', onKeyDown);
        };

        // Removes keyboard event
        var unbindKeyboard = function() {
            $document.off('keydown', onKeyDown);
        };

        // Changes views by keyboard
        var onKeyDown = function(e) {
            var UP_KEY_CODE = 38,
                DOWN_KEY_CODE = 40,
                LEFT_KEY_CODE = 37,
                RIGHT_KEY_CODE = 39,
                HOME_KEY_CODE = 36,
                END_KEY_CODE = 35,
                PAGEUP_KEY_CODE = 33,
                PAGEDOWN_KEY_CODE = 34,
                currBagNbr = 0;

            var getKey = function(e) {
                if (window.event) {
                    return e.keyCode; // IE
                } else if (e.which) {
                    return e.which; // Firefox/Opera
                }
            };

            var keynum = getKey(e);

            // Gets the current view id from the URL
            currBagNbr = getCurrBagNbr();

            if (params.useKeyboard) {
                switch (keynum) {
                    case PAGEUP_KEY_CODE:
                    case UP_KEY_CODE:
                        if (!params.useScrollbar) {
                            showMainView(direction.PREV);
                        }
                        break;
                    case PAGEDOWN_KEY_CODE:
                    case DOWN_KEY_CODE:
                        if (!params.useScrollbar) {
                            showMainView(direction.NEXT);
                        }
                        break;
                    case RIGHT_KEY_CODE:
                        if (currBagNbr === 0) currBagNbr = 1;
                        if (currBagNbr > -1) {
                            showSubView(currBagNbr, direction.NEXT);
                        }
                        break;
                    case LEFT_KEY_CODE:
                        if (currBagNbr === 0) currBagNbr = 1;
                        if (currBagNbr > -1) {
                            showSubView(currBagNbr, direction.PREV);
                        }
                        break;
                    case HOME_KEY_CODE:
                        if (!params.useScrollbar) {
                            setHash(allBagObjs[0].viewsData.views[0].split('#')[1]);
                        }
                        break;
                    case END_KEY_CODE:
                        if (!params.useScrollbar) {
                            setHash(allBagObjs[0].viewsData.views[allBagObjs[0].viewsData.views.length - 1].split('#')[1]);
                        }
                        break;
                }
            }
        };

        // ----------------------------------------
        // START REGION TOUCHES
        // ----------------------------------------

        var touchable = 'createTouch' in document, // Checks if your browser support touches
            touches = [], // Includes all touches vectors
            posXGlobal = 0, // Contains pointer position on the x axis
            posYGlobal = 0; // Contains pointer position on the y axis

        // Cursor positions
        var cursorPos = {
            x: null,
            y: null
        };

        // Binds touch events
        var touchAttachEvents = function(elem) {
            if (window.PointerEvent) {
                elem.addEventListener('pointermove', onCursorMove, false);
            }
            if (touchable) {
                elem.addEventListener('touchstart', onTouchStart, false);
                elem.addEventListener('touchmove', onCursorMove, false);
                elem.addEventListener('touchend', onTouchEnd, false);
            }
        };

        // Sets current touch position
        var touchesChange = function(e) {
            setPointerPosition(e);
            return cursorPos.x + "|" + cursorPos.y;
        };

        // Sets pointer position
        var setPointerPosition = function(e) {
            if (touchable) {
                touches = e.touches;
                for (var touchNbr = 0, len = touches.length; touchNbr < len; touchNbr++) {
                    var touch = touches[touchNbr];
                    cursorPos.x = getCursorPosX(touch);
                    cursorPos.y = getCursorPosY(touch);
                }
            } else {
                cursorPos.x = getCursorPosX(e);
                cursorPos.y = getCursorPosY(e);
            }
        };

        // Gets coordinates of all touches
        var onTouchStart = function(e) {
            var pos = touchesChange(e).split('|');
            posXGlobal = parseInt(pos[0], 10);
            posYGlobal = parseInt(pos[1], 10);
        };

        // Changes views depending on touch direction
        var onTouchEnd = function(e) {
            var pos = touchesChange(e).split('|'),
                currBagNbr = 0,
                stepX = stepViaX,
                stepY = stepViaY,
                afterPos0 = parseInt(pos[0], 10),
                afterPos1 = parseInt(pos[1], 10),
                beforePosXPrev = parseInt(posXGlobal + stepX, 10),
                beforePosXNext = parseInt(posXGlobal - stepX, 10),
                beforePosYPrev = parseInt(posYGlobal + stepY, 10),
                beforePosYNext = parseInt(posYGlobal - stepY, 10);

            // Checks which direction takes to scroll
            if (Math.abs(afterPos0 - posXGlobal) < Math.abs(afterPos1 - posYGlobal)) {
                // Scroll vertically
                if (afterPos1 > beforePosYPrev) {
                    // Scroll page up
                    if (!params.useScrollbar) {
                        showMainView(direction.PREV);
                    }
                } else if (afterPos1 < beforePosYNext) {
                    // Scroll page down
                    if (!params.useScrollbar) {
                        showMainView(direction.NEXT);
                    }
                }
            } else {
                // Scroll horizontally
                currBagNbr = getCurrBagNbr();
                if (currBagNbr > -1) {
                    if (afterPos0 > beforePosXPrev) {
                        // Scroll page right
                        showSubView(currBagNbr, direction.PREV);
                    } else if (afterPos0 < beforePosXNext) {
                        // Scroll page left 
                        showSubView(currBagNbr, direction.NEXT);
                    }
                }
            }
        };

        // Sets current cursor position
        var onCursorMove = function(e) {
            if (!params.useScrollbar) {
                e.preventDefault ? e.preventDefault() : e.returnValue = false; // preventDefault - other than IE8, returnValue - IE8
            }
            setPointerPosition(e);
        };

        // Gets x cursor position
        var getCursorPosX = function(obj) {
            return obj.clientX;
        };

        // Gets y cursor position
        var getCursorPosY = function(obj) {
            return obj.clientY;
        };

        // ----------------------------------------
        // START INIT FUNCTION
        // ----------------------------------------

        // Init function
        var init = function() {
            addIndexOf();
            addIncludes();
            setStartDimension();
            // Checks if browser supports transitions
            if (!detectCssTrans()) {
                css3Active = false;
            }
            addClassesForSubBags();
            addWrappersForSubBags();
            calcViewsDimensions();
            changeCssOnScrollbarVisible();
            createBagObjsForAllViews();
            for (var bagObjNbr = 0, len = allBagObjs.length; bagObjNbr < len; bagObjNbr++) {
                calcViewsPos(allBagObjs[bagObjNbr]);
            }
            // Corrects subviews position after first page load without any URL anchor and when the scrollbar is visible
            onResize(false, false, false);
            // Checks if scrolling by wheel is not activated
            if (!params.useScrollbar) {
                bindWheel();
            }
            setActiveView();
            // Sets appropriate view after page is loaded (based on hash name from URL)
            changeViewOnHashChange();
            bindAnchor();
            bindHashChange();
            bindScroll();
            bindResize();
            bindTouch();
            bindPrevNextClickEvent();
            // Checks if changing of views by keyboard is activated
            if (params.useKeyboard) {
                bindKeyboard();
            }
            setMainbagDimWhenFixed();
        };

        // ----------------------------------------
        // START MAIN BAG OBJECT
        // ----------------------------------------

        // Main bag object
        var bagObject = function() {
            // Views data
            var viewsData = {
                activeView: '', // Active view
                container: '', // Class name of the bag
                bagType: bagType.MAINBAG, // Type of bag (0 - mainbag or 1 - subbag) - important for scrolling
                views: [], // Names of views, for example: [0#view-1, 1#view-2. 2#view-3, 3#view-4, 4#view-5]
                viewsPos: [] // Positions of views
            };

            // Sets bag object
            var setBagObj = function(container, viewList, bagType) {
                viewsData.container = container;
                viewsData.views = viewList;
                viewsData.bagType = bagType;
                viewsData.activeView = viewsData.views[0];
            };

            return {
                setBagObj: setBagObj,
                viewsData: viewsData
            };
        };

        init();
    };
})(jQuery);

!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console