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:-
A naive implementation on Google's Thanos effect (Mobile version)
No jQuery or other libaray used
Good bye, the cruel world
Hello, the new world
No jQuery or other libaray used
Good bye, the cruel world
Hello, the new world
No comments:
Post a Comment