"exploding letter"
Bootstrap 4.1.1 Snippet by koshikojha

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
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exploding letter</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body>
<div class="shaker">
<div id="template" class="dialog">
<div class="dialog-body">
<div id="triangle-wrapper">
<div class="shadow">
<div></div>
</div>
</div>
<button class="stamp hvr-buzz" id="stamp-envelope"></button>
</div>
<div id="info">open me</div>
</div>
<div class="message">
<div class="part-one" id="part-one-message">
<div class="message-header"></div>
<div class="message-text">Dear Harry, <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<br><br> I await your owl,<br><br> Klara
</div>
<div class="stamp-wrapper">
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
@import url("https://fonts.googleapis.com/css?family=Caveat");
@import url("https://fonts.googleapis.com/css?family=Ledger");
* {
box-sizing: border-box;
}
body,
button,
input {
font-family: "Ledger";
}
body {
background-color: #3a736c;
overflow: hidden;
}
#info {
position: absolute;
font-family: Caveat;
color: #F1CFA0;
padding-top: 15px;
font-size: 5vh;
opacity: 0.7;
}
.shaker {
position: relative;
width: 100vw;
height: 100vh;
}
canvas {
position: relative;
top: 0;
left: 0;
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
var _createClass = (function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var options = {
drag: 1,
gravity: 0,
lifespan: 161,
maxSpeed: 100,
maxParticles: 500,
particleColors: ["242, 167, 30", "241, 207, 160", "211, 79, 39"],
particlesPerPress: 400,
jitter: 0,
randomness: 1,
size: 10,
sizeRange: 10,
shrinkSpeed: 0.1
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro BS3

Questions / Comments: