I'm trying to make it so that when i click the div, it either expands the full viewport width or returns to its original width. But its not working. I tried box.style.width but no change so I googled and got getComputedStyle(). so i was abe to console log the width but then i used setProperty on the width and it still didnt work.
const box = document.querySelector(".box");
const bsl = window.getComputedStyle(box);
let i = 0;
window.onload = () => {
console.log(bsl.getPropertyValue("width"), i, 77);
}
box.onclick = () => {
if (i % 2 === 0) {
bsl.setProperty("width", "100vw");
} else {
bsl.setProperty("width", "100px");
}
i++;
console.log(box.clientWidth, i);
}
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rebeccapurple;
animation: exc 1s linear forwards paused;
}
#keyframes exc {
from {
width: 100px;
}
to {
width: 100vw;
border-radius: 0%;
}
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="boxid" class="box"></div>
</body>
apparently there was a problem with your animation especially "puased"
check this out
const box = document.querySelector(".box");
let isExpand = false;
box.onclick = () => {
if (isExpand) {
box.style.width = "100px"
box.style.borderRadius = "50%"
isExpand = false
} else {
box.style.width = "100vw"
box.style.borderRadius = "0%"
isExpand = true
}
}
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rebeccapurple;
transition: width 1s linear, border-radius 1s linear;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="boxid" class="box"></div>
</body>
Related
I made a sandbox here to demonstrate my problem. I have a button that opens a modal on click. You can see that the modal slowly shifts from opacity 0 to opacity 1 during 0.7sec. But when I clock the close button on the modal it disappears instantly instead of slowly disappearing within 0.7sec like when opening it.
Here are my files:
index.html
<!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>Static Template</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="modal-overlay"></div>
<div class="modal">
This is Modal
<button class="close-button">
Close Modal
</button>
</div>
<button class="open-button">
Open Modal
</button>
<script src="./index.js"></script>
</body>
</html>
index.css
.modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #444;
z-index: 1;
transition: visibility 0s, opacity 0.5s;
opacity: 0;
visibility: hidden;
}
.modal {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
margin: auto;
background: #fff;
width: 350px;
padding: 20px;
height: 30vh;
width: 40vw;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.7s;
}
index.js
const openBtn = document.querySelector(".open-button");
const closeBtn = document.querySelector(".close-button");
const modal = document.querySelector(".modal");
const overlay = document.querySelector(".modal-overlay");
openBtn.addEventListener("click", () => {
modal.style.visibility = "visible";
modal.style.opacity = 1;
overlay.style.visibility = "visible";
overlay.style.opacity = 0.6;
});
closeBtn.addEventListener("click", () => {
modal.style.visibility = "hidden";
modal.style.opacity = 0;
overlay.style.visibility = "hidden";
overlay.style.opacity = 0;
});
Thanks for the help
nvm, it works now... just put timer in visibility... I placed it to 0s because I read that you can't transition visibility but I guess you can..
I am making a simple slideshow with images fading in and out. The image transition is done in CSS. I am having some issues of washed-out images during the transition. The problem is particularly visible when using the keyboard and keeping a key down. Below is a very basic example (simply press any key to change images).
Is there an easy fix to this? Ideally, I would like to have something similar to that website, which I find much more pleasing to the eye.
I have tried to play with the transition-timing-function and different transition-duration between the image and .visible rules in the CSS, without success.
const imgs = document.querySelectorAll('img');
const imgCount = imgs.length - 1;
let index = 0;
imgs[index].classList.add('visible');
window.addEventListener('keydown', () => {
imgs[index].classList.remove('visible');
index = index === imgCount ? 0 : ++index;
imgs[index].classList.add('visible');
});
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body, figure {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow {
height: 600px;
width: 800px;
max-width: 100%;
display: flex;
align-items: center;
position: relative;
}
img {
width: 100%;
position: absolute;
opacity: 0;
transition: opacity .3s;
z-index: 2;
}
.visible {
transition: opacity .3s;
opacity: 1;
z-index: 3;
}
<!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">
</head>
<body>
<div class="slideshow">
<img src="https://uploads6.wikiart.org/images/david-roberts/jerusalem-from-the-mount-of-olives-1847.jpg!Large.jpg">
<img src="https://uploads8.wikiart.org/images/david-roberts/departure-of-the-israelites-1830.jpg!Large.jpg">
<img src="https://uploads1.wikiart.org/images/david-roberts/church-of-the-holy-sepulchre-jerusalem-1849.jpg!Large.jpg">
<img src="https://uploads5.wikiart.org/00333/images/david-roberts/david-roberts-1796-1864-the-inauguration-of-the-great-exhibition-1-may-1851-rcin-407143-royal.jpg!Large.jpg">
</div>
</body>
</html>
Use a timer with a 100 millisecond delay with each keydown event
Use a control variable whose value is false with each keydown event
and the next image cannot be displayed until it is false and its value
becomes true when the timer time has come.
const imgs = document.querySelectorAll('img');
const imgCount = imgs.length - 1;
let index = 0;
imgs[index].classList.add('visible');
var allow = true;
window.addEventListener('keydown', () => {
if (allow) {
imgs[index].classList.remove('visible');
index = index === imgCount ? 0 : ++index;
imgs[index].classList.add('visible');
allow = false;
displayTimer(200);
}
});
var timer;
function displayTimer(sec) {
var dec = sec - 100;
if (dec == 0) {
window.clearTimeout(timer);
allow = true;
} else {
timer = setTimeout(function() {
displayTimer(dec)
}, 100);
}
}
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body,
figure {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow {
height: 600px;
width: 800px;
max-width: 100%;
display: flex;
align-items: center;
position: relative;
}
img {
width: 100%;
position: absolute;
opacity: 0;
transition: opacity .3s;
z-index: 2;
}
.visible {
transition: opacity .3s;
opacity: 1;
z-index: 3;
}
<!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">
</head>
<body>
<div class="slideshow">
<img src="https://uploads6.wikiart.org/images/david-roberts/jerusalem-from-the-mount-of-olives-1847.jpg!Large.jpg">
<img src="https://uploads8.wikiart.org/images/david-roberts/departure-of-the-israelites-1830.jpg!Large.jpg">
<img src="https://uploads1.wikiart.org/images/david-roberts/church-of-the-holy-sepulchre-jerusalem-1849.jpg!Large.jpg">
<img src="https://uploads5.wikiart.org/00333/images/david-roberts/david-roberts-1796-1864-the-inauguration-of-the-great-exhibition-1-may-1851-rcin-407143-royal.jpg!Large.jpg">
</div>
</body>
</html>
i have a question.
I want to make an animation that changes the background images while using the TweenMax slide.
It works, however open a new browser tab and see that it slows down or faster code when you come back.
I think it's a matter of setTimeout and tweenmax repeat-1.
Here is code.
Can tweenmax be executed within a function?
please help me.
var rollImg = ["https://media.istockphoto.com/photos/fire-letter-a-of-burning-flame-picture-id844027508?k=6&m=844027508&s=170667a&w=0&h=dt0qXfyejRq_kjs5PqXcMf7Fij_opW7w1kfhfmH6dyQ=",
"https://cdn.leroymerlin.com.br/products/letra_b_11cm_acrilico_preto_kami_acrilicos_89622526_0001_600x600.jpg"];
var layer1Interval = 4000;
var layer2Interval = 5000;
var animationInterval = 1000;
$(function() {
var roll = 1;
function rollFnc () {
setTimeout(function() {
roll++;
if (roll > 2) {
roll = 1;
}
$("#box1").attr("src", rollImg[roll - 1]);
setTimeout(rollFnc, layer1Interval + animationInterval * 1.5);
}, animationInterval / 2);
}
rollFnc();
})
var tl = new TimelineMax({
repeatDelay: (layer1Interval / 1000)
});
tl.from(".layer1", animationInterval / 1000, {
scaleX: 0,
transformOrigin: "left",
ease: 'expo.inOut'
});
tl.to(".layer1", animationInterval / 1000, {
scaleX: 0,
transformOrigin: "right",
ease: 'expo.out'
});
,
main {
position: relative;
width: 100%;
}
.box1 {
width: 40.4%;
position: absolute;
top: 3.7%;
left: 15%;
}
.box1 img {
width: 100%;
}
.box2 {
width: 19.9%;
position: absolute;
top: 3.7%;
left: 56.8%;
}
.box2 img {
width: 100%;
}
.layer1 {
background-color: #f85983;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
.layer2 {
background-color: #f85983;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
</head>
<body>
<div class="main">
<div class="box1">
<div class="layer1" id="layer1"></div>
<img id="box1" src="https://media.istockphoto.com/photos/fire-letter-a-of-burning-flame-picture-id844027508?k=6&m=844027508&s=170667a&w=0&h=dt0qXfyejRq_kjs5PqXcMf7Fij_opW7w1kfhfmH6dyQ=" alt="">
</div>
</div>
</body>
</html>
I'm creating a game, the div with id "playerDiv" when I hit the space bar it should start going up but it doesn't. So I would like when I hit the space bar the div would go up high.
could you help me? could you also report me the mistakes i made?
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 420 + inc;
player.top = player.top + x;
inc++
playerTimeOut = setTimeout(jump, 50);
}
window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
if (key.key === ' ') {
jump();
}
}
body {
background-color: #222222;
}
#background {
border: solid 2px #dddddd;
width: 800px;
height: 500px;
}
#playerDiv {
background-color: #aaaaaa;
width: 60px;
height: 80px;
position: relative;
top: 420px;
left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Game</title>
</head>
<body>
<div id="background">
<div id="playerDiv">
</div>
</div>
</body>
<script src="script.js"></script>
</html>
You're not passing the argument in addListener and you're not using correctly the top property, it belongs to style and needs unit , for example px
Also keyCode is deprecated, use key instead
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 10 + inc;
player.style.bottom = `${x}px`
inc++
console.log(player.style.bottom)
}
//window.addEventListener("keydown", e => e.key === "(Space Character)" ? jump() : '');
//For snippet only
jump()
setTimeout(() => jump(), 1000)
* {
/* demo */
box-sizing: border-box
}
body {
background-color: #222;
}
#background {
border: solid 2px #ddd;
width: 800px;
height: 500px;
position: relative;
/* demo */
max-width: 100%
}
#playerDiv {
background-color: #aaa;
width: 60px;
height: 80px;
position: absolute;
bottom: 0px;
left: 10px;
}
<div id="background">
<div id="playerDiv">
</div>
</div>
Try this:
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 10 + inc;
let style = window.getComputedStyle(player);
player.style.top = (parseInt(style.getPropertyValue('top'),10) - x) + 'px';
inc++
}
window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
if (key.keyCode == "32") {
jump();
}
}
body {
background-color: #222222;
}
#background {
border: solid 2px #dddddd;
width: 800px;
height: 500px;
}
#playerDiv {
background-color: #aaaaaa;
width: 60px;
height: 80px;
position: relative;
top: 420px;
left: 10px;
}
<div id="background">
<div id="playerDiv">
</div>
</div>
Recently I have asked a similar question about transition animation in divs. (See this post)
The Code Snippet below shows my solution.
However, the animation only works if the width is given in pixels, not as a percentage.
Does anybody know a way around this?
EDIT (More info to clarify my problem):
In this section of a website, I have a heading that should always stay the same and 3 pages of content which can be "swiped" on user input.
Thus, the span of the left margin of the page would range from -100% to +100%.
I want a swiping animation so that the user can switch from page 2 (i.e. displaying an image) to page 3 (i.e. the text correlating to the image).
Because of different browser window sizes, I need the width to be in percentages. Sadly...
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "-400px";
} else if (current == "0px") {
current = "-200px";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "0px";
} else if (current == "-400px") {
current = "-200px";
}
$(".container").css("left", current);
});
});
.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 200px;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
margin: 0;
width: 600px;
padding: 0;
display: block;
position: absolute;
left: -200px;
top: 0;
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
.ins {
width: 200px;
float: left;
height: 200px;
margin: 0;
padding: 0;
background-color: red;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>
I have changed the left positioning for a transform on the individual elements:
Now, also, the class row is set to occupy full browser width. The container class is se to 300% (because it will make room for 3 elements). And the children are set to 33% of this, that at the end is 100% of the row.
var pos = 2; /* values 1 - 2 or 3 */
$(document).ready(function() {
$(".next").click(function() {
if (pos == 1) {
$(".container").removeClass("pos1");
$(".container").addClass("pos2");
pos++;
} else if (pos == 2) {
$(".container").removeClass("pos2");
$(".container").addClass("pos3");
pos++;
}
});
$(".prev").click(function() {
if (pos == 3) {
$(".container").removeClass("pos3");
$(".container").addClass("pos2");
pos--;
} else if (pos == 2) {
$(".container").removeClass("pos2");
$(".container").addClass("pos1");
pos--;
}
});
});
.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 100%;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
width: 300%;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
}
.ins {
width: 33.33%;
height: 200px;
margin: 0;
padding: 0;
float: left;
transition: transform 0.5s ease-in-out;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}
.pos2 .ins {
transform: translateX(-100%);
}
.pos3 .ins {
transform: translateX(-200%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container pos2">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>
Narusan,
If I'm understanding your goal correctly, part of the problem is that no matter what, jQuery wants to return px units to you. You can set a percentage value, but it seems it will not then return those percentages to you.
I changed your code some to demonstrate this:
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
console.log(current);
if (current == "-200px" || current == "-100%") {
current = "-200%";
} else if (current == "0%") {
current = "-100%";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
console.log(current);
if (current == "-200px" || current == "-100%") {
current = "0%";
} else if (current == "-200%") {
current = "-100%";
}
$(".container").css("left", current);
});
});
You'll see that the values printed to the console are always in px, but if you inspect the DOM you'll see that the % value is being set on the element.
Approaching the problem very differently, like vals did, seems like a good approach.