We Keep Coding

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

Loading Icon While Images Load

How would I program a loading icon or graphic that appears while images on a page load. An example would be http://landerapp.com/?
My goal is to prevent the user from seeing this images on screen until they are ready to animate (see the problem at http://tsawebmaster1.hhstsa.com/index.html).

Let's begin with a visible loading image that is fixed in the exact middle of the screen. Then, when the page is fully loaded, we'll add a "page_loaded" class on the <body> which:
[1] begins the fade out of the loading image
[2] begins the fade in and translation of offscreen images to the screen
window.onload = function() {
document.body.classList.add("page_loaded");
}
.loader {
opacity: 1;
transition: 2s opacity;
height: 300px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.right,
.left {
height: 100px;
position: absolute;
transition: 1s 2s;
opacity: 0;
}
.left {
left: 0;
transform: translateX(-50em);
}
.right {
right: 0;
transform: translateX(50em);
}
.page_loaded .loader {
opacity: 0;
}
.page_loaded .right,
.page_loaded .left {
opacity: 1;
transform: translateX(0);
}
<img class="loader" src="https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif" alt="" />
<img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" alt="" class="right" />
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTS704tVMgbKCry10AhT09VE8wBY5S9v-PWxTBOa7o52JU0TsjH" alt="" class="left" />

If you are using Vanilla or jQuery I'd suggest you to use imagesLoaded which is meant to achieve exactly what you want.
I'd go with something like this:
$(function(){
$('.img-container img').imagesLoaded().done(function(){
console.log('images loaded');
$('.img-container .loader').remove();
$('.img-container img.hide').removeClass('hide');
}).fail(function(){
console.log('FAILED TO LOAD IMAGES');
});
});
.img-responsive {
max-width : 100%;
}
.hide {
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<div class="img-container">
<div class="loader">
Loading image....
</div>
<img src="http://mascotafiel.com/wp-content/uploads/2015/10/perros-Husky-Siberiano_opt-compressor-1.jpg" alt="PrettyCoolImage" class="img-responsive hide">
</div>

Elements rotating around centre of DIV - only last one added to page responds to onClick event

I have six divs inside a main one. They rotate around its centre as intended.
They should all have a different image and bring up some related text when clicked.
When clicked, all elements respond to the onClick events of the rotating div with the highest Z index. If more have equal Z index, then the last one added.
From what I gathered using FireBug, each rotating div is contained inside a bigger square that rotates with it, which creates a layer that covers all the other ones.
Is there a way to work around this problem?
This is the html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/desktop.css">
<meta charset="UTF-8">
<title>Rotating images</title>
</head>
<body>
<div class="container-round">
<div class="div0" id = "0" style = "z-index : 15" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div>
<div class="div1" id = "1" style = "z-index : 15" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div>
<div class="div2" id = "2" style = "z-index : 10" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div>
<div class="div3" id = "3" style = "z-index : 10" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div>
<div class="div4" id = "4" style = "z-index : 10" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div>
<div class="div5" id = "5" style = "z-index : 10" onClick = "alert ( this.id + ' - ' + this.style.zIndex )"></div>
</div>
</body>
</html>
And this is the CSS
div {
float : left;
}
.container-round {
width: 700px;
height: 700px;
float: left;
position: relative;
overflow: hidden;
background: #000;
border-radius: 350px;
}
.div0 {
position: absolute;
width: 18%;
height: 25%;
background: url(../images/img0.jpg) no-repeat 500px center;
animation: orbit0 10s linear infinite;
}
.div1 {
position: absolute;
width: 100%;
height: 100%;
background: url(../images/img1.jpg) no-repeat 500px center;
animation: orbit1 10s linear infinite;
}
.div2 {
position: absolute;
width: 100%;
height: 100%;
background: url(../images/img2.jpg) no-repeat 500px center;
animation: orbit2 10s linear infinite;
}
.div3 {
position: absolute;
width: 100%;
height: 100%;
background: url(../images/img3.jpg) no-repeat 500px center;
animation: orbit3 10s linear infinite;
}
.div4 {
position: absolute;
width: 100%;
height: 100%;
background: url(../images/img4.jpg) no-repeat 500px center;
animation: orbit4 10s linear infinite;
}
.div5 {
position: absolute;
width: 100%;
height: 100%;
background: url(../images/img5.jpg) no-repeat 500px center;
animation: orbit5 10s linear infinite;
}
#keyframes orbit0 {
from { transform:rotate(0deg); } to { transform: rotate(360deg); }
}
#keyframes orbit1 {
from { transform:rotate(60deg); } to { transform: rotate(420deg); }
}
#keyframes orbit2 {
from { transform:rotate(120deg); } to { transform: rotate(480deg); }
}
#keyframes orbit3 {
from { transform:rotate(180deg); } to { transform: rotate(540deg); }
}
#keyframes orbit4 {
from { transform:rotate(240deg); } to { transform: rotate(600deg); }
}
#keyframes orbit5 {
from { transform:rotate(300deg); } to { transform: rotate(660deg); }
}
The working example is here:
http://68.169.58.245/darryl/
Thank you all very much

