I'm facing a challenge in getting all three of my images to fly off the screen in different 45-degree directions. Currently, they are all flying off the screen to the left, but I would prefer them to go in 45-degree angles. I've shared the CSS, HTML, and JavaScript code that I have so far. I believe the solution might be a simple adjustment in the JavaScript code, but I'm not very proficient in writing JavaScript to figure it out on my own. Any help would be greatly appreciated. Thank you in advance...
HTML:
<button onclick="slideIn('img6','img5','img2');">slide in</button>
<button onclick="slideOut('img5','img6','img2');">slide out</button>
CSS:
#img2{
position:absolute;
top:50%;
left:50%;
width:300px;
height:119px;
margin-top:250px;
margin-left:-200px;
}
#img5{
position:absolute;
top:50%;
left:50%;
height:170px;
width:333px;
margin-top:130px;
margin-left:72px;
}
#img6{
position:absolute;
top:50%;
left:50%;
height:184px;
width:414px;
margin-top:290px;
margin-left:100px;
}
Javascript:
<script>
function slideIn(skate,blanket,clothes){
var elem = document.getElementById(skate);
var elem1 = document.getElementById(blanket);
var elem2 = document.getElementById(clothes);
elem.style.transition = "left 0.5s ease-in 0s";
elem.style.position="absolute";
elem.style.top = "50%";
elem.style.left = "50%";
elem.style.marginLeft = "100px";
elem.style.marginTop = "290px";
elem1.style.transition = "left 0.5s ease-in 0s";
elem1.style.position="absolute";
elem1.style.top = "50%";
elem1.style.left = "50%";
elem1.style.marginLeft = "72px";
elem1.style.marginTop = "130px";
elem2.style.transition = "left 0.5s ease-in 0s";
elem2.style.position="absolute";
elem2.style.top = "50%";
elem2.style.left = "50%";
elem2.style.marginLeft = "-200px";
elem2.style.marginTop = "250px";
}
function slideOut(skate,blanket,clothes){
var elem = document.getElementById(skate);
var elem1 = document.getElementById(blanket);
var elem2 = document.getElementById(clothes);
elem.style.transition = "left 0.5s ease-out 0s";
elem.style.left = "-600px";
elem1.style.transition = "left 0.5s ease-out 0s";
elem1.style.left = "-1200px";
elem2.style.transition = "left 0.5s ease-out 0s";
elem2.style.left = "-1200px";
}
</script>