I'll try to explain what I'm trying to do but I think checking out the jsfiddle link would make the point more clearly.
It's a number of phrases (HTML divs) stacked vertically on each other. When the button is clicked, the top phrase disappears while the lower phrases appear to slide up to take the place of the phrase previously above themselves.
Is there a better way to do this? It looks really ugly as it is.
EDIT: also note that the code only works once, then you have to hit 'run' again since the list of phrases is not infinite like in my actual application
https://jsfiddle.net/deddnbrh/1/
HTML:
<br>
<br>
<br>
<div id="phrase1" style="font-size:50px;color:black">Phrase 1</div>
<div id="phrase2" style="font-size:25px;color:gray">Phrase 2</div>
<div id="phrase3" style="font-size:25px;color:gray">Phrase 3</div>
<div id="phrase4" style="font-size:25px;color:gray;opacity:0">Phrase 4</div>
<br>
<br>
<br>
<button id="button" onclick="myFunc2()" onmousedown="myFunc()">CLICK ME</button>
javascript:
document.getElementById('phrase2').addEventListener("webkitAnimationEnd", switchPhraseText);
function switchPhraseText() {
document.getElementById('phrase1').innerHTML = "Phrase 2";
document.getElementById('phrase2').innerHTML = "Phrase 3";
document.getElementById('phrase3').innerHTML = "Phrase 4";
document.getElementById('phrase4').innerHTML = "Phrase 5";
}
function myFunc2() {
document.getElementById('phrase1').style.webkitAnimationName = 'phrase1Anim';
document.getElementById('phrase2').style.webkitAnimationName = 'phrase2Anim';
document.getElementById('phrase3').style.webkitAnimationName = 'phrase3Anim';
document.getElementById('phrase4').style.webkitAnimationName = 'phrase4Anim';
}
function myFunc() {
document.getElementById('phrase1').style.webkitAnimationName = "";
document.getElementById('phrase2').style.webkitAnimationName = "";
document.getElementById('phrase3').style.webkitAnimationName = "";
document.getElementById('phrase4').style.webkitAnimationName = "";
}
css:
#phrase1 {
position: relative;
-webkit-animation-duration: .8s;
}
#phrase2 {
position: relative;
-webkit-animation-duration: 1s;
}
#phrase3 {
position: relative;
-webkit-animation-duration: 1s;
}
#phrase4 {
position: relative;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes phrase1Anim {
0% {left:0px;}
100% {left:250px; opacity:0}
}
#-webkit-keyframes phrase2Anim {
0% {font-size:25px; top:0px;}
100% {color:black; font-size:50px; top:-50px;}
}
#-webkit-keyframes phrase3Anim {
0% {top:0px;}
100% {top:-50px;}
}
#-webkit-keyframes phrase4Anim {
0% {top:0px;}
100% {top:-50px; opacity:1;}
}
This will support an indefinite amount of elements inside of the list. Of course, it's not perfect, and you have to tweak it to your needs, but hopefully it'll get you started. The code is pretty self explanatory, I think.
This will only work with Chrome, in its current state, but for it to work in other browsers, all you need to do is add the relevant vendor-prefixes to the CSS rules and to the animation events. For multi-browser support, just add the relevant CSS fallbacks and listener fixes.
It animates (right/fade-out) the element with class active
It clones said element and pushes it to the bottom, fading it in.
It removes the clone and appends the original one (as the clone was just for aesthetics)
It animates (up, font-size, color) the element next to active.
jsFiddle for Chrome
jsFiddle for Firefox (apparently, FF is awesome and doesn't need vendor prefixes).
Finally, this is the Chrome version in snippet form:
var phrases = document.getElementById('phrases'),
next = document.getElementById('next'),
ongoing = false;
function animList() {
var active = document.getElementsByClassName('active')[0],
next = active.nextElementSibling,
clone;
if(ongoing) return;
ongoing = true;
function animationStart() {
clone = this.cloneNode(true);
clone.id = '_tmp';
clone.className = '';
clone.style.transition = 'opacity 1s';
clone.style.opacity = '0';
setTimeout(function () { clone.style.opacity = '1' }, 50);
phrases.appendChild(clone);
this.removeEventListener('webkitAnimationStart', animationStart);
}
function animationEnd() {
clone.parentNode.removeChild(clone);
phrases.appendChild(active);
this.classList.remove('active', 'animActive', 'slideUp');
this.removeEventListener('webkitAnimationEnd', animationEnd);
this.removeEventListener('webkitAnimationStart', animationStart);
next.classList.remove('slideUp');
next.classList.add('active');
ongoing = false;
}
active.classList.add('animActive');
next.classList.add('slideUp');
active.addEventListener('webkitAnimationStart', animationStart);
active.addEventListener('webkitAnimationEnd', animationEnd);
}
next.onclick = animList;
#next {
position: relative;
display: inline-block;
top: 2.5em;
background: transparent;
border: 0;
font-size: 2em;
}
#phrases {
display: inline-block;
vertical-align: top;
max-height: 11em;
}
#phrases div {
font-size: 2em;
color: gray;
position: relative;
}
#phrases div.active {
font-size: 3em;
color: black;
}
.animActive {
-webkit-animation: animActive 1s ease-in-out;
}
.slideUp {
-webkit-animation: slideUp 1s;
}
#phrases div.slideUp ~ div:nth-child(n+3) {
-webkit-animation: slideUpRest 1s;
}
#-webkit-keyframes animActive {
0% {
left: 0;
}
100% {
left: 4em;
opacity: 0
}
}
#-webkit-keyframes slideUp {
0% {
top: 0;
}
100% {
top: -1.15em;
font-size: 3em;
color: black;
}
}
#-webkit-keyframes slideUpRest {
0% {
top: 0;
}
100% {
top: -1.7em;
}
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="phrases">
<div id="phrase1" class="active">Phrase 1</div>
<div id="phrase2">Phrase 2</div>
<div id="phrase3">Phrase 3</div>
<div id="phrase4">Phrase 4</div>
<div id="phrase5">Phrase 5</div>
</div>
<button id="next">
<i class="fa fa-angle-right"></i>
</button>
Related
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>
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
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>
I built a card game where upon clicking a button the display will either be "Correct!" or "Wrong!" I would like the display to flash and then go away after a couple second but not rearrange the content below it, which in this case is the #winStreak and #longestStreak. I do not want to use jQuery. I have tried adding transitions to CSS, but that does not seem to work.
HTML:
<p id="displayResult"></p>
<p id="winStreak"></p>
<p id="longestStreak"></p>
CSS:
#displayResult {
margin-bottom: 1rem;
transition: 2s ease-in-out;
}
JavaScript:
let foldButton = document.getElementById("foldBTN")
foldButton.addEventListener("click", function(){
if (!table[position].includes(completeHand) && !table[position].includes(completeHand2)) {
document.getElementById("displayResult").innerHTML = "Correct!";
I believe you might use CSS animation:
var result = document.getElementById('displayResult');
result.addEventListener('animationend', function() {
result.classList.remove('flashit');
});
let foldButton = document.getElementById('foldBTN');
foldButton.addEventListener('click', function() {
result.innerHTML = 'Correct!';
result.classList.add('flashit');
});
#displayResult {
font-size:3rem;
height: 1.3em;
margin-bottom: 1rem;
opacity: 0;
}
#displayResult.flashit {
animation: flashit 3s;
}
#keyframes flashit {
5% {opacity:.5}
10% {opacity:1}
15% {opacity:.2}
20% {opacity:1}
40% {opacity:1}
100% {opacity:0}
}
<div id="displayResult"></div>
<button id="foldBTN">CLICK ME</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