This might help -
CSS and HTML
.container{
width: 700px;
height: 700px;
border-radius: 50%;
background-color: black;
position: relative;
animation: orbit0 10s linear infinite;
}
.img{
background: white;
position: absolute;
width: 27.78%;
height: 16.67%;
}
.first {
top: 8.33%;
left: 36.11%;
background-image: url(http://68.169.58.245/darryl/images/img1.jpg);
transform: rotate(0deg);
}
.second {
top: 25%;
left: 65.27%;
transform: rotate(60deg);
background-image: url(http://68.169.58.245/darryl/images/img1.jpg);
}
.third {
bottom: 25%;
left: 65.27%;
transform: rotate(120deg);
background-image: url(http://68.169.58.245/darryl/images/img1.jpg);
}
.forth {
bottom: 8.33%;
left: 36.11%;
transform: rotate(180deg);
background-image: url(http://68.169.58.245/darryl/images/img1.jpg);
}
.fifth {
transform: rotate(240deg);
bottom: 25%;
right: 65.27%;
background-image: url(http://68.169.58.245/darryl/images/img1.jpg);
}
.sixth {
top: 25%;
transform: rotate(300deg);
right: 65.27%;
background-image: url(http://68.169.58.245/darryl/images/img1.jpg);
}
#keyframes orbit0 {
from { transform:rotate(0deg); } to { transform: rotate(360deg); }
}
<div class="container">
<div class="img first" id="1" onclick="alert(this.id+'-'+this.className)">
</div>
<div class="img second" id="2" onclick="alert(this.id+'-'+this.className)">
</div>
<div class="img third" id="3" onclick="alert(this.id+'-'+this.className)">
</div>
<div class="img forth" id="4" onclick="alert(this.id+'-'+this.className)">
</div>
<div class="img fifth" id="5" onclick="alert(this.id+'-'+this.className)">
</div>
<div class="img sixth" id="6" onclick="alert(this.id+'-'+this.className)">
</div>
</div>

From your css, each div 1 through 5 is using the same image: background: url(../images/img1.jpg). That would explain why all divs are displaying the same image.
For the on-click: The reason you're seeing the same thing is that all your divs 1-5 are taking up 100% of the width and height. You're just offsetting where the image itself is displayed. So, when you click anywhere, you're actually clicking on the top-most element. To get around that, you probably want to move away from width:100%, height:100% and instead position the image alone. That is, set the div to the image size then apply the appropriate transform to get it to the location you want.
Might be a good idea to also add a border: 1px solid red; to the divs while you're debugging just to see where your divs actually are.

HTML5 video cover background breaks with smoothState.js

I currently am integrating smoothState.js to create seamless page transitions, however it completely breaks the cover video background automatic scaling.
Can someone help me find where the two are clashing?
I am using this HTML5 video background method.
HTML:
<body id="main" class="m-scene">
<div class="scene_element scene_element--fadeinright">
<video autoplay poster="video.jpg" id="bgvid" loop >
<source src="img/video.webm" type="video/webm">
<source src="img/video.mp4" type="video/mp4">
</video>
<div id="content">
<h1>Title</h1>
</div>
</div>
CSS:
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('/img/video.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.m-scene .scene_element {
animation-duration: .25s;
transition-timing-function: ease-in;
animation-fill-mode: both;
}
.m-scene .scene_element--fadeinright {
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
transform: none;
}
}
JS:
(function($) {
'use strict';
var $body = $('html, body'),
content = $('#main').smoothState({
// Runs when a link has been activated
onStart: {
duration: 250, // Duration of our animation
render: function (url, $container) {
// toggleAnimationClass() is a public method
// for restarting css animations with a class
content.toggleAnimationClass('is-exiting');
// Scroll user to the top
$body.animate({
scrollTop: 0
});
}
}
}).data('smoothState');
//.data('smoothState') makes public methods available
})(jQuery);

I used that exact same css and it didn't work for me, either. I decided to go the 'absolute' css positioning route, and it works fine for me now.
video {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
background: url(../img/static_picture_background.jpg) no-repeat;
background-size: cover;
}
Hope that helps! (not tested in IE, yet)

Javascript 3D carousel not working properly in Internet Explorer

I'm working on a website for a client who wants a 3D carousel.
I found this which works perfectly in Chrome and FF: http://codepen.io/dudleystorey/pen/kiajB
HTML:
<div id=carousel>
<figure id=spinner>
<img src=//demosthenes.info/assets/images/wanaka-tree.jpg alt="">
<img src=//demosthenes.info/assets/images/still-lake.jpg alt="">
<img src=//demosthenes.info/assets/images/pink-milford-sound.jpg alt="">
<img src=//demosthenes.info/assets/images/paradise.jpg alt="">
<img src=//demosthenes.info/assets/images/morekai.jpg alt="">
<img src=//demosthenes.info/assets/images/milky-blue-lagoon.jpg alt="">
<img src=//demosthenes.info/assets/images/lake-tekapo.jpg alt="">
<img src=//demosthenes.info/assets/images/milford-sound.jpg alt="">
</figure>
</div>
<span style=float:left class=ss-icon onclick="galleryspin('-')"><</span>
<span style=float:right class=ss-icon onclick="galleryspin('')">></span>
CSS:
div#carousel {
perspective: 1200px;
background: #100000;
padding-top: 10%;
font-size:0;
margin-bottom: 3rem;
overflow: hidden;
}
figure#spinner {
transform-style: preserve-3d;
height: 300px;
transform-origin: 50% 50% -500px;
transition: 1s;
}
figure#spinner img {
width: 40%; max-width: 425px;
position: absolute; left: 30%;
transform-origin: 50% 50% -500px;
outline:1px solid transparent;
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg);
}
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span {
color: #fff;
margin: 5%;
display: inline-block;
text-decoration: none;
font-size: 2rem;
transition: 0.6s color;
position: relative;
margin-top: -6rem;
border-bottom: none;
line-height: 0; }
div#carousel ~ span:hover { color: #888; cursor: pointer; }
JS:
var angle = 0;
function galleryspin(sign) {
spinner = document.querySelector("#spinner");
if (!sign) { angle = angle + 45; } else { angle = angle - 45; }
spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");
}
Unfortunately it is a disaster in IE11.
I've searched the web for help but it seems that everything is managed by the latest versions of IE so I'm a bit confused.
I do not have much experience with javascript and css, for me everything seems ok.
Does someone can help?

The most likely reason your feature is failing in IE has to do with the transform-style: preserve-3d; rule applied to figure#spinner1.
IE support for CSS3 3D features has improved, but according to caniuse IE10 and 11 still do not support that particular feature of the 3D transform API. When I remove the rule from your CSS, I can see that the whole 3d layout fails when that feature is missing.
There may be another way of nesting and formatting your 3d objects that will achieve the same visual effect without 'preserve-3d', but it will likely be much more complicated than the implementation you have now.
Another option you might consider is using threejs and WebGL to handle your 3d carousel when necessary CSS 3D attributes are not available in the target browser.