We Keep Coding

How to make an image fade in and another fade out with one button click?

I'm trying to fade in the blue square with the first click of the button. And then on the second click, the blue square fades out and the red one fades in.
As you can see when you test it, it doesn't work that way. I don't know where I am wrong and If anyone can show me how to fix it I'd appreciate it.
var currentscene = 0;
function next() {
currentscene++;
if (currentscene = 1) {
var element = document.getElementById("blue");
element.classList.add("fade-in");
}
if (currentscene = 2) {
var element = document.getElementById("blue");
element.classList.add("fade-out");
var element = document.getElementById("red");
element.classList.add("fade-in");
}
}
.squareblue {
height: 50px;
width: 50px;
top: 50px;
background-color: blue;
position: absolute;
opacity: 0;
animation-fill-mode: forwards;
}
.squarered {
height: 50px;
width: 50px;
top: 100px;
background-color: red;
position: absolute;
opacity: 0;
animation-fill-mode: forwards;
}
.fade-out {
animation: fadeOut ease 2s
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fade-in {
animation: fadeIn ease 2s
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div2 id="blue" class="squareblue"></div2>
<div2 id="red" class="squarered"></div2>
<button class="button" onclick="next()">next</button>

A few mistakes, and a few things to improve.
Inside your if conditionals, you were assigning the value of 1 and 2 to the variable currentscene instead of using the comparison operator ==. I added the remainder operator to be able to continue the loop indefinitely.
Instead of grabbing the element from the dom each loop, I just defined the elements at the top, and continued to reference the save variable.
instead of using a css keyframes animation, I used the css transition property to add animation to the changing of opacity.
If you have any questions, please ask 🚀
let currentscene = 0;
const blue = document.getElementById("blue");;
const red = document.getElementById("red");;
function next() {
currentscene++;
if (currentscene % 2 == 0) {
blue.classList.remove("opaque");
red.classList.add("opaque");
}
else if (currentscene % 2 == 1) {
red.classList.remove("opaque");
blue.classList.add("opaque");
}
}
.squareblue,
.squarered {
height: 50px;
width: 50px;
position: absolute;
opacity: 0;
animation-fill-mode: forwards;
transition: 1s;
}
.squareblue {
top: 50px;
background-color: blue;
}
.squarered {
top: 100px;
background-color: red;
}
.opaque {
opacity: 1;
}
button {user-select: none}
<div2 id="blue" class="squareblue"></div2>
<div2 id="red" class="squarered"></div2>
<button class="button" onclick="next()">next</button>

How to stop a text animation from moving the logo when the text appears

I am making a mental health website. on the homepage of the website I have chosen to make a text that is animated as opposed to being static, just to make the website more lively and appealing.
this is what it looks like when the text appears.
The horizontal overflow is hidden, so the logo on the side is out of the page because the text has stretched.
How can I fix this?
// sets the interval for which the function will run, in this case 8 seconds, (8000)
setInterval(function() {
// grab all elements with class 'sub-head' and stores it in the elems const.
const elems = document.querySelectorAll('.sub-head')
// loop through the found elements
elems.forEach(e => {
// check if the element has a class 'inactive', if there is one, remove it
if (e.classList.contains('inactive')) e.classList.remove('inactive')
// if not, add it. This is how it creates a loop.
else e.classList.add('inactive');
});
}, 8000)
/* The animation text*/
.intro {
display: inline-flex;
overflow: hidden;
white-space: nowrap;
}
.intro1 {
animation: showup 7s;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
color: purple;
}
.intro2 {
width: 0px;
animation: reveal 7s infinite;
}
.inactive {
display: none;
}
.sub-head {
margin-left: -355px;
animation: slidein 7s infinite;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: .4;
}
80% {
opacity: .8;
}
100% {
opacity: 1;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: 800px;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
width: 800px;
}
}
<div class="first-box">
<div class="intro intro1">Welcome!</div>
<div class="intro intro2">
<span class="sub-head "> We care about you</span>
<span class="sub-head inactive">becuase you matter</span>
<!-- lol dramatic effect-->
</div>
</div>

I think the problem was you're setting so much width that the image/logo will also be affected by the width that you have set.
SOLUTION:
Set a static width on your .intro2 class for example 300px or reasonable width that will only fit your static content.
.intro2 {
width: 300px;
animation: reveal 7s infinite;
}
You can check on this pen https://codepen.io/Preygremmer15/pen/MWoJBzv

Fading in a background image using javascript or css on hover

So far, i've been able to make it such that when the cursor hovers over the div a background image in the body appears. I need to add a fade in animation to this. Ive been looking for solutions here but havent been able to work around it. I don't have any experience in javascript.
enter code here
<script>
changeBgImage = () => {
document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";
console.log("working")
}
ogBgImage = () => {
document.body.style.backgroundImage = "url('../Images/Background/black.jpg')";
console.log("working")
}
</script>
<style>
body {
background-image: url('../Images/Background/black.jpg');
}
</style>
<body>
<div class="gwraith"><a href="../Legends/wraith.html ">
<img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">
</a>
</body>

Add a transition rule to the body tag. The same can be done in css, without javascript.
function changeBgImage() {
document.body.style.backgroundImage = "url('https://s1.1zoom.ru/big0/284/Summer_Pond_Fence_Trees_496376.jpg')";
}
function ogBgImage() {
document.body.style.backgroundImage = "url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg')";
}
body {
background-image: url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg');
background-repeat: no-repeat;
background-size: cover;
transition: all 0.7s linear;
}
<body>
<div class="gwraith">
<a href="../Legends/wraith.html">
<img src="https://begin-english.ru/img/word/refresh.jpg" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">
</a>
</div>
</body>

I didn't manage to do it with body. But you can stretch the underlying div and change its opacity.
const appDiv = document.getElementById("app");
appDiv.addEventListener("mouseover", showBodyBackground);
appDiv.addEventListener("mouseout", hideBodyBackground);
function showBodyBackground() {
document.getElementById("bg").classList.add("hidden");
}
function hideBodyBackground() {
document.getElementById("bg").classList.remove("hidden");
}
.visible {
background: url('https://www.bouwendnederland.nl/media/6502/rijnhaven-impressie-602-x-402.jpg');
transition: opacity 1.5s linear;
opacity: 1;
}
.hidden {
opacity: 0;
}
.stretched {
position: absolute;
width: 100%;
height: 100%;
}
#app {
width: 100px;
height:50px;
background: lightblue;
text-align: center;
margin: 0 auto;
position: relative;
}
<body>
<div class="stretched visible" id="bg"></div>
<div id="app">Hover me!</div>
</body>
Be aware, that everything will disappear in the element with opacity: 0. It means, your button and other elements you want to keep on the screen shouldn't be children of that div.

