wall.js

Fullpage Piling, vanilla javascript, no dependency

>> Get Started

          
            <body>
              <div id="wrapper">
                <section><!--your content--></section>
                <!--other sections-->
                <section><!--your content--></section>
              </div>
            </body>

            <script src="path/to/wall.min.js"></script>
            <script>
              var wall = new Wall('#wrapper'); 
            </script>

Config Navs

Do you see the nav at top and dots at right?

>> add data-wall-section-nav attribute to your own nav element

Note: wall.js will not create them directly, what wall.js does is to toggle the active class

          
            < !-- DON'T ADD THE NAV ELEMENT INSIDE THE WRAPPER -- >
            <ul class="nav" data-wall-section-nav>
              <li>First</li>
              <li>Second</li>
            </ul>
            <div id="wall"> <!-- wrapper -->
              <section>First Section</section>
              <section>Second Section</section>
            </div>
            <ul class="dot" data-wall-section-nav>
              <li></li>
              <li></li>
            </ul>

>> Style the nav element by yourself

here is an example of dot nav

          
            .dot {
              position: absolute;
              top: 50%;
              right: 50px;
              transform: translateY(-50%);
            }

            .dot>li {
              width: 16px;
              height: 16px;
              margin-bottom: 10px;
              border: 2px solid #fff;
              border-radius: 50%;
              background-color: transparent;
              box-sizing: border-box;
              list-style: none;
              cursor: pointer;
            }

            .dot>li.active,
            .dot>li:hover {
              background-color: #fff;
            }

>> Custom Config

wall.js will add 'active' class to the nav item when you move into new section.

You can set your own active class with config object when you init Wall.

          
            var config = {
              sectionNavItemActiveClass: 'my-active-class'
            }

            var wall = new Wall('#wall',config);

Slides-1: Init Slide

>> add data-wall-slide attribute to your HTMLElement

            
              <div id="wall">
                <!--other sections-->
                <section>
                  <div data-wall-slide><!--slide content--></div> <!-- wall.js will create horizontal move slides -->
                  <div data-wall-slide><!--slide content--></div>
                </section>
                <!--other sections-->
              </div>

try to click arrow to toggle slide

Slides-2: Arrows

>> add data-wall-slide-arrow attribute to your arrows

            
              <div id="wall">
                <!--other sections-->
                <section>
                  <div data-wall-slide><!--slide content--></div>
                  <div data-wall-slide><!--slide content--></div>
                  <div data-wall-slide-arrow class="prev-slide"></div> <!-- arrow element -->
                  <div data-wall-slide-arrow class="next-slide"></div> <!-- arrow element -->
                </section>
                <!--other sections-->
              </div>

Your should create and style the arrow yourself, wall.js helps arraw show above the slides

Animation Duration

>> change all sections' animation duration:

          
            var config = {
              sectionAnimateDuration: 3 // every section now move 3 seconds 
            }
            
            var wall = new Wall('#wall', config);

>>add data-wall-animate-duration attribute to one or many of sections

This Section will take 3 seconds of animation.

          
            <div id="wall">
              <section class="section-1"></section>
              <section class="section-2"></section>
              <section class="section-3"></section>
              <section class="section-4" data-wall-animate-duration=3></section>
              <section class="section-5"></section>
              <section class="section-6"></section>
            </div>

>> of cause it works for slides

          
            <div id="wall">
              <section>
                <!--other sections-->
                <div data-wall-slide><!--slide content--></div>
                <div data-wall-slide  data-wall-animate-duration=3><!--slide content--></div> <!--this section move 3 seconds-->
                <div data-wall-slide><!--slide content--></div>
                <!--other sections-->
              </section>
            </div>

Class of Current

>> current section will be added current class

Open your develop tool to check it!

          
            <section class="section-1"><!--content--></section>
            <section class="section-2"><!--content--></section>
            <section class="section-3"><!--content--></section>
            <section class="section-4"><!--content--></section>
            <section class="section-5 current"><!--content--></section><!--current section-->

>> animating section will be added animating class

Open your develop tool to check it!

          
            <section class="section-1"><!--content--></section>
            <section class="section-2"><!--content--></section>
            <section class="section-3"><!--content--></section>
            <section class="section-4"><!--content--></section>
            <section class="section-5 animating current"><!--content--></section><!--if you animate this section-->

>> You can control animation like this:

          
            h1 {
              opacity: 0;
              transition: opacity .3s ease;
            }

            .current h1 {
              opacity: 1;
            }

Bring it into full play!

API

          
            var wall = new Wall('#wall');

            wall.prevSection(); // go to prev section;
            wall.nextSection(); // go to next section;
            wall.goToSection(1); // go to paticular section, param type is number

            wall.prevSlide(); // go to prev slide if slides exists in current section
            wall.nextSlide(); // go to next slide if slides exists in current section

All Default Configs

          
            const defaultOptions = {
              // control the wrapper z-index style,
              //other element you want to show should above greater than this
              wrapperZIndex: 1, 
              // global animation duration,
              // change it will change all section animate duration
              sectionAnimateDuration: 1,
              // take both string and function,
              // the string show be inside 'linear', 'easeIn', 'easeOut', 'easeInOut'
              easeFunction: 'easeIn',
              // whether loop to bottom in first section
              loopToBottom: false,
              // whether loop to top in last section
              loopToTop: false,
              sectionNavItemActiveClass: 'active',
              // set current section class name
              animatingClass: 'animating',
              currentClass: 'current'
            };