如何实现以下视频的动画效果？

时间：2019-01-01 08:43:21

标签： javascript css animation effect

我正在寻找链接中所示的动画。

帮我找出这里使用的动画类型。

任何有关此事的帮助都将提前得到。

下面是动画的链接。

https://d26dzxoao6i3hh.cloudfront.net/items/2E32111m260Z0x0V3H2R/Animation%202%20-%20Chat.mp4

请检查以上视频的动画。 请给我关于实现这种动画的建议。

我为此使用的html和CSS代码是

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">&#10006;</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>

0 个答案:

没有答案
相关问题
最新问题