Shepard tour material

by Harm Zeinstra

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/shepherd.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


<div class="one">
one
</div>
<div class="two">
two
</div><div class="three">
three
</div>
<div class="four">
four
</div>

CSS

.one,
.two,
.three,
.four {
  height: 100px;
  display: inline-block;
}

.one,
.four {
  width: 100%;
  background: red;
}

.two {
  width: 50%;
  background: blue;
}

.three {
  width: 50%;
  background: green;
}



.md-theme-shepherd-content {
  border-radius: 2px;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

:root {
  --primary: rgb(43, 187, 173);
  --primary-hue-1: rgba(43, 187, 173, 0.4);
  --pointer-size: 10px;
}

.md-theme-shepherd::before {
  content: "";
  position: absolute;
  display: block;
  width: var(--pointer-size);
  height: var(--pointer-size);
  border-radius: 50%;
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 0 0 var(--primary-hue-1);
  animation: pulse 2s infinite cubic-bezier(.47,0,.74,.71);
}
.md-theme-shepherd[x-placement="left"]::before {
    top: calc(50% - (var(--pointer-size) / 2));
    right: calc(-36px - (var(--pointer-size) / 2));
}
.md-theme-shepherd[x-placement="top"]::before {
    left: calc(50% - (var(--pointer-size) / 2));
    bottom: calc(-36px - (var(--pointer-size) / 2));
}
.md-theme-shepherd[x-placement="right"]::before {
    top: calc(50% - (var(--pointer-size) / 2));
    left: calc(-36px - (var(--pointer-size) / 2));
}
.md-theme-shepherd[x-placement="bottom"]::before {
    left: calc(50% - (var(--pointer-size) / 2));
    top: calc(-36px - (var(--pointer-size) / 2));
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--primary-hue-1);
  }

  70% {
    box-shadow: 0 0 0 calc(var(--pointer-size)/3) var(--primary-hue-1);
  }

  100% {
    box-shadow: 0 0 0 0 var(--primary-hue-1);
  }
}

JavaScript

const tour = new Shepherd.Tour({
classPrefix: 'md-theme',
useModalOverlay: true,
  defaultStepOptions: {
        scrollTo: { behavior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  text: 'Step one',
  attachTo: {element: '.one', on: 'top'},
  buttons: [
    {
      text: 'Next',
      action: tour.next,
      classes: 'btn'

    }
  ]
});
tour.addStep({
  text: 'Step three',
  attachTo: {element: '.three', on: 'left'},
  buttons: [
  {
      text: 'Back',
      action: tour.back,
      classes: 'btn-flat'
    },
    {
      text: 'Next',
      action: tour.next,
      classes: 'btn'

    }
  ]
});
tour.addStep({
  text: 'Step four',
  attachTo: {element: '.four', on: 'top'},
  buttons: [
  {
      text: 'Back',
      action: tour.back,
      classes: 'btn-flat'
    },
    {
      text: 'Next',
      action: tour.next,
      classes: 'btn'

    }
  ]
});
tour.addStep({
  text: 'Step two',
  attachTo: { element: '.two', on: 'left' },
  buttons: [
  {
      text: 'Back',
      action: tour.back,
      classes: 'btn-flat'
    },
    {
      text: 'Done',
      action: tour.next,
      classes: 'btn'
    }
  ]
});
['complete'].forEach(event => tour.on(event, () => {
   // some code here to register tour has completed
}));
tour.start();