"Untitled"
Bootstrap 4.1.1 Snippet by divyalahad

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--pictures from Adobe Stock-->
<p id="loading">loading...</p>
<div id="images">
<div class="lighten">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/593507/lighten1.jpg" alt="" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/593507/lighten2.jpg" alt="" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/593507/lighten3.jpg" alt="" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/593507/lighten4.jpg" alt="" />
</div>
<div class="normal">
<img src="https://img.traveltriangle.com/blog/wp-content/tr:w-700,h-400/uploads/2016/07/shutterstock_115227475.jpg" alt="" />
<img src="https://img.traveltriangle.com/blog/wp-content/tr:w-700,h-400/uploads/2017/07/Varanasi.jpg" alt="" />
<img src="https://img.traveltriangle.com/blog/wp-content/tr:w-700,h-400/uploads/2017/07/Agra1.jpg" alt="" />
<img src="https://img.traveltriangle.com/blog/wp-content/tr:w-700,h-400/uploads/2016/07/spiti-valley-ki-monastery.jpg" alt="" />
</div>
<nav>
<ul>
<li class="pre"></li>
<li class="next"></li>
</ul>
</nav>
</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
*{
margin: 0;
padding: 0;
}
body{
background: #222;
}
#loading{
color: #fff;
position: absolute;
letter-spacing: 3px;
width: 10em;
line-height: 2em;
top: calc(50% - 1em) ;
left: calc(50% - 5em);
z-index: 2;
text-align: center;
}
.loading-done{
display: none;
}
#images{
position: absolute;
width: 600px;
left: calc(50% - 300px);
}
.canvas{
position: relative;
display:block;
overflow: hidden;
}
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
/*
Double exposure is photographic technique that combines 2 different images into a single image.
Then I use this technique with canvas blend modes.
*/
window.onload = function(){
var loading = document.getElementById("loading");
loading.classList.add("loading-done");
var property = {
element: "#images",
parallax: .6,
interval: 2200,
animDuration: 1300,
easing: easingInOutQuad
}
var slider = new DXslider(property);
slider.init();
}
class DXslider{
constructor(property){
this.images = document.querySelector(property.element);
this.preButton = document.querySelector(property.element + " nav .pre");
this.nextButton = document.querySelector(property.element + " nav .next");
this.lightenImages = document.querySelectorAll(".lighten img");
this.normalImages = document.querySelectorAll(".normal img");
this.canvasBox = document.createElement("div");
this.paraEffect = property.parallax; //have to clamp 0 ~ 1
this.canvasArray = [];
this.progress = 0;
this.animating = false;
this.interval = property.interval;
this.left = true;
this.duration = property.animDuration;
this.easing = property.easing;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard

Questions / Comments: