Hello.
Here I present simple thanos effect code. Only css and simple javascript are use to make this effect. Copy and paste whole html code for see result.
Demo:-
Here I present simple thanos effect code. Only css and simple javascript are use to make this effect. Copy and paste whole html code for see result.
I will put real thanos effect in a short time.<!DOCTYPE html><html><head><title></title><style>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></head><body><div class="block-container"><div id="block" class="div-show block-main"><div class="block">A naive implementation on Google's Thanos effect (Mobile version)<br>No jQuery or other libaray used<br>Good bye, the cruel world<br>Hello, the new world</div><button type="button" class="btn" onclick="onBtnClick();" id="btn">Thanos This</button></div><div id="overlay"></div></div><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></body></html>
Demo:-
