Related
I am trying to open a web page on same tab/window on-clicking a zoom-over image. I tried _self but it is not working. Also, I am using Google Sites to develop a simple website. It seems easy but not getting the answer and I'm unable to solve the issue. Attaching my code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom[href] {
padding: 2px;
transition: transform .3s;
width: 150px;
height: 81px;
margin: 0 auto;
overflow: hidden;
}
.zoom:hover {
-ms-transform: scale(1.3); /* IE 9 */
-webkit-transform: scale(1.3); /* Safari 3-8 */
transform: scale(1.3);
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space /
background: transparent; / optional: just make scrollbar invisible /
}
/ optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
</style>
<script type="text/javascript">
var windowObjectReference = null; // global variable
function openRequestedPopup(url, windowName) {
if(windowObjectReference == null || windowObjectReference.closed) {
windowObjectReference = window.open(url, windowName, "_self");
} else {
windowObjectReference.focus();
};
}
</script>
</head>
<body>
<div class="zoom">
<a href="https://www.google.com" onclick="openRequestedPopup(this.href, this.target); return false;">
<img src="https://via.placeholder.com/250" alt="Our Performance" styles="width:100%">
</a>
</div>
</body>
</html>
This is my current situation:
And this is what i am expecting:
My understanding is that you intend to open a popup inside your page when the user is clicking on it. This can be achieved as follows:
1. Create an iframe
You will need to create an iframe like this:
<iframe id="mypopup" style="display:none;"></iframe>
2. Create a function that opens it with a URL
function openIFrame(url) {
let myPopup = document.getElementById("mypopup");
mypopup.style.display = "block";
mypopup.src = url;
}
3. Have an onclick that executes it
Something like
onclick="openIFrame(this.href); return false;"
in your anchor.
its my firtst time using vanilla tilt js for 3d animation on my site.But i just followed all tutorial in internet,and has matched each code line of code with the comand and tutorial from vanilla-tilt.js and make sure each tutorial from maker that i tried properly.But it doesnt work in my browser. and this is my code and the result in browser. i also tried on live preview extension on vs code,but hve same result it doesnt work...thanks:)
var VanillaTilt=function(){"use strict";class t{constructor(e,i={}){if(!(e instanceof Node))throw"Can't initialize VanillaTilt because "+e+" is not a Node.";this.width=null,this.height=null,this.clientWidth=null,this.clientHeight=null,this.left=null,this.top=null,this.gammazero=null,this.betazero=null,this.lastgammazero=null,this.lastbetazero=null,this.transitionTimeout=null,this.updateCall=null,this.event=null,this.updateBind=this.update.bind(this),this.resetBind=this.reset.bind(this),this.element=e,this.settings=this.extendSettings(i),this.reverse=this.settings.reverse?-1:1,this.glare=t.isSettingTrue(this.settings.glare),this.glarePrerender=t.isSettingTrue(this.settings["glare-prerender"]),this.fullPageListening=t.isSettingTrue(this.settings["full-page-listening"]),this.gyroscope=t.isSettingTrue(this.settings.gyroscope),this.gyroscopeSamples=this.settings.gyroscopeSamples,this.elementListener=this.getElementListener(),this.glare&&this.prepareGlare(),this.fullPageListening&&this.updateClientSize(),this.addEventListeners(),this.reset(),this.updateInitialPosition()}static isSettingTrue(t){return""===t||!0===t||1===t}getElementListener(){if(this.fullPageListening)return window.document;if("string"==typeof this.settings["mouse-event-element"]){const t=document.querySelector(this.settings["mouse-event-element"]);if(t)return t}return this.settings["mouse-event-element"]instanceof Node?this.settings["mouse-event-element"]:this.element}addEventListeners(){this.onMouseEnterBind=this.onMouseEnter.bind(this),this.onMouseMoveBind=this.onMouseMove.bind(this),this.onMouseLeaveBind=this.onMouseLeave.bind(this),this.onWindowResizeBind=this.onWindowResize.bind(this),this.onDeviceOrientationBind=this.onDeviceOrientation.bind(this),this.elementListener.addEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.addEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.addEventListener("mousemove",this.onMouseMoveBind),(this.glare||this.fullPageListening)&&window.addEventListener("resize",this.onWindowResizeBind),this.gyroscope&&window.addEventListener("deviceorientation",this.onDeviceOrientationBind)}removeEventListeners(){this.elementListener.removeEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.removeEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.removeEventListener("mousemove",this.onMouseMoveBind),this.gyroscope&&window.removeEventListener("deviceorientation",this.onDeviceOrientationBind),(this.glare||this.fullPageListening)&&window.removeEventListener("resize",this.onWindowResizeBind)}destroy(){clearTimeout(this.transitionTimeout),null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.reset(),this.removeEventListeners(),this.element.vanillaTilt=null,delete this.element.vanillaTilt,this.element=null}onDeviceOrientation(t){if(null===t.gamma||null===t.beta)return;this.updateElementPosition(),this.gyroscopeSamples>0&&(this.lastgammazero=this.gammazero,this.lastbetazero=this.betazero,null===this.gammazero?(this.gammazero=t.gamma,this.betazero=t.beta):(this.gammazero=(t.gamma+this.lastgammazero)/2,this.betazero=(t.beta+this.lastbetazero)/2),this.gyroscopeSamples-=1);const e=this.settings.gyroscopeMaxAngleX-this.settings.gyroscopeMinAngleX,i=this.settings.gyroscopeMaxAngleY-this.settings.gyroscopeMinAngleY,s=e/this.width,n=i/this.height,l=(t.gamma-(this.settings.gyroscopeMinAngleX+this.gammazero))/s,a=(t.beta-(this.settings.gyroscopeMinAngleY+this.betazero))/n;null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event={clientX:l+this.left,clientY:a+this.top},this.updateCall=requestAnimationFrame(this.updateBind)}onMouseEnter(){this.updateElementPosition(),this.element.style.willChange="transform",this.setTransition()}onMouseMove(t){null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event=t,this.updateCall=requestAnimationFrame(this.updateBind)}onMouseLeave(){this.setTransition(),this.settings.reset&&requestAnimationFrame(this.resetBind)}reset(){this.event={clientX:this.left+this.width/2,clientY:this.top+this.height/2},this.element&&this.element.style&&(this.element.style.transform=`perspective(${this.settings.perspective}px) `+"rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"),this.resetGlare()}resetGlare(){this.glare&&(this.glareElement.style.transform="rotate(180deg) translate(-50%, -50%)",this.glareElement.style.opacity="0")}updateInitialPosition(){if(0===this.settings.startX&&0===this.settings.startY)return;this.onMouseEnter(),this.fullPageListening?this.event={clientX:(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.clientWidth,clientY:(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.clientHeight}:this.event={clientX:this.left+(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.width,clientY:this.top+(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.height};let t=this.settings.scale;this.settings.scale=1,this.update(),this.settings.scale=t,this.resetGlare()}getValues(){let t,e;return this.fullPageListening?(t=this.event.clientX/this.clientWidth,e=this.event.clientY/this.clientHeight):(t=(this.event.clientX-this.left)/this.width,e=(this.event.clientY-this.top)/this.height),t=Math.min(Math.max(t,0),1),e=Math.min(Math.max(e,0),1),{tiltX:(this.reverse*(this.settings.max-t*this.settings.max*2)).toFixed(2),tiltY:(this.reverse*(e*this.settings.max*2-this.settings.max)).toFixed(2),percentageX:100*t,percentageY:100*e,angle:Math.atan2(this.event.clientX-(this.left+this.width/2),-(this.event.clientY-(this.top+this.height/2)))*(180/Math.PI)}}updateElementPosition(){let t=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=t.left,this.top=t.top}update(){let t=this.getValues();this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:t.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:t.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.glare&&(this.glareElement.style.transform=`rotate(${t.angle}deg) translate(-50%, -50%)`,this.glareElement.style.opacity=`${t.percentageY*this.settings["max-glare"]/100}`),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:t})),this.updateCall=null}prepareGlare(){if(!this.glarePrerender){const t=document.createElement("div");t.classList.add("js-tilt-glare");const e=document.createElement("div");e.classList.add("js-tilt-glare-inner"),t.appendChild(e),this.element.appendChild(t)}this.glareElementWrapper=this.element.querySelector(".js-tilt-glare"),this.glareElement=this.element.querySelector(".js-tilt-glare-inner"),this.glarePrerender||(Object.assign(this.glareElementWrapper.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",overflow:"hidden","pointer-events":"none"}),Object.assign(this.glareElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",transform:"rotate(180deg) translate(-50%, -50%)","transform-origin":"0% 0%",opacity:"0"}),this.updateGlareSize())}updateGlareSize(){if(this.glare){const t=2*(this.element.offsetWidth>this.element.offsetHeight?this.element.offsetWidth:this.element.offsetHeight);Object.assign(this.glareElement.style,{width:`${t}px`,height:`${t}px`})}}updateClientSize(){this.clientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,this.clientHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}onWindowResize(){this.updateGlareSize(),this.updateClientSize()}setTransition(){clearTimeout(this.transitionTimeout),this.element.style.transition=this.settings.speed+"ms "+this.settings.easing,this.glare&&(this.glareElement.style.transition=`opacity ${this.settings.speed}ms ${this.settings.easing}`),this.transitionTimeout=setTimeout(()=>{this.element.style.transition="",this.glare&&(this.glareElement.style.transition="")},this.settings.speed)}extendSettings(t){let e={reverse:!1,max:15,startX:0,startY:0,perspective:1e3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:1,speed:300,transition:!0,axis:null,glare:!1,"max-glare":1,"glare-prerender":!1,"full-page-listening":!1,"mouse-event-element":null,reset:!0,gyroscope:!0,gyroscopeMinAngleX:-45,gyroscopeMaxAngleX:45,gyroscopeMinAngleY:-45,gyroscopeMaxAngleY:45,gyroscopeSamples:10},i={};for(var s in e)if(s in t)i[s]=t[s];else if(this.element.hasAttribute("data-tilt-"+s)){let t=this.element.getAttribute("data-tilt-"+s);try{i[s]=JSON.parse(t)}catch(e){i[s]=t}}else i[s]=e[s];return i}static init(e,i){e instanceof Node&&(e=[e]),e instanceof NodeList&&(e=[].slice.call(e)),e instanceof Array&&e.forEach(e=>{"vanillaTilt"in e||(e.vanillaTilt=new t(e,i))})}}return"undefined"!=typeof document&&(window.VanillaTilt=t,t.init(document.querySelectorAll("[data-tilt]"))),t}();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>coba tilt.js</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<style>
*{
margin: 0;
padding: 0;
}
.kotak{
width: 200px;
height: 200px;
background-color: aqua;
margin: 50px auto;
display: flex;
}
.kotak h3{
margin: auto;
}
</style>
</head>
<body>
<script src="vanilla-tilt.min.js" integrity="sha512-K9tDZvc8nQXR1DMuT97sct9f40dilGp97vx7EXjswJA+/mKqJZ8vcZLifZDP+9t08osMLuiIjd4jZ0SM011Q+w==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<!-- <h1>my judul</h1> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div class="kotak" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500">
<h3>tulisanku</h3>
</div>
</body>
</html>
I think the issue is you need to add transform styles to your container element and child h3 - assuming you want a 3d style parallax effect.
You also need to add the following js to your page to initialize the effect for your element:
VanillaTilt.init(document.querySelector('.kotak'), {
max: 25,
speed: 400
});
Just add the following css to your elements and the effect should work:
.kotak{
// add these two styles
transform-style: preserve-3d;
transform: perspective(1000px);
}
.kotak h3{
// add this style
transform: translateZ(20px);
}
Look at this fiddle for reference.
I want to make the element <div id="text"> appear after a loading screen: "Welcome in Shanghaied".
But I can't make it show.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Idk</title>
<script src="skrypt.js"></script> <!--Zaimportowanie javascriptu-->
<link rel="stylesheet" type="text/css" href="style.css"> <!--Odwołanie do cssa-->
</head>
<body>
<div class="disappear">
<div class="container"> <!--Div z napisem-->
<div class="data">Welcome in Shanghaied</div> <!--Tu wpisz tekst-->
</div>
<!--Rozpoczęcia javascriptu-->
<script type="text/javascript">
const text = baffle(".data");
text.set({
characters : '▒▓░ >▒█▓▒▒ >█▓▒░ ██▒ ▒█/▒░ ▓░>> <▒▓ █▒▓░ █▒▓▓',
// szybkość, im większa tym wolniej
speed: 69
})
text.start();
//ilość znaków
text.reveal(4201);
</script>
</div>
<div class="content">
<div id="text">
<p>Test for the Text</p>
</div>
</div>
</body>
</html>
Css
html, body{
margin: 0; /* margines */
padding: 0; /* Padding */
width: 100%; /* Szerokość */
height: 100vh; /* Wysokość */
background: #101010; /* Kolor tła */
cursor: none; /* Chowanie kursora */
}
.data{
font-family: Arial, Verdana, sans-serif; /* Po font family dajemy nazwe czcionki */
color: #fff; /* Kolor czcionki */
font-size: 40px; /* Rozmiar czcionki */
letter-spacing: 12px; /* Spacje pomiędzy literami */
font-weight: 500; /* Grubość czcionki */
position: absolute; /* Pozycja czcionki */
top: 50%; /* Pozycja czcionki */
left:50%; /* Pozycja czcionki */
transform: translate(-50%, -50%);
}
.disappear {
animation: disappear 0s linear 3.2s forwards;
}
#keyframes disappear {
to {opacity:0;}
}
#text p {
display: inline-block;
font-size: 21px;
text-align: center;
position: absolute;
animation: appear 2s;
left: 315px;
}
#keyframes appear {
from {
left: -100px;
}
to {
left: 315px;
}
}
#-moz-keyframes appear {
/* Firefox */
from {
left: -100px;
}
to {
left: 315px;
}
}
#-webkit-keyframes appear {
/* Safari and Chrome */
from {
left: -100px;
}
to {
left: 315px;
}
}
#-o-keyframes appear {
/* Opera */
from {
left: -100px;
}
to {
left: 315px;
}
}
JS
/*!
* baffle 0.3.6 - A tiny javascript library for obfuscating and revealing text in DOM elements.
* Copyright (c) 2016 Cam Wiegert <cam#camwiegert.com> - https://camwiegert.github.io/baffle
* License: MIT
*/
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.baffle=e():t.baffle=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return t[r].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}var i=n(2),o=r(i);t.exports=o["default"]},function(t,e){"use strict";function n(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t}function r(t,e){return t.split("").map(e).join("")}function i(t){return t[Math.floor(Math.random()*t.length)]}function o(t,e){for(var n=0,r=t.length;n<r;n++)e(t[n],n)}function u(t){return t.map(function(t,e){return!!t&&e}).filter(function(t){return t!==!1})}function s(t){return"string"==typeof t?[].slice.call(document.querySelectorAll(t)):[NodeList,HTMLCollection].some(function(e){return t instanceof e})?[].slice.call(t):t.nodeType?[t]:t}Object.defineProperty(e,"__esModule",{value:!0}),e.extend=n,e.mapString=r,e.sample=i,e.each=o,e.getTruthyIndices=u,e.getElements=s},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var o=n(1),u=n(3),s=r(u),c={characters:"AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz~!##$%^&*()-+=[]{}|;:,./<>?",exclude:[" "],speed:50},a=function(){function t(e,n){i(this,t),this.options=(0,o.extend)(Object.create(c),n),this.elements=(0,o.getElements)(e).map(s["default"]),this.running=!1}return t.prototype.once=function(){var t=this;return(0,o.each)(this.elements,function(e){return e.write(t.options.characters,t.options.exclude)}),this.running=!0,this},t.prototype.start=function(){var t=this;return clearInterval(this.interval),(0,o.each)(this.elements,function(t){return t.init()}),this.interval=setInterval(function(){return t.once()},this.options.speed),this.running=!0,this},t.prototype.stop=function(){return clearInterval(this.interval),this.running=!1,this},t.prototype.set=function(t){return(0,o.extend)(this.options,t),this.running&&this.start(),this},t.prototype.text=function(t){var e=this;return(0,o.each)(this.elements,function(n){n.text(t(n.value)),e.running||n.write()}),this},t.prototype.reveal=function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?0:arguments[0],n=arguments.length<=1||void 0===arguments[1]?0:arguments[1],r=e/this.options.speed||1,i=function(){clearInterval(t.interval),t.running=!0,t.interval=setInterval(function(){var e=t.elements.filter(function(t){return!t.bitmap.every(function(t){return!t})});(0,o.each)(e,function(e){var n=Math.ceil(e.value.length/r);e.decay(n).write(t.options.characters,t.options.exclude)}),e.length||(t.stop(),(0,o.each)(t.elements,function(t){return t.init()}))},t.options.speed)};return setTimeout(i,n),this},t}();e["default"]=function(t,e){return new a(t,e)}},function(t,e,n){"use strict";function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var u=n(1),s=function(){function t(e){o(this,t),this.value=e,this.init()}return t.prototype.init=function(){return this.bitmap=this.value.split("").map(function(){return 1}),this},t.prototype.render=function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?[]:arguments[0],n=arguments.length<=1||void 0===arguments[1]?[]:arguments[1];return e.length?(0,u.mapString)(this.value,function(r,i){return n.indexOf(r)>-1?r:t.bitmap[i]?(0,u.sample)(e):r}):this.value},t.prototype.decay=function(){for(var t=arguments.length<=0||void 0===arguments[0]?1:arguments[0];t--;){var e=(0,u.getTruthyIndices)(this.bitmap);this.bitmap[(0,u.sample)(e)]=0}return this},t.prototype.text=function(){var t=arguments.length<=0||void 0===arguments[0]?this.value:arguments[0];return this.value=t,this.init(),this},t}(),c=function(t){function e(n){o(this,e);var i=r(this,t.call(this,n.textContent));return i.element=n,i}return i(e,t),e.prototype.write=function(t,e){return this.element.textContent=this.render(t,e),this},e}(s);e["default"]=function(t){return new c(t)}}])});
You can either create a page, which only does the loading screen, and then move onto another page with the element.
or otherwise give the loading screen an opaque background to hide the element, then hide it afterwards.
document.getElementById("text").style.display = "none"; //Hide
document.getElementById("text").style.display = "none"; //Show
You can additionally defer the script via:
<script src="script.js" defer></script>
Well.. first of all, your text is black on a black background.. so it's never gonna appear unless you change that. :-) Secondly, you can add a function that will execute it after your loading ends called setTimeout, tag the p using query selector and apply the animation.
I changed the variable to timeLoading to track your intro, applied it in, and used that to change setTimeout.. with a change of -1000 to make it better (not sure why, the loading is kinda weird). The only thing that is wrong now is that at the beginning your text should be off screen.. but I'll leave that to you to practice. ;)
Here's the code you need:
<script type="text/javascript">
const text = baffle(".data");
text.set({
characters : '▒▓░ >▒█▓▒▒ >█▓▒░ ██▒ ▒█/▒░ ▓░>> <▒▓ █▒▓░ █▒▓▓',
// szybkość, im większa tym wolniej
speed: 69
})
text.start();
//ilość znaków
let timeLoading = 4000; // Set your intro loading here
text.reveal(timeLoading);
setTimeout(() => {
document.querySelector("#text p").style.animation = "appear 2s";
}, timeLoading - 1000);
</script>
I want to add 2 classes to my div with an event listener, but I want it to add one list, update the DOM, and add the second class
I need to move the div with the id app to the top and then to the left when the user clicks the key 1, but it goes up and left at the same time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
.robot_start_top {
top: 280px;
transition: top 1s;
}
.robot_start_left {
position: fixed;
left: 600px;
transition: all 1s;
}
.robot_end_left {
left: 500px;
}
.robot_end_top {
top: 180px;
}
.robot1_start_left {
position: fixed;
left: 600px;
transition: left 1s;
}
.robot1_end_left {
left: 400px;
}
</style>
</head>
<body onkeydown="move(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" style="width:30px; height:40px" />
</div>
<script>
let count = 0;
var move = function(event) {
if (event.keyCode === 97) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot_end_left");
}, 0);
}
if (event.keyCode === 98) {
const appDiv = document.getElementById("app");
appDiv.classList.add("robot1_end_left");
}
};
</script>
</body>
</html>
but in this way, it adds all 2 classes at once.
Here is the whole code in CodeSandBox
Browsers will generally let JavaScript code like yours do a burst of DOM updates without doing anything visually. They'll wait until the script exits (like an event handler) or until something in the script requires that the browser do the visual update before it can provide an answer.
In your case, the simplest thing to do is defer the addition of the "second" class for some fractions of a second; exactly how long depends on what you want it to look like. The way you'd do that would be something like
setTimeout(() => { appDiv.classList.add("robot_end_left") }, 500);
That 500 means to wait 500 milliseconds before adding the second class.
I've seen that there are different ways to fade in an object on load but every time I try to apply it to my own code I must be messing something up. I've been trying css and javascript so I'm good to use whatever I can get working.
I would like Hello to fade up on load but then 5 seconds later Next Page also fade's in.
Here's my code so far.
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="sky.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="sky.js"></script>
</head>
<body>
<div id="Welcome">
<h1> Hello </h1>
</div>
<div id="Next">
<h2> Next Page </h2>
</div>
<video autoplay muted loop id="VidBackground">
<source src="video/home.mp4">
</video>
</body>
</html>
and here's my css
h1, h3, a {
color: #ffffff;
line-height: 2;
}
#welcome {
position: absolute;
bottom: 15%;
right: 20%;
z-index: 2;
}
#next {
position: absolute;
bottom: 10%;
right: 20%;
z-index: 2;
}
#VidBackground {
position: fixed;
right: 0;
bottom: 0;
object-fit: cover;
z-index: -1;
}
This will be a good fit for CSS transitions.
You can use them like this:
transition: <css property> <transition-duration> <transition-function>
Example:
#next {
transition: opacity 0.5s ease-in-out;
opacity: 0;
/*pointer-events makes this node not respond to mouse/touch events
Which is probably what we want while the button is invisible.*/
pointer-events: none;
}
Now whenever the opacity style changes on #next it will transition instead of appearing instantaneous. Typically you would trigger it by some javascript.
window.onload = function() {
setTimeout(function() {
//Re-enable mouse/touch events on the #next button
document.getElementById("next").style.pointerEvents = 'auto';
//Show the #next button
//Since opacity style is transitioned, the opacity change will automatically trigger the transition.
document.getElementById("next").style.opacity = 1;
}, 5000);
});
Further reading on transitions can be found over at the MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transition