Bootstrap Snippet 3D floating Credit Card 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/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 ---------->
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  <link rel="stylesheet" href="https://pattern.kivan-works.com/fonts/kredit.css">
</head>
<body class="active">
  <div class="floating">
    <div class="thickness"></div>
    <div class="thickness"></div>
    <div class="thickness"></div>
    <div class="card_body">
      <div class="paypal_center svg"></div>
      <div class="logo svg"></div>
      <div class="paywave svg"></div>
      <div class="chips svg"></div>
      <div class="card_no text">
        1234-5678-9012-3456
      </div>
      <div class="valid text">
        VALID <br> THUR
      </div>
      <div class="valid_date text">
        12/25
      </div>
      <div class="holder text">DIVYA LAHAD</div>
      <div class="mastercard_icon svg"></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
* {
  background-repeat: no-repeat;
}
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
body {
  height: 100%;
  display: flex;
  background: linear-gradient(125deg, #fbd7e5, #bdf4fa);
}
.card_body {
  padding: 0.75rem 1.75rem;
}
.active .floating:before {
  opacity: 1;
  transition: 500ms;
}
.floating:before {
  font-family: "Quicksand";
  font-weight: bold;
  content: "Keep Moving Your Mouse!";
  width: 100%;
  text-align: center;
  font-size: 2rem;
  position: absolute;
  top: -70px;
  opacity: 0;
  transition: 300ms;
  background: -webkit-linear-gradient(145deg, #4684c1, #343174);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
document.addEventListener('mousemove', function(event){
  let card_x = getTransformValue(event.clientX,window.innerWidth,56);
  let card_y = getTransformValue(event.clientY,window.innerHeight,56);
  let shadow_x = getTransformValue(event.clientX,window.innerWidth,20);
  let shadow_y = getTransformValue(event.clientY,window.innerHeight,20);
  let text_shadow_x = getTransformValue(event.clientX,window.innerWidth,28);
  let text_shadow_y = getTransformValue(event.clientY,window.innerHeight,28);
  $(".floating").css("transform","rotateX("+card_y/1+"deg) rotateY("+card_x+"deg)");
  $(".floating").css("box-shadow",-card_x+"px "+card_y/1+"px 55px rgba(0, 0, 0, .55)");
  $(".svg").css("filter","drop-shadow("+-shadow_x+"px "+shadow_y/1+"px 4px rgba(0, 0, 0, .6))");
  $(".text").css("text-shadow",-text_shadow_x+"px "+text_shadow_y/1+"px 6px rgba(0, 0, 0, .8)");
});
function getTransformValue(v1,v2,value){
  return ((v1/v2*value-value/2)*1).toFixed(1);                        
}
$(function(){
  setTimeout(function(){
    $("body").removeClass("active");
  }, 2200);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"3D floating Credit Card"
Bootstrap 4.1.1 Snippet by divyalahad

Related: See More

Questions / Comments:

"3D floating Credit Card" Bootstrap 4.1.1 Snippet by divyalahad

Related: See More

Questions / Comments:

"3D floating Credit Card"
Bootstrap 4.1.1 Snippet by divyalahad