Thanos snap effect
Thanos Fades using javascript

Thano’s snap is simple, if you search thanos snap you just need to click the thanos snap and see the magic, Every thing as i show in my video,

There is an example of the Thanos snap Code..

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    body {
  font-size: 16px;
}

.btn,
.block {
  text-align: center;
  border: 1px solid transparent;
}

.btn {
  margin: 8px auto;
  padding: 6px 12px;
  background-color: #5bc0de;
  color: white;
  display: inline-block;
  border-radius: 3px;
  cursor: pointer;
}

.btn:hover {
  background-color: #1490ac;
}

.block {
  width: 440px;
  height: 200px;
  border-color: #cfd8dc;
  border-radius: 8px;
  box-shadow: none;
  padding: 12px;
  line-height: 40px;
}

.div-hidden {
  transition: opacity 1.75s ease 0s;
  opacity: 0;
  visibility: hidden;
}

.div-show {
  transition: opacity 1.5s ease 0s;
  opacity: 1;
  visibility: visible;
}

.block-container {
  position: relative;
  margin: 8px 0;
}

.div-overlay {
  position: absolute;
  top: 0;
  animation-iteration-count: 1;
  animation-duration: 1.5s;
  visibility: hidden;
}

.div-overlay-left {
  animation-name: slide-left;
}

.div-overlay-right {
  animation-name: slide-right;
}

@keyframes slide-left {
  from {
    left: 0;
    opacity: 1;
    visibility: visible;
  }
  to {
    left: -30px;
    opacity: 0;
  }
}

@keyframes slide-right {
  from {
    left: 0;
    opacity: 1;
    visibility: visible;
  }
  to {
    left: 30px;
    opacity: 0;
  }
}
  </style>
  <script type="text/javascript">function classHas(base, has) {
  const arr = base.split(" ")
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === has) 
      return true;
  }
}

function classReplace(base, replace, next) {
  return base.replace(replace, next)
}

function onBtnClick() {
  const block = document.getElementById("block");
  const btn = document.getElementById("btn");
  const overlay = document.getElementById("overlay");

  if (classHas(block.className, "div-show")) {
    block.className = classReplace(block.className, "div-show", "div-hidden")
    btn.innerHTML = "Show"
    const content = block.innerHTML;
    overlay.innerHTML = "<div class=\"div-overlay div-overlay-left\">" + content + "</div>" + "<div class=\"div-overlay div-overlay-right\">" + content + "</div>";
  } else {
    block.className = classReplace(block.className, "div-hidden", "div-show")
    btn.innerHTML = "Snap"
    overlay.innerHTML = null;
  }
}
</script>
</head>
<body>
  <button type="button" class="btn" onclick="onBtnClick();" id="btn">Snap</button>
<div class="block-container">
  <div id="block" class="div-show block-main">
    <div class="block">
      This will show in android and ios
      <br>
      No Jquery is used
      <br>
      Good bye, cruel world
      <br>
      Hello, the new world
    </div>
  </div>
  <div id="overlay"></div>
</div>

</body>
</html>

Thanos Snap Effect Javascript Tutorial

It shows in Android or ios Mobile Phone Good bye, cruel world!
Hello, the new world

9 COMMENTS

  1. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet
    my newest twitter updates. I’ve been looking for a plug-in like this
    for quite some time and was hoping maybe you would have some
    experience with something like this. Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your
    new updates.

  2. Hello there, just became aware of your blog through Google, and found that it is really informative.

    I am going to watch out for brussels. I will be grateful if you continue this in future.

    Many people will be benefited from your writing.

LEAVE A REPLY