We can't just fade body, or indeed any wrapper div which may replace it, as that would fade everything. We also can't directly fade a background image as CSS doesn't have that ability. But we can put the two background images into the two pseudo elements, before and after, of body and these can then be animated to fade in and out. The code wants to fade in one background on mouseover, and fade it out on mouseout.
There are two background images used, one called black. The code here fades that out as the other image fades in, but that can be easily removed if required.
Mouse over the gear image to fade in the second image, and mouseout of the gear to fade it out.
<!DOCTYPE html>
<html>
<head>
<script>
changeBgImage = () => {
<!--document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";-->
document.body.classList.toggle('showbefore');
document.body.classList.toggle('showafter');
console.log("working")
}
ogBgImage = () => {
<!--document.body.style.backgroundImage = "url('christmas card 2020 front.jpg')";-->
document.body.classList.toggle('showbefore');
document.body.classList.toggle('showafter');
console.log("working")
}
</script>
<style>
body {
position: relative;
height: 100vh; /* I added this just to cover the whole window you may not want it */
}
body:before, body:after {
opacity: 0;
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size:cover; /* I added this just to get the background over the whole window - you may or may not want it */
background-repeat: no-repeat no-repeat;
background-position: center center;
animation-duration: 2s; /* change to what you want it to be */
animation-fill-mode: forwards;
}
body:before {
background-image: linear-gradient(black, black); /*change this to url('your background image');*/
animation-name: shown;
}
body:after {
background-image: url('https://ahweb.org.uk/christmas card 2020 front.jpg');
animation-name: unshown;
}
body.showbefore:before, body.showafter:after {
animation-name: show;
}
body.showafter:before, body.showbefore:after {
animation-name: unshow;
}
#keyframes unshown {
from {
opacity: 0;
}
to {
opacity: 0;
}
}
#keyframes shown {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
#keyframes unshow {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body class="showbefore">
<div class="gwraith"><!--<a href="../Legends/wraith.html ">-->
<!--<img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">-->
<img src="https://ahweb.org.uk/gear.jpg" width="130vw" class="wraith"
onmouseover="event.preventDefault();event.stopPropagation();changeBgImage();" onmouseout="event.preventDefault();event.stopPropagation();ogBgImage();">
<!--</a>-->
</body>
</body>
</html>

Multiple actions for one button

