How to achieve animation effect of below video? [closed]
2
I am looking for the animation as shown in the Link.
Help me to find out which type of animation is used here.
Any help in this much appreiciated in advance.
Below is the link of animation.
https://d26dzxoao6i3hh.cloudfront.net/items/2E32111m260Z0x0V3H2R/Animation%202%20-%20Chat.mp4
Please check above video for animation.
Please give me suggestion for achieve this type of animation.
And html and css code which I have used for this are
var who_array = ["Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States"];
var what_array = ["Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport"];
var when_array = ["About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago"];
var map_url_array = ["https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png"];
var saleproof_array = ["By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof"];
var index_array = Array.apply(null, {
length: who_array.length
}).map(Number.call, Number);
var delay = 1000;
var milisecs_hiding = 10 * 1000 - delay;
var milisecs_to_start = 3 * 1000 - delay;
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function refresh_bubble(step) {
document.getElementById('who').innerHTML = who_array[index_array[step]];
document.getElementById('what').innerHTML = what_array[index_array[step]];
document.getElementById('when').innerHTML = when_array[index_array[step]];
//document.getElementById('viewproduct').innerHTML = viewproduct_array[index_array[step]];
document.getElementById('saleproof').innerHTML = saleproof_array[index_array[step]];
document.getElementById('static-image').src = map_url_array[index_array[step]];
setTimeout(function() {
$("#proof-popup").fadeIn(250);
setTimeout(function() {
popdown_bubble(step);
}, 7000);
}, delay);
}
function popdown_bubble(step) {
document.getElementById('proof-popup').className = 'bounceBottom-leave-active bottom-right';
setTimeout(function() {
if (step < (who_array.length - 1)) {
refresh_bubble(step + 1);
} else {
index_array = shuffle(index_array);
refresh_bubble(0);
}
}, milisecs_hiding);
}
setTimeout(function() {
index_array = shuffle(index_array);
refresh_bubble(0);
}, milisecs_to_start);@import "https://fonts.googleapis.com/css?family=Roboto+Condensed:Roboto:400,600,800";
#proof-popup.bottom-right {
right: 0px;
}
#proof-popup.bottom-left {
left: 0px;
}
#proof-popup {
display: none;
border: none;
background: transparent;
z-index: 999998;
position: fixed;
bottom: 20px;
margin: 0px 20px;
}
#proof-popup.hide-proof {
// visibility: hidden;
// opacity: 0;
transition: visibility 0s 0.5s, opacity 0.4s linear
}
#proof-popup .md.bubble {
width: 345px;
}
#proof-popup .bubble {
padding: 5px;
margin: 0 auto;
min-height: 70px;
margin: 0 auto;
box-shadow: 0px 0px 56px -8px rgba(228, 228, 228, 1);
border: 1px solid #e4e4e4;
background: #fff;
float: none;
border-radius: 4px;
}
#proof-popup .bubble .content {
margin-top: -10px;
float: left;
width: 77%;
position: relative;
font-size: 10px;
}
#proof-popup .bubble h2.who {
margin: 0 0 3px;
}
#proof-popup .content h2 a {
font-size: 14px;
margin: 0px;
color: #000;
font-weight: bolder;
font-family: Roboto;
letter-spacing: normal;
text-decoration: none;
}
#proof-popup .bubble .what {
font-family: Roboto;
font-size: 13.2px;
color: #000;
width: 100%;
margin: 0 0 8px;
font-weight: bold;
}
#proof-popup .bubble .when {
color: #000;
font-family: Roboto;
font-size: 12px;
font-weight: 800;
}
#proof-popup .img_inner {
float: left;
width: 55px;
height: auto !important;
background: #fff;
padding: 9px 5px;
border: 1px solid rgba(63, 63, 68, .15);
overflow: hidden;
margin-right: 7px;
}
#proof-popup .notif_img {
display: block;
text-align: center;
}
#proof-popup .img_inner img {
overflow: hidden;
max-height: 100%!important;
}
#proof-popup .img-responsive {
max-width: 100%;
height: auto;
}
#proof-popup .bubble button.close {
-webkit-appearance: none;
cursor: pointer;
background: 0 0;
border: 0;
}
#proof-popup .bubble .close {
float: right;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
}
#proof-popup .bubble .last_one {
padding-top: 0px !important;
display: flex;
margin-right: 34px;
justify-content: space-between;
}
#proof-popup .bubble .last_one {
float: left;
width: 100%;
}
#proof-popup .bubble .last_one a {
color: #000;
font-weight: 600;
text-transform: capitalize;
font-size: 10px;
}
#proof-popup .bubble .circle_empty {
width: 6px;
height: 6px;
border-radius: 50%;
background: #acacac;
float: left;
margin: 4px 5px 0 0;
}
#proof-popup .bubble .sale-proof-text {
color: #000;
display: inline-block;
font-size: 12px;
font-family: Roboto;
font-weight: 800;
}
#proof-popup .saleproof-img {
width: 14px;
height: 14px;
margin-right: 5px;
}
.bounceBottom-enter-active {
animation: bounceBottomUp 1.1s linear both;
}
@keyframes bounceBottomUp {
0% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
4.1% {
transform: matrix(1, 0, 0, 1, 0, 41.971);
}
8.11% {
transform: matrix(1, 0, 0, 1, 0, 10.549);
}
12.11% {
transform: matrix(1, 0, 0, 1, 0, -1.843);
}
16.12% {
transform: matrix(1, 0, 0, 1, 0, -4.336);
}
27.23% {
transform: matrix(1, 0, 0, 1, 0, -.784);
}
38.34% {
transform: matrix(1, 0, 0, 1, 0, .104);
}
60.56% {
transform: matrix(1, 0, 0, 1, 0, -.002);
}
82.78% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
to {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.bounceBottom-leave-active {
animation: bounceBottomDown 1.1s linear both;
}
@keyframes bounceBottomDown {
0% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
4.2% {
transform: matrix(1, 0, 0, 1, 0, 54.927);
}
8.31% {
transform: matrix(1, 0, 0, 1, 0, 88.411);
}
12.51% {
transform: matrix(1, 0, 0, 1, 0, 103.215);
}
16.62% {
transform: matrix(1, 0, 0, 1, 0, 106.331);
}
27.73% {
transform: matrix(1, 0, 0, 1, 0, 101.285);
}
38.84% {
transform: matrix(1, 0, 0, 1, 0, 99.747);
}
61.06% {
transform: matrix(1, 0, 0, 1, 0, 100.01);
}
83.28% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
to {
transform: matrix(1, 0, 0, 1, 0, 100);
}
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<!-- THIS GOES BEFPRE </BODY> -->
<div id="proof-popup" class="hide-proof">
<div class="md bubble">
<div class="img_inner">
<a class="notif_img"><img id="static-image" src="" class="img-responsive"></a>
</div>
<button class="close" type="button" data-dismiss="modal">✖</button>
<div class="content">
<h2 class="who">
<a id="who" href=""></a>
</h2>
<p class="what" id="what"></p>
<div class="last_one">
<div class="when" id="when"></div>
<div style="display: inline-flex;">
<img class="saleproof-img" src="https://scaleapps.net/saleproof-dev/verified.png">
<span class="saleproof sale-proof-text" id="saleproof"></span>
</div>
</div>
</div>
</div>
</div>javascript css animation effect
edited Jan 1 at 8:55
adiga
9,32862242
asked Jan 1 at 8:43
Ankur LakhaniAnkur Lakhani
273
closed as too broad by Rob, Jonas Wilms, grizzthedj, No Refunds No Returns, anothermh Jan 1 at 20:15
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
2
I am looking for the animation as shown in the Link.
Help me to find out which type of animation is used here.
Any help in this much appreiciated in advance.
Below is the link of animation.
https://d26dzxoao6i3hh.cloudfront.net/items/2E32111m260Z0x0V3H2R/Animation%202%20-%20Chat.mp4
Please check above video for animation.
Please give me suggestion for achieve this type of animation.
And html and css code which I have used for this are
var who_array = ["Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States"];
var what_array = ["Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport"];
var when_array = ["About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago"];
var map_url_array = ["https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png"];
var saleproof_array = ["By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof"];
var index_array = Array.apply(null, {
length: who_array.length
}).map(Number.call, Number);
var delay = 1000;
var milisecs_hiding = 10 * 1000 - delay;
var milisecs_to_start = 3 * 1000 - delay;
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function refresh_bubble(step) {
document.getElementById('who').innerHTML = who_array[index_array[step]];
document.getElementById('what').innerHTML = what_array[index_array[step]];
document.getElementById('when').innerHTML = when_array[index_array[step]];
//document.getElementById('viewproduct').innerHTML = viewproduct_array[index_array[step]];
document.getElementById('saleproof').innerHTML = saleproof_array[index_array[step]];
document.getElementById('static-image').src = map_url_array[index_array[step]];
setTimeout(function() {
$("#proof-popup").fadeIn(250);
setTimeout(function() {
popdown_bubble(step);
}, 7000);
}, delay);
}
function popdown_bubble(step) {
document.getElementById('proof-popup').className = 'bounceBottom-leave-active bottom-right';
setTimeout(function() {
if (step < (who_array.length - 1)) {
refresh_bubble(step + 1);
} else {
index_array = shuffle(index_array);
refresh_bubble(0);
}
}, milisecs_hiding);
}
setTimeout(function() {
index_array = shuffle(index_array);
refresh_bubble(0);
}, milisecs_to_start);@import "https://fonts.googleapis.com/css?family=Roboto+Condensed:Roboto:400,600,800";
#proof-popup.bottom-right {
right: 0px;
}
#proof-popup.bottom-left {
left: 0px;
}
#proof-popup {
display: none;
border: none;
background: transparent;
z-index: 999998;
position: fixed;
bottom: 20px;
margin: 0px 20px;
}
#proof-popup.hide-proof {
// visibility: hidden;
// opacity: 0;
transition: visibility 0s 0.5s, opacity 0.4s linear
}
#proof-popup .md.bubble {
width: 345px;
}
#proof-popup .bubble {
padding: 5px;
margin: 0 auto;
min-height: 70px;
margin: 0 auto;
box-shadow: 0px 0px 56px -8px rgba(228, 228, 228, 1);
border: 1px solid #e4e4e4;
background: #fff;
float: none;
border-radius: 4px;
}
#proof-popup .bubble .content {
margin-top: -10px;
float: left;
width: 77%;
position: relative;
font-size: 10px;
}
#proof-popup .bubble h2.who {
margin: 0 0 3px;
}
#proof-popup .content h2 a {
font-size: 14px;
margin: 0px;
color: #000;
font-weight: bolder;
font-family: Roboto;
letter-spacing: normal;
text-decoration: none;
}
#proof-popup .bubble .what {
font-family: Roboto;
font-size: 13.2px;
color: #000;
width: 100%;
margin: 0 0 8px;
font-weight: bold;
}
#proof-popup .bubble .when {
color: #000;
font-family: Roboto;
font-size: 12px;
font-weight: 800;
}
#proof-popup .img_inner {
float: left;
width: 55px;
height: auto !important;
background: #fff;
padding: 9px 5px;
border: 1px solid rgba(63, 63, 68, .15);
overflow: hidden;
margin-right: 7px;
}
#proof-popup .notif_img {
display: block;
text-align: center;
}
#proof-popup .img_inner img {
overflow: hidden;
max-height: 100%!important;
}
#proof-popup .img-responsive {
max-width: 100%;
height: auto;
}
#proof-popup .bubble button.close {
-webkit-appearance: none;
cursor: pointer;
background: 0 0;
border: 0;
}
#proof-popup .bubble .close {
float: right;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
}
#proof-popup .bubble .last_one {
padding-top: 0px !important;
display: flex;
margin-right: 34px;
justify-content: space-between;
}
#proof-popup .bubble .last_one {
float: left;
width: 100%;
}
#proof-popup .bubble .last_one a {
color: #000;
font-weight: 600;
text-transform: capitalize;
font-size: 10px;
}
#proof-popup .bubble .circle_empty {
width: 6px;
height: 6px;
border-radius: 50%;
background: #acacac;
float: left;
margin: 4px 5px 0 0;
}
#proof-popup .bubble .sale-proof-text {
color: #000;
display: inline-block;
font-size: 12px;
font-family: Roboto;
font-weight: 800;
}
#proof-popup .saleproof-img {
width: 14px;
height: 14px;
margin-right: 5px;
}
.bounceBottom-enter-active {
animation: bounceBottomUp 1.1s linear both;
}
@keyframes bounceBottomUp {
0% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
4.1% {
transform: matrix(1, 0, 0, 1, 0, 41.971);
}
8.11% {
transform: matrix(1, 0, 0, 1, 0, 10.549);
}
12.11% {
transform: matrix(1, 0, 0, 1, 0, -1.843);
}
16.12% {
transform: matrix(1, 0, 0, 1, 0, -4.336);
}
27.23% {
transform: matrix(1, 0, 0, 1, 0, -.784);
}
38.34% {
transform: matrix(1, 0, 0, 1, 0, .104);
}
60.56% {
transform: matrix(1, 0, 0, 1, 0, -.002);
}
82.78% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
to {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.bounceBottom-leave-active {
animation: bounceBottomDown 1.1s linear both;
}
@keyframes bounceBottomDown {
0% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
4.2% {
transform: matrix(1, 0, 0, 1, 0, 54.927);
}
8.31% {
transform: matrix(1, 0, 0, 1, 0, 88.411);
}
12.51% {
transform: matrix(1, 0, 0, 1, 0, 103.215);
}
16.62% {
transform: matrix(1, 0, 0, 1, 0, 106.331);
}
27.73% {
transform: matrix(1, 0, 0, 1, 0, 101.285);
}
38.84% {
transform: matrix(1, 0, 0, 1, 0, 99.747);
}
61.06% {
transform: matrix(1, 0, 0, 1, 0, 100.01);
}
83.28% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
to {
transform: matrix(1, 0, 0, 1, 0, 100);
}
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<!-- THIS GOES BEFPRE </BODY> -->
<div id="proof-popup" class="hide-proof">
<div class="md bubble">
<div class="img_inner">
<a class="notif_img"><img id="static-image" src="" class="img-responsive"></a>
</div>
<button class="close" type="button" data-dismiss="modal">✖</button>
<div class="content">
<h2 class="who">
<a id="who" href=""></a>
</h2>
<p class="what" id="what"></p>
<div class="last_one">
<div class="when" id="when"></div>
<div style="display: inline-flex;">
<img class="saleproof-img" src="https://scaleapps.net/saleproof-dev/verified.png">
<span class="saleproof sale-proof-text" id="saleproof"></span>
</div>
</div>
</div>
</div>
</div>javascript css animation effect
edited Jan 1 at 8:55
adiga
9,32862242
asked Jan 1 at 8:43
Ankur LakhaniAnkur Lakhani
273
closed as too broad by Rob, Jonas Wilms, grizzthedj, No Refunds No Returns, anothermh Jan 1 at 20:15
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
1
it's a movie - what does that have to do with javascript and css?
– Jaromanda X
Jan 1 at 8:49
I think user is trying to get name of animation used in the video.
– Deepak Lakhara
Jan 1 at 9:59
@JaromandaX I need this type effect.
– Ankur Lakhani
Jan 1 at 10:03
add a comment |
2
2
2
I am looking for the animation as shown in the Link.
Help me to find out which type of animation is used here.
Any help in this much appreiciated in advance.
Below is the link of animation.
https://d26dzxoao6i3hh.cloudfront.net/items/2E32111m260Z0x0V3H2R/Animation%202%20-%20Chat.mp4
Please check above video for animation.
Please give me suggestion for achieve this type of animation.
And html and css code which I have used for this are
var who_array = ["Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States"];
var what_array = ["Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport"];
var when_array = ["About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago"];
var map_url_array = ["https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png"];
var saleproof_array = ["By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof"];
var index_array = Array.apply(null, {
length: who_array.length
}).map(Number.call, Number);
var delay = 1000;
var milisecs_hiding = 10 * 1000 - delay;
var milisecs_to_start = 3 * 1000 - delay;
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function refresh_bubble(step) {
document.getElementById('who').innerHTML = who_array[index_array[step]];
document.getElementById('what').innerHTML = what_array[index_array[step]];
document.getElementById('when').innerHTML = when_array[index_array[step]];
//document.getElementById('viewproduct').innerHTML = viewproduct_array[index_array[step]];
document.getElementById('saleproof').innerHTML = saleproof_array[index_array[step]];
document.getElementById('static-image').src = map_url_array[index_array[step]];
setTimeout(function() {
$("#proof-popup").fadeIn(250);
setTimeout(function() {
popdown_bubble(step);
}, 7000);
}, delay);
}
function popdown_bubble(step) {
document.getElementById('proof-popup').className = 'bounceBottom-leave-active bottom-right';
setTimeout(function() {
if (step < (who_array.length - 1)) {
refresh_bubble(step + 1);
} else {
index_array = shuffle(index_array);
refresh_bubble(0);
}
}, milisecs_hiding);
}
setTimeout(function() {
index_array = shuffle(index_array);
refresh_bubble(0);
}, milisecs_to_start);@import "https://fonts.googleapis.com/css?family=Roboto+Condensed:Roboto:400,600,800";
#proof-popup.bottom-right {
right: 0px;
}
#proof-popup.bottom-left {
left: 0px;
}
#proof-popup {
display: none;
border: none;
background: transparent;
z-index: 999998;
position: fixed;
bottom: 20px;
margin: 0px 20px;
}
#proof-popup.hide-proof {
// visibility: hidden;
// opacity: 0;
transition: visibility 0s 0.5s, opacity 0.4s linear
}
#proof-popup .md.bubble {
width: 345px;
}
#proof-popup .bubble {
padding: 5px;
margin: 0 auto;
min-height: 70px;
margin: 0 auto;
box-shadow: 0px 0px 56px -8px rgba(228, 228, 228, 1);
border: 1px solid #e4e4e4;
background: #fff;
float: none;
border-radius: 4px;
}
#proof-popup .bubble .content {
margin-top: -10px;
float: left;
width: 77%;
position: relative;
font-size: 10px;
}
#proof-popup .bubble h2.who {
margin: 0 0 3px;
}
#proof-popup .content h2 a {
font-size: 14px;
margin: 0px;
color: #000;
font-weight: bolder;
font-family: Roboto;
letter-spacing: normal;
text-decoration: none;
}
#proof-popup .bubble .what {
font-family: Roboto;
font-size: 13.2px;
color: #000;
width: 100%;
margin: 0 0 8px;
font-weight: bold;
}
#proof-popup .bubble .when {
color: #000;
font-family: Roboto;
font-size: 12px;
font-weight: 800;
}
#proof-popup .img_inner {
float: left;
width: 55px;
height: auto !important;
background: #fff;
padding: 9px 5px;
border: 1px solid rgba(63, 63, 68, .15);
overflow: hidden;
margin-right: 7px;
}
#proof-popup .notif_img {
display: block;
text-align: center;
}
#proof-popup .img_inner img {
overflow: hidden;
max-height: 100%!important;
}
#proof-popup .img-responsive {
max-width: 100%;
height: auto;
}
#proof-popup .bubble button.close {
-webkit-appearance: none;
cursor: pointer;
background: 0 0;
border: 0;
}
#proof-popup .bubble .close {
float: right;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
}
#proof-popup .bubble .last_one {
padding-top: 0px !important;
display: flex;
margin-right: 34px;
justify-content: space-between;
}
#proof-popup .bubble .last_one {
float: left;
width: 100%;
}
#proof-popup .bubble .last_one a {
color: #000;
font-weight: 600;
text-transform: capitalize;
font-size: 10px;
}
#proof-popup .bubble .circle_empty {
width: 6px;
height: 6px;
border-radius: 50%;
background: #acacac;
float: left;
margin: 4px 5px 0 0;
}
#proof-popup .bubble .sale-proof-text {
color: #000;
display: inline-block;
font-size: 12px;
font-family: Roboto;
font-weight: 800;
}
#proof-popup .saleproof-img {
width: 14px;
height: 14px;
margin-right: 5px;
}
.bounceBottom-enter-active {
animation: bounceBottomUp 1.1s linear both;
}
@keyframes bounceBottomUp {
0% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
4.1% {
transform: matrix(1, 0, 0, 1, 0, 41.971);
}
8.11% {
transform: matrix(1, 0, 0, 1, 0, 10.549);
}
12.11% {
transform: matrix(1, 0, 0, 1, 0, -1.843);
}
16.12% {
transform: matrix(1, 0, 0, 1, 0, -4.336);
}
27.23% {
transform: matrix(1, 0, 0, 1, 0, -.784);
}
38.34% {
transform: matrix(1, 0, 0, 1, 0, .104);
}
60.56% {
transform: matrix(1, 0, 0, 1, 0, -.002);
}
82.78% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
to {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.bounceBottom-leave-active {
animation: bounceBottomDown 1.1s linear both;
}
@keyframes bounceBottomDown {
0% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
4.2% {
transform: matrix(1, 0, 0, 1, 0, 54.927);
}
8.31% {
transform: matrix(1, 0, 0, 1, 0, 88.411);
}
12.51% {
transform: matrix(1, 0, 0, 1, 0, 103.215);
}
16.62% {
transform: matrix(1, 0, 0, 1, 0, 106.331);
}
27.73% {
transform: matrix(1, 0, 0, 1, 0, 101.285);
}
38.84% {
transform: matrix(1, 0, 0, 1, 0, 99.747);
}
61.06% {
transform: matrix(1, 0, 0, 1, 0, 100.01);
}
83.28% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
to {
transform: matrix(1, 0, 0, 1, 0, 100);
}
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<!-- THIS GOES BEFPRE </BODY> -->
<div id="proof-popup" class="hide-proof">
<div class="md bubble">
<div class="img_inner">
<a class="notif_img"><img id="static-image" src="" class="img-responsive"></a>
</div>
<button class="close" type="button" data-dismiss="modal">✖</button>
<div class="content">
<h2 class="who">
<a id="who" href=""></a>
</h2>
<p class="what" id="what"></p>
<div class="last_one">
<div class="when" id="when"></div>
<div style="display: inline-flex;">
<img class="saleproof-img" src="https://scaleapps.net/saleproof-dev/verified.png">
<span class="saleproof sale-proof-text" id="saleproof"></span>
</div>
</div>
</div>
</div>
</div>javascript css animation effect
edited Jan 1 at 8:55
adiga
9,32862242
asked Jan 1 at 8:43
Ankur LakhaniAnkur Lakhani
273
I am looking for the animation as shown in the Link.
Help me to find out which type of animation is used here.
Any help in this much appreiciated in advance.
Below is the link of animation.
https://d26dzxoao6i3hh.cloudfront.net/items/2E32111m260Z0x0V3H2R/Animation%202%20-%20Chat.mp4
Please check above video for animation.
Please give me suggestion for achieve this type of animation.
And html and css code which I have used for this are
var who_array = ["Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States"];
var what_array = ["Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport"];
var when_array = ["About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago"];
var map_url_array = ["https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png"];
var saleproof_array = ["By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof"];
var index_array = Array.apply(null, {
length: who_array.length
}).map(Number.call, Number);
var delay = 1000;
var milisecs_hiding = 10 * 1000 - delay;
var milisecs_to_start = 3 * 1000 - delay;
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function refresh_bubble(step) {
document.getElementById('who').innerHTML = who_array[index_array[step]];
document.getElementById('what').innerHTML = what_array[index_array[step]];
document.getElementById('when').innerHTML = when_array[index_array[step]];
//document.getElementById('viewproduct').innerHTML = viewproduct_array[index_array[step]];
document.getElementById('saleproof').innerHTML = saleproof_array[index_array[step]];
document.getElementById('static-image').src = map_url_array[index_array[step]];
setTimeout(function() {
$("#proof-popup").fadeIn(250);
setTimeout(function() {
popdown_bubble(step);
}, 7000);
}, delay);
}
function popdown_bubble(step) {
document.getElementById('proof-popup').className = 'bounceBottom-leave-active bottom-right';
setTimeout(function() {
if (step < (who_array.length - 1)) {
refresh_bubble(step + 1);
} else {
index_array = shuffle(index_array);
refresh_bubble(0);
}
}, milisecs_hiding);
}
setTimeout(function() {
index_array = shuffle(index_array);
refresh_bubble(0);
}, milisecs_to_start);@import "https://fonts.googleapis.com/css?family=Roboto+Condensed:Roboto:400,600,800";
#proof-popup.bottom-right {
right: 0px;
}
#proof-popup.bottom-left {
left: 0px;
}
#proof-popup {
display: none;
border: none;
background: transparent;
z-index: 999998;
position: fixed;
bottom: 20px;
margin: 0px 20px;
}
#proof-popup.hide-proof {
// visibility: hidden;
// opacity: 0;
transition: visibility 0s 0.5s, opacity 0.4s linear
}
#proof-popup .md.bubble {
width: 345px;
}
#proof-popup .bubble {
padding: 5px;
margin: 0 auto;
min-height: 70px;
margin: 0 auto;
box-shadow: 0px 0px 56px -8px rgba(228, 228, 228, 1);
border: 1px solid #e4e4e4;
background: #fff;
float: none;
border-radius: 4px;
}
#proof-popup .bubble .content {
margin-top: -10px;
float: left;
width: 77%;
position: relative;
font-size: 10px;
}
#proof-popup .bubble h2.who {
margin: 0 0 3px;
}
#proof-popup .content h2 a {
font-size: 14px;
margin: 0px;
color: #000;
font-weight: bolder;
font-family: Roboto;
letter-spacing: normal;
text-decoration: none;
}
#proof-popup .bubble .what {
font-family: Roboto;
font-size: 13.2px;
color: #000;
width: 100%;
margin: 0 0 8px;
font-weight: bold;
}
#proof-popup .bubble .when {
color: #000;
font-family: Roboto;
font-size: 12px;
font-weight: 800;
}
#proof-popup .img_inner {
float: left;
width: 55px;
height: auto !important;
background: #fff;
padding: 9px 5px;
border: 1px solid rgba(63, 63, 68, .15);
overflow: hidden;
margin-right: 7px;
}
#proof-popup .notif_img {
display: block;
text-align: center;
}
#proof-popup .img_inner img {
overflow: hidden;
max-height: 100%!important;
}
#proof-popup .img-responsive {
max-width: 100%;
height: auto;
}
#proof-popup .bubble button.close {
-webkit-appearance: none;
cursor: pointer;
background: 0 0;
border: 0;
}
#proof-popup .bubble .close {
float: right;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
}
#proof-popup .bubble .last_one {
padding-top: 0px !important;
display: flex;
margin-right: 34px;
justify-content: space-between;
}
#proof-popup .bubble .last_one {
float: left;
width: 100%;
}
#proof-popup .bubble .last_one a {
color: #000;
font-weight: 600;
text-transform: capitalize;
font-size: 10px;
}
#proof-popup .bubble .circle_empty {
width: 6px;
height: 6px;
border-radius: 50%;
background: #acacac;
float: left;
margin: 4px 5px 0 0;
}
#proof-popup .bubble .sale-proof-text {
color: #000;
display: inline-block;
font-size: 12px;
font-family: Roboto;
font-weight: 800;
}
#proof-popup .saleproof-img {
width: 14px;
height: 14px;
margin-right: 5px;
}
.bounceBottom-enter-active {
animation: bounceBottomUp 1.1s linear both;
}
@keyframes bounceBottomUp {
0% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
4.1% {
transform: matrix(1, 0, 0, 1, 0, 41.971);
}
8.11% {
transform: matrix(1, 0, 0, 1, 0, 10.549);
}
12.11% {
transform: matrix(1, 0, 0, 1, 0, -1.843);
}
16.12% {
transform: matrix(1, 0, 0, 1, 0, -4.336);
}
27.23% {
transform: matrix(1, 0, 0, 1, 0, -.784);
}
38.34% {
transform: matrix(1, 0, 0, 1, 0, .104);
}
60.56% {
transform: matrix(1, 0, 0, 1, 0, -.002);
}
82.78% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
to {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.bounceBottom-leave-active {
animation: bounceBottomDown 1.1s linear both;
}
@keyframes bounceBottomDown {
0% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
4.2% {
transform: matrix(1, 0, 0, 1, 0, 54.927);
}
8.31% {
transform: matrix(1, 0, 0, 1, 0, 88.411);
}
12.51% {
transform: matrix(1, 0, 0, 1, 0, 103.215);
}
16.62% {
transform: matrix(1, 0, 0, 1, 0, 106.331);
}
27.73% {
transform: matrix(1, 0, 0, 1, 0, 101.285);
}
38.84% {
transform: matrix(1, 0, 0, 1, 0, 99.747);
}
61.06% {
transform: matrix(1, 0, 0, 1, 0, 100.01);
}
83.28% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
to {
transform: matrix(1, 0, 0, 1, 0, 100);
}
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<!-- THIS GOES BEFPRE </BODY> -->
<div id="proof-popup" class="hide-proof">
<div class="md bubble">
<div class="img_inner">
<a class="notif_img"><img id="static-image" src="" class="img-responsive"></a>
</div>
<button class="close" type="button" data-dismiss="modal">✖</button>
<div class="content">
<h2 class="who">
<a id="who" href=""></a>
</h2>
<p class="what" id="what"></p>
<div class="last_one">
<div class="when" id="when"></div>
<div style="display: inline-flex;">
<img class="saleproof-img" src="https://scaleapps.net/saleproof-dev/verified.png">
<span class="saleproof sale-proof-text" id="saleproof"></span>
</div>
</div>
</div>
</div>
</div>var who_array = ["Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States"];
var what_array = ["Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport"];
var when_array = ["About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago"];
var map_url_array = ["https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png"];
var saleproof_array = ["By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof"];
var index_array = Array.apply(null, {
length: who_array.length
}).map(Number.call, Number);
var delay = 1000;
var milisecs_hiding = 10 * 1000 - delay;
var milisecs_to_start = 3 * 1000 - delay;
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function refresh_bubble(step) {
document.getElementById('who').innerHTML = who_array[index_array[step]];
document.getElementById('what').innerHTML = what_array[index_array[step]];
document.getElementById('when').innerHTML = when_array[index_array[step]];
//document.getElementById('viewproduct').innerHTML = viewproduct_array[index_array[step]];
document.getElementById('saleproof').innerHTML = saleproof_array[index_array[step]];
document.getElementById('static-image').src = map_url_array[index_array[step]];
setTimeout(function() {
$("#proof-popup").fadeIn(250);
setTimeout(function() {
popdown_bubble(step);
}, 7000);
}, delay);
}
function popdown_bubble(step) {
document.getElementById('proof-popup').className = 'bounceBottom-leave-active bottom-right';
setTimeout(function() {
if (step < (who_array.length - 1)) {
refresh_bubble(step + 1);
} else {
index_array = shuffle(index_array);
refresh_bubble(0);
}
}, milisecs_hiding);
}
setTimeout(function() {
index_array = shuffle(index_array);
refresh_bubble(0);
}, milisecs_to_start);@import "https://fonts.googleapis.com/css?family=Roboto+Condensed:Roboto:400,600,800";
#proof-popup.bottom-right {
right: 0px;
}
#proof-popup.bottom-left {
left: 0px;
}
#proof-popup {
display: none;
border: none;
background: transparent;
z-index: 999998;
position: fixed;
bottom: 20px;
margin: 0px 20px;
}
#proof-popup.hide-proof {
// visibility: hidden;
// opacity: 0;
transition: visibility 0s 0.5s, opacity 0.4s linear
}
#proof-popup .md.bubble {
width: 345px;
}
#proof-popup .bubble {
padding: 5px;
margin: 0 auto;
min-height: 70px;
margin: 0 auto;
box-shadow: 0px 0px 56px -8px rgba(228, 228, 228, 1);
border: 1px solid #e4e4e4;
background: #fff;
float: none;
border-radius: 4px;
}
#proof-popup .bubble .content {
margin-top: -10px;
float: left;
width: 77%;
position: relative;
font-size: 10px;
}
#proof-popup .bubble h2.who {
margin: 0 0 3px;
}
#proof-popup .content h2 a {
font-size: 14px;
margin: 0px;
color: #000;
font-weight: bolder;
font-family: Roboto;
letter-spacing: normal;
text-decoration: none;
}
#proof-popup .bubble .what {
font-family: Roboto;
font-size: 13.2px;
color: #000;
width: 100%;
margin: 0 0 8px;
font-weight: bold;
}
#proof-popup .bubble .when {
color: #000;
font-family: Roboto;
font-size: 12px;
font-weight: 800;
}
#proof-popup .img_inner {
float: left;
width: 55px;
height: auto !important;
background: #fff;
padding: 9px 5px;
border: 1px solid rgba(63, 63, 68, .15);
overflow: hidden;
margin-right: 7px;
}
#proof-popup .notif_img {
display: block;
text-align: center;
}
#proof-popup .img_inner img {
overflow: hidden;
max-height: 100%!important;
}
#proof-popup .img-responsive {
max-width: 100%;
height: auto;
}
#proof-popup .bubble button.close {
-webkit-appearance: none;
cursor: pointer;
background: 0 0;
border: 0;
}
#proof-popup .bubble .close {
float: right;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
}
#proof-popup .bubble .last_one {
padding-top: 0px !important;
display: flex;
margin-right: 34px;
justify-content: space-between;
}
#proof-popup .bubble .last_one {
float: left;
width: 100%;
}
#proof-popup .bubble .last_one a {
color: #000;
font-weight: 600;
text-transform: capitalize;
font-size: 10px;
}
#proof-popup .bubble .circle_empty {
width: 6px;
height: 6px;
border-radius: 50%;
background: #acacac;
float: left;
margin: 4px 5px 0 0;
}
#proof-popup .bubble .sale-proof-text {
color: #000;
display: inline-block;
font-size: 12px;
font-family: Roboto;
font-weight: 800;
}
#proof-popup .saleproof-img {
width: 14px;
height: 14px;
margin-right: 5px;
}
.bounceBottom-enter-active {
animation: bounceBottomUp 1.1s linear both;
}
@keyframes bounceBottomUp {
0% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
4.1% {
transform: matrix(1, 0, 0, 1, 0, 41.971);
}
8.11% {
transform: matrix(1, 0, 0, 1, 0, 10.549);
}
12.11% {
transform: matrix(1, 0, 0, 1, 0, -1.843);
}
16.12% {
transform: matrix(1, 0, 0, 1, 0, -4.336);
}
27.23% {
transform: matrix(1, 0, 0, 1, 0, -.784);
}
38.34% {
transform: matrix(1, 0, 0, 1, 0, .104);
}
60.56% {
transform: matrix(1, 0, 0, 1, 0, -.002);
}
82.78% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
to {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.bounceBottom-leave-active {
animation: bounceBottomDown 1.1s linear both;
}
@keyframes bounceBottomDown {
0% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
4.2% {
transform: matrix(1, 0, 0, 1, 0, 54.927);
}
8.31% {
transform: matrix(1, 0, 0, 1, 0, 88.411);
}
12.51% {
transform: matrix(1, 0, 0, 1, 0, 103.215);
}
16.62% {
transform: matrix(1, 0, 0, 1, 0, 106.331);
}
27.73% {
transform: matrix(1, 0, 0, 1, 0, 101.285);
}
38.84% {
transform: matrix(1, 0, 0, 1, 0, 99.747);
}
61.06% {
transform: matrix(1, 0, 0, 1, 0, 100.01);
}
83.28% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
to {
transform: matrix(1, 0, 0, 1, 0, 100);
}
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<!-- THIS GOES BEFPRE </BODY> -->
<div id="proof-popup" class="hide-proof">
<div class="md bubble">
<div class="img_inner">
<a class="notif_img"><img id="static-image" src="" class="img-responsive"></a>
</div>
<button class="close" type="button" data-dismiss="modal">✖</button>
<div class="content">
<h2 class="who">
<a id="who" href=""></a>
</h2>
<p class="what" id="what"></p>
<div class="last_one">
<div class="when" id="when"></div>
<div style="display: inline-flex;">
<img class="saleproof-img" src="https://scaleapps.net/saleproof-dev/verified.png">
<span class="saleproof sale-proof-text" id="saleproof"></span>
</div>
</div>
</div>
</div>
</div>var who_array = ["Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States", "Miki from Miami, United States"];
var what_array = ["Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport", "Recently bought Red Silicone Sport"];
var when_array = ["About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago", "About 12 hours ago"];
var map_url_array = ["https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png", "https://scaleapps.net/saleproof-dev/default.png"];
var saleproof_array = ["By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof", "By Sale Proof"];
var index_array = Array.apply(null, {
length: who_array.length
}).map(Number.call, Number);
var delay = 1000;
var milisecs_hiding = 10 * 1000 - delay;
var milisecs_to_start = 3 * 1000 - delay;
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function refresh_bubble(step) {
document.getElementById('who').innerHTML = who_array[index_array[step]];
document.getElementById('what').innerHTML = what_array[index_array[step]];
document.getElementById('when').innerHTML = when_array[index_array[step]];
//document.getElementById('viewproduct').innerHTML = viewproduct_array[index_array[step]];
document.getElementById('saleproof').innerHTML = saleproof_array[index_array[step]];
document.getElementById('static-image').src = map_url_array[index_array[step]];
setTimeout(function() {
$("#proof-popup").fadeIn(250);
setTimeout(function() {
popdown_bubble(step);
}, 7000);
}, delay);
}
function popdown_bubble(step) {
document.getElementById('proof-popup').className = 'bounceBottom-leave-active bottom-right';
setTimeout(function() {
if (step < (who_array.length - 1)) {
refresh_bubble(step + 1);
} else {
index_array = shuffle(index_array);
refresh_bubble(0);
}
}, milisecs_hiding);
}
setTimeout(function() {
index_array = shuffle(index_array);
refresh_bubble(0);
}, milisecs_to_start);@import "https://fonts.googleapis.com/css?family=Roboto+Condensed:Roboto:400,600,800";
#proof-popup.bottom-right {
right: 0px;
}
#proof-popup.bottom-left {
left: 0px;
}
#proof-popup {
display: none;
border: none;
background: transparent;
z-index: 999998;
position: fixed;
bottom: 20px;
margin: 0px 20px;
}
#proof-popup.hide-proof {
// visibility: hidden;
// opacity: 0;
transition: visibility 0s 0.5s, opacity 0.4s linear
}
#proof-popup .md.bubble {
width: 345px;
}
#proof-popup .bubble {
padding: 5px;
margin: 0 auto;
min-height: 70px;
margin: 0 auto;
box-shadow: 0px 0px 56px -8px rgba(228, 228, 228, 1);
border: 1px solid #e4e4e4;
background: #fff;
float: none;
border-radius: 4px;
}
#proof-popup .bubble .content {
margin-top: -10px;
float: left;
width: 77%;
position: relative;
font-size: 10px;
}
#proof-popup .bubble h2.who {
margin: 0 0 3px;
}
#proof-popup .content h2 a {
font-size: 14px;
margin: 0px;
color: #000;
font-weight: bolder;
font-family: Roboto;
letter-spacing: normal;
text-decoration: none;
}
#proof-popup .bubble .what {
font-family: Roboto;
font-size: 13.2px;
color: #000;
width: 100%;
margin: 0 0 8px;
font-weight: bold;
}
#proof-popup .bubble .when {
color: #000;
font-family: Roboto;
font-size: 12px;
font-weight: 800;
}
#proof-popup .img_inner {
float: left;
width: 55px;
height: auto !important;
background: #fff;
padding: 9px 5px;
border: 1px solid rgba(63, 63, 68, .15);
overflow: hidden;
margin-right: 7px;
}
#proof-popup .notif_img {
display: block;
text-align: center;
}
#proof-popup .img_inner img {
overflow: hidden;
max-height: 100%!important;
}
#proof-popup .img-responsive {
max-width: 100%;
height: auto;
}
#proof-popup .bubble button.close {
-webkit-appearance: none;
cursor: pointer;
background: 0 0;
border: 0;
}
#proof-popup .bubble .close {
float: right;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
}
#proof-popup .bubble .last_one {
padding-top: 0px !important;
display: flex;
margin-right: 34px;
justify-content: space-between;
}
#proof-popup .bubble .last_one {
float: left;
width: 100%;
}
#proof-popup .bubble .last_one a {
color: #000;
font-weight: 600;
text-transform: capitalize;
font-size: 10px;
}
#proof-popup .bubble .circle_empty {
width: 6px;
height: 6px;
border-radius: 50%;
background: #acacac;
float: left;
margin: 4px 5px 0 0;
}
#proof-popup .bubble .sale-proof-text {
color: #000;
display: inline-block;
font-size: 12px;
font-family: Roboto;
font-weight: 800;
}
#proof-popup .saleproof-img {
width: 14px;
height: 14px;
margin-right: 5px;
}
.bounceBottom-enter-active {
animation: bounceBottomUp 1.1s linear both;
}
@keyframes bounceBottomUp {
0% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
4.1% {
transform: matrix(1, 0, 0, 1, 0, 41.971);
}
8.11% {
transform: matrix(1, 0, 0, 1, 0, 10.549);
}
12.11% {
transform: matrix(1, 0, 0, 1, 0, -1.843);
}
16.12% {
transform: matrix(1, 0, 0, 1, 0, -4.336);
}
27.23% {
transform: matrix(1, 0, 0, 1, 0, -.784);
}
38.34% {
transform: matrix(1, 0, 0, 1, 0, .104);
}
60.56% {
transform: matrix(1, 0, 0, 1, 0, -.002);
}
82.78% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
to {
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.bounceBottom-leave-active {
animation: bounceBottomDown 1.1s linear both;
}
@keyframes bounceBottomDown {
0% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
4.2% {
transform: matrix(1, 0, 0, 1, 0, 54.927);
}
8.31% {
transform: matrix(1, 0, 0, 1, 0, 88.411);
}
12.51% {
transform: matrix(1, 0, 0, 1, 0, 103.215);
}
16.62% {
transform: matrix(1, 0, 0, 1, 0, 106.331);
}
27.73% {
transform: matrix(1, 0, 0, 1, 0, 101.285);
}
38.84% {
transform: matrix(1, 0, 0, 1, 0, 99.747);
}
61.06% {
transform: matrix(1, 0, 0, 1, 0, 100.01);
}
83.28% {
transform: matrix(1, 0, 0, 1, 0, 100);
}
to {
transform: matrix(1, 0, 0, 1, 0, 100);
}
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<!-- THIS GOES BEFPRE </BODY> -->
<div id="proof-popup" class="hide-proof">
<div class="md bubble">
<div class="img_inner">
<a class="notif_img"><img id="static-image" src="" class="img-responsive"></a>
</div>
<button class="close" type="button" data-dismiss="modal">✖</button>
<div class="content">
<h2 class="who">
<a id="who" href=""></a>
</h2>
<p class="what" id="what"></p>
<div class="last_one">
<div class="when" id="when"></div>
<div style="display: inline-flex;">
<img class="saleproof-img" src="https://scaleapps.net/saleproof-dev/verified.png">
<span class="saleproof sale-proof-text" id="saleproof"></span>
</div>
</div>
</div>
</div>
</div>javascript css animation effect
javascript css animation effect
edited Jan 1 at 8:55
adiga
9,32862242
asked Jan 1 at 8:43
Ankur LakhaniAnkur Lakhani
273
edited Jan 1 at 8:55
adiga
9,32862242
asked Jan 1 at 8:43
Ankur LakhaniAnkur Lakhani
273
edited Jan 1 at 8:55
adiga
9,32862242
edited Jan 1 at 8:55
adiga
9,32862242
edited Jan 1 at 8:55
adiga
9,32862242
9,32862242
asked Jan 1 at 8:43
Ankur LakhaniAnkur Lakhani
273
asked Jan 1 at 8:43
Ankur LakhaniAnkur Lakhani
273
asked Jan 1 at 8:43
Ankur LakhaniAnkur Lakhani
273
273
closed as too broad by Rob, Jonas Wilms, grizzthedj, No Refunds No Returns, anothermh Jan 1 at 20:15
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
closed as too broad by Rob, Jonas Wilms, grizzthedj, No Refunds No Returns, anothermh Jan 1 at 20:15
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
1
it's a movie - what does that have to do with javascript and css?
– Jaromanda X
Jan 1 at 8:49
I think user is trying to get name of animation used in the video.
– Deepak Lakhara
Jan 1 at 9:59
@JaromandaX I need this type effect.
– Ankur Lakhani
Jan 1 at 10:03
add a comment |
1
it's a movie - what does that have to do with javascript and css?
– Jaromanda X
Jan 1 at 8:49
I think user is trying to get name of animation used in the video.
– Deepak Lakhara
Jan 1 at 9:59
@JaromandaX I need this type effect.
– Ankur Lakhani
Jan 1 at 10:03
1
1
it's a movie - what does that have to do with javascript and css?
– Jaromanda X
Jan 1 at 8:49
it's a movie - what does that have to do with javascript and css?
– Jaromanda X
Jan 1 at 8:49
I think user is trying to get name of animation used in the video.
– Deepak Lakhara
Jan 1 at 9:59
I think user is trying to get name of animation used in the video.
– Deepak Lakhara
Jan 1 at 9:59
@JaromandaX I need this type effect.
– Ankur Lakhani
Jan 1 at 10:03
@JaromandaX I need this type effect.
– Ankur Lakhani
Jan 1 at 10:03
add a comment |
0
active
oldest
votes
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
it's a movie - what does that have to do with javascript and css?
– Jaromanda X
Jan 1 at 8:49
I think user is trying to get name of animation used in the video.
– Deepak Lakhara
Jan 1 at 9:59
@JaromandaX I need this type effect.
– Ankur Lakhani
Jan 1 at 10:03