Bootstrap Snippet slider with awesome effet using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="scene">
  <div class="content">
    <div class="back">
      <div class="back__bg back__bg-1 active"></div>
      <div class="back__bg back__bg-2"></div>
      <div class="back__bg back__bg-3"></div>
      <div class="back__bg back__bg-4"></div>
    </div>
    <div class="front">
      <div class="front__bg front__bg-1 active"></div>
      <div class="front__bg front__bg-2"></div>
      <div class="front__bg front__bg-3"></div>
      <div class="front__bg front__bg-4"></div>
    </div>
    <div class="nav">
      <div data-page="1" class="nav__el nav__el-1">
        Why i'm not here?
        <div class="nav__el-clone">
          <div class="nav__el nav__el-1">Why i'm not here?</div>
        </div>
      </div>
      <div data-page="2" class="nav__el nav__el-2">
        Where am i?
        <div class="nav__el-clone">
          <div class="nav__el nav__el-2">Where am i?</div>
        </div>
      </div>
      <div data-page="3" class="nav__el nav__el-3">
        This place is cool
        <div class="nav__el-clone">
          <div class="nav__el nav__el-3">This place is cool</div>
        </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  font-size: 62.5%;
  height: 100%;
  overflow: hidden;
}
.instant {
  -webkit-transition: 0 0 !important;
          transition: 0 0 !important;
}
.scene {
  position: relative;
  height: 100%;
  background: #fff;
  -webkit-transition: -webkit-transform 0.5s;
          transition: transform 0.5s;
  will-change: transform;
}
.scene.menu-visible .menu__btn {
  background: #000;
  color: #000;
}
.scene.menu-visible .menu__btn:after {
  -webkit-transform: scale(1.5) !important;
      -ms-transform: scale(1.5) !important;
          transform: scale(1.5) !important;
}
.scene.menu-visible .menu__heading {
  opacity: 1;
  -webkit-transition: opacity 0.5s 1.7s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
  
  var $scene = $(".scene"),
      $content = $(".content"),
      $back = $(".back"),
      $backBgs = $(".back__bg"),
      $front = $(".front"),
      $frontBgs = $(".front__bg"),
      $menuBlock = $(".menu__block"),
      $svgPath = $(".menu__block-svgPath"),
      animating = false,
      menuActive = false,
      menuAnimTime = 600,
      blockAnimTime = 1500,
      $sliderCont = $(".menu-slider__content"),
      curSlide = 1,
      sliderXDiff = 0,
      curPage = 1,
      nextPage = 0,
      numOfPages = $(".front__bg").length,
      scaleTime = 500,
      transTime = 500,
      totalTime = scaleTime + transTime,
      changeTimeout,
      timeoutTime = 8000,
      winW = $(window).width(),
      winH = $(window).height();
  
  // init nav element timeout animation
  $(".nav__el-1").addClass("active");
  
  //default debounce function from David Walsh blog
  function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"slider with awesome effet"
Bootstrap 3.3.0 Snippet by Sagar Joshi

Related: See More

Questions / Comments:

"slider with awesome effet" Bootstrap 3.3.0 Snippet by Sagar Joshi

Related: See More

Questions / Comments:

"slider with awesome effet"
Bootstrap 3.3.0 Snippet by Sagar Joshi