I'm trying to make full screen menu like a modal.
Everything is fine except fadeOut animation.
Can someone explain what is wrong with my scripts/codes?
I want to make this content fades in when click the button but fades out when its clicked again. My script sets the value of "display" but in animation only fade in effect works fine. In reverse fade out do effect instantly (without 0.5s animation duration). Button has got z-index = 101 and menu-content = 100 so the button stay at the same place all the time.
Thanks
function myMenu() {
var x = document.getElementById("menu-content");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
if (x.style.animation === "fadeIn 0.5s ease-in-out") {
x.style.animation = "fadeOut 0.5s ease-in-out";
} else {
x.style.animation = "fadeIn 0.5s ease-in-out";
}
}
#menu-content {
display: none;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(-25deg, #c0a0ae, #6f448a);
z-index: 100;
top: 0;
left: 0;
animation: fadeOut 0.5s ease-in-out;
}
.menu-content-properties {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: auto;
background: #000000;
opacity: 0.5;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
<button id="menu-button" style="z-index: 101; position: absolute; top: 0;
left: 0;" onclick="myMenu();">Menu</button>
<div id="menu-content"></div>
<div id="menu-content">
<div class="menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>

Okay, so there are a couple of issues.
Firstly, in your HTML, there are 2 elements with the same ID (menu-content) which will cause a couple of problems, so remove one of those.
Secondly, when you set display: none in your myMenu function, it will immediately be hidden, so that's why the animation is not shown.
You have a couple of options:
Put that code within a setTimeout so that it isnt set to display: none until the animation has finished, OR
Don't use display: none
Personally, I think you're better off not using display: none, otherwise you need to amend your javascript whenever you change the duration of the animation.
I've managed to get it working without the need for display none, and using CSS transitions which works quite nicely
function myMenu() {
var x = document.getElementById("menu-content");
if (x.classList.contains("open")) {
x.classList.remove("open");
} else {
x.classList.add("open");
}
}
#menu-content {
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(-25deg, #c0a0ae, #6f448a);
z-index: 100;
top: 0;
left: 0;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
#menu-content.open {
opacity: 1;
}
.menu-content-properties {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: auto;
background: #000000;
opacity: 0.5;
}
<button id="menu-button" style="z-index: 101; position: absolute; top: 0;
left: 0;" onclick="myMenu();">Menu</button>
<div id="menu-content">
<div class="menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>

How animate a slide off the screen when pressing next slide button?

I have a video slider on a page I am working on, but I would like a nice animation to occur when changing slides rather than just changing to the next slide. For example, animate the slide off the side of the screen and the next slide in from the other side.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
<div class="video__container" style="display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row;">
<div class="arrow__container">
<div class="video__container--arrow arrow__back" onclick="plusDivs(-1)">
<img class="img__full" src="css/images/template_arrow.svg">
</div>
</div>
<div class="video__container--item">
<!-- Must include data-id, data-bg and optional video name -->
<div class="video__slide mySlides">
<div class="youtube-container template-youtube-container">
<div class="youtube-player" data-id="bqlzoxTvOkE" data-bg="css/images/pb/video1.jpg"><span class="video-name">Branding</span></div>
</div>
</div>
<div class="video__slide mySlides">
<div class="youtube-container template-youtube-container">
<div class="youtube-player" data-id="S-sJp1FfG7Q" data-bg="css/images/pb/video2.jpg"><span class="video-name">UX Design</span></div>
</div>
</div>
<div class="video__slide mySlides">
<div class="youtube-container template-youtube-container">
<div class="youtube-player" data-id="zVntJ21thpQ" data-bg="css/images/pb/video3.jpg"><span class="video-name">UI Design</span></div>
</div>
</div>
</div>
<div class="arrow__container">
<div class="video__container--arrow arrow__next" onclick="plusDivs(1)">
<img class="img__full" src="css/images/template_arrow.svg">
</div>
</div>
</div>

Ok, yeah, it's a lot, but what we are doing here is avoiding JavaScript easing animations. If you do want to use easing use the following link, because I can't explain it as well as this does.
https://www.kirupa.com/html5/introduction_to_easing_in_javascript.htm
If you still want to skip the whole learning process of easing (like me) there is a way around it.
I'll give you the short version, and if you're still confused I have a nice, long example. First, you have to make a div container to hold your slides. Basically, you are going to use JavaScript function to assign a class to that container. You'll make two for every slide except for the first and last (one to go forward, one to go back). When you're doing this, make sure to reset the animation by assigning another class to act as a null, or else... Those classes you just made will hold the animations, except in the null class. Add your animations, some styling, and html, making sure to include a button with the function from earlier. Mine is really basic, but you can really decorate it however you want.
/*This is the Javascript. What we are doing here is bypassing the complexity of
Javascript animations and instead changing the class of what we want to move.
This allows us to still use the onclick function in our html, while at
the same time using css3 animations*/
function magicbtnf() {
document.getElementById('container').className = "magicslide";
}
function magicbtnb() {
document.getElementById('container').className = "magicslide2";
}
/*This is css. Most of it is styling, but I will point out importants in
comments.*/
body,
html {
width: 100%;
margin: 0;
border: 0;
font-family: "century gothic", "Arial";
font-size: 18px;
}
#container {
/*This is the container, make it 100% x the number of slides you have.
This will allow each slide to fill 100% of the screen*/
width: 200%;
overflow: hidden;
position: fixed;
display: flex;
}
#container>div {
display: inline-block;
text-align: center;
vertical-align: top;
}
#slide1 {
/* You can insert your first slide CSS in here , just make sure the width
is 1/the amount of slides you have. % is recommended, but I'm sure there
is a way to use vw.*/
height: 400px;
width: 50%;
background-color: red;
float: right;
position: relative;
}
.magicslide {
/*This is one of two classes for the animation. We will use javascript to
set and unset the classes to the slides*/
-webkit-animation: switch 4s 1;
-o-animation: switch 4s 1;
-moz-animation: switch 4s 1;
animation: switch 4s 1;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
#-moz-keyframes switch {
0% {
margin-left: 0px;
}
25% {
margin-left: 0px;
}
50% {
margin-left: -60%;
}
100% {
margin-left: -100%;
}
}
#-o-keyframes switch {
0% {
margin-left: 0px;
}
25% {
margin-left: 0px;
}
50% {
margin-left: -60%;
}
100% {
margin-left: -100%;
}
}
#-webkit-keyframes switch {
0% {
margin-left: 0px;
}
25% {
margin-left: 0px
}
50% {
margin-left: -60%;
}
100% {
margin-left: -100%;
}
}
#keyframes switch {
0% {
margin-left: 0px;
}
25% {
margin-left: 0px
}
50% {
margin-left: -60%;
}
100% {
margin-left: -100%;
}
}
.notsomagic {
/*This is basically a void element. This resets the animation so when
you go back a slide, you can continue again.*/
height: 400px;
width: 100%;
}
#slide2 {
/*Same thing here as the earlier slide!*/
height: 400px;
width: 50%;
background-color: lightblue;
float: left;
position: relative;
}
.magicslide2 {
/*This is the same animation sequence as before, but backwards*/
-webkit-animation: switchb 4s 1;
-o-animation: switchb 4s 1;
-moz-animation: switchb 4s 1;
animation: switchb 4s 1;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
#keyframes switchb {
0% {
margin-left: -100%;
}
25% {
margin-left: -100%;
}
50% {
margin-left: -40%
}
100% {
margin-left: 0%;
}
}
#-moz-keyframes switchb {
0% {
margin-left: -100%;
}
25% {
margin-left: -100%;
}
50% {
margin-left: -40%
}
100% {
margin-left: 0%;
}
}
#-o-keyframes switchb {
0% {
margin-left: -100%;
}
25% {
margin-left: -100%;
}
50% {
margin-left: -40%
}
100% {
margin-left: 0%;
}
}
#-webkit-keyframes switchb {
0% {
margin-left: -100%;
}
25% {
margin-left: -100%;
}
50% {
margin-left: -40%
}
100% {
margin-left: 0%;
}
}
<!--This is just some boring old html. It's esentially placing everything where it needs to go. The most noticable part is the input, which states our function from the javascript onclick -->
<!DOCTYPE html>
<html>
<head>
<title>Slide</title>
<link rel="stylesheet" type="text/css" href="change_slides.css">
<script type="text/javascript" src="change_slides.js"></script>
</head>
<body>
<div id="container">
<div id="slide1">
Hello! This is my slideshow!
<br>
<input type="button" id="change" value="Click Me!" onclick="magicbtnf()">
</div>
<div id="slide2">
This is slide #2!
<br>
<input type="button" id="change2" value="Click Me Too!" onclick="magicbtnb()">
</div>
</div>
</body>
</html>
If you don't feel like making your own animations, there are free downloads. I recommend Animate.css. It come chalked full of really smooth animations, and with a couple quick edits, you can make them work really well with your slideshow. The link is: https://daneden.github.io/animate.css/
I hope this helps! :D