V1.5.0 ~ Pachira 3 + Progress Tracker

by Brendan Dolan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.min.js"></script>
<ul class="progress-tracker" style="display:none;">
    <li class="marker" id="marker-1"></li>
    <li class="marker" id="marker-2"></li>
    <li class="marker" id="marker-3"></li>
    <li class="marker" id="marker-4"></li>
</ul>
<div class="wrapper">
    <div class="slide" id="slide-home">
        <h1>Home</h1>
        <div class="next next-home" data-target="#marker-1"></div>
    </div>
    <div class="slide" id="slide-1">
        <h1 class="elmt">Slide 1</h1>
        <button class="elmt button back back-1" data-target="#marker-1">Back</button>
        <div class="next" data-target="#marker-2"></div>
    </div>
    <div class="slide" id="slide-2" style="display:none;">
        <h1 class="elmt">Slide 2</h1>
        <button class="elmt button back" data-target="#marker-2">Back</button>
        <div class="next" data-target="#marker-3"></div>
    </div>
    <div class="slide" id="slide-3" style="display:none;">
        <h1 class="elmt">Slide 3</h1>
        <button class="elmt button back" data-target="#marker-3">Back</button>
        <div class="next" data-target="#marker-4"></div>
    </div>
    <div class="slide" id="slide-4" style="display:none;">
        <h1 class="elmt">Slide 4</h1>
        <button class="elmt button back" data-target="#marker-4">Back</button>
    </div>
</div>

CSS

.progress-tracker {
    position: absolute;
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    width: 200px;
    top: 0;
    padding: 6px 0;
    z-index: 8888;
}

.marker {
    width: 8px;
    height: 8px;
    background-color: #fff;
    opacity: .125;
    border-radius: 50%;
}

.wrapper {
    position: relative;
    width: 200px;
    height: 300px;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 8px 0 0;
}

#slide-home {
    background-color: blue;
    z-index: 5;
}

#slide-1 {
    background-color: red;
    z-index: 4;
}

#slide-2 {
    background-color: yellow;
    z-index: 3;
}

#slide-3 {
    background-color: green;
    z-index: 2;
}

#slide-4 {
    background-color: magenta;
    z-index: 1;
}

.next {
    width: 100%;
    height: 100%;
    z-index: 2222;
}

.elmt {
    opacity: 0;
}

.button {
    z-index: 9999;
}

JavaScript

$('.next').click(function() {

    $(this).parent().fadeOut(1000).nextAll().slice(0, 2).fadeIn(1000); // hide parent (slide) and show the next one
    $(this).prevAll().velocity('transition.slideDownOut', {
        stagger: 250
    }); // stagger transition out all of .next's previous siblings
    $(this).parent().next().children().velocity({
        delay: 750
    }).velocity('transition.slideDownIn', {
        stagger: 250
    }); // stagger transition in all of the next slide's children after a delay
    var $targetNext = $($(this).data('target'));
    $targetNext.fadeTo( 500, 0.5 ); // fade the next slide's progress marker to 33.3% opacity
   
});


$('.next-home').click(function() {
    $('.progress-tracker').fadeIn(1000); // fade in progress tracker when home's .next is clicked
});


$('.back').click(function() {

    $(this).parent().fadeOut(500).prev().fadeIn(500); // hide parent (slide) and show the previous one
    $(this).parent().children().velocity('transition.slideUpOut', {
        stagger: 125
    });  // stagger transition out all of this slide's children
    $(this).parent().prev().children().velocity({
        delay: 375
    }).velocity('transition.slideUpIn', {
        stagger: 125
    }); // stagger transition in all of the previous slide's children after a delay 
    var $targetBack = $($(this).data('target'));
    $targetBack.fadeTo( 250, 0.125 ); // fade this slide's progress marker back to 1.25% opacity
    
});


$('.back-1').click(function() {
    $('.progress-tracker').fadeOut(500); // fade out progress tracker when slide 1's back button is clicked
});