HTML modal popup animation not working second time

HTML modal popup animation not working second time - javascript

I have created the following code to display a popup, and it works fine with the animation I added afterwards to have a pop-out effect. However, if I close it and attempt to reopen it, the animation does not show? the modal just instantly appears.
How do I fix it?
<div id="overlay">
<div class="popout">
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>
<style>
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
.popout {
animation: popout 1s ease;
-webkit-animation: popout 1s ease;
}
#keyframes popout {
from{transform:scale(0)}
80%{transform:scale(1.2)}
to{transform:scale(1)}
}
#-webkit-keyframes popout {
from{-webkit-transform:scale(0)}
80%{-webkit-transform:scale(1.2)}
to{-webkit-transform:scale(1)}
}
</style>
<script>
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>

Look at this please
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>
<style>
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
text-align: center;
z-index: 1000;
}
#overlay div {
width: 300px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #000;
padding: 15px;
text-align: center;
}
.popout {
visibility: visible !important;
animation: popout 1s ease;
-webkit-animation: popout 1s ease;
-moz-animation: popout 1s ease;
-ms-animation: popout 1s ease;
}
#keyframes popout {
from {
transform: scale(0)
}
80% {
transform: scale(1.2)
}
to {
transform: scale(1)
}
}
#-webkit-keyframes popout {
from {
-webkit-transform: scale(0)
}
80% {
-webkit-transform: scale(1.2)
}
to {
-webkit-transform: scale(1)
}
}
#-moz-keyframes popout {
from {
-moz-transform: scale(0)
}
80% {
-moz-transform: scale(1.2)
}
to {
-moz-transform: scale(1)
}
}
#-ms-keyframes popout {
from {
-ms-transform: scale(0)
}
80% {
-ms-transform: scale(1.2)
}
to {
-ms-transform: scale(1)
}
}
</style>
<script>
function overlay() {
el = document.getElementById("overlay");
var clases = el.className;
if (clases.indexOf('popout') == -1) {
el.className = 'popout';
} else {
el.className = '';
}
}
</script>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
https://jsfiddle.net/xapdhxv3/1/

Related

Responsive navbar menu (hamburger menu) doesn't open by clicking

Got a navbar but the problem is when I open (click) it on mobile phone or in responsive environment (when the hamburger menu shows up), it does not open by clicking on it, the links are not showing. Below is the code that I'm using for it. Used the necessary links but not working. Everything is fine, the only problem that is occurring is with that hamburger menu.
$('.navTrigger').click(function() {
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('.nav').addClass('affix');
console.log("OK");
} else {
$('.nav').removeClass('affix');
}
});
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
text-align: center;
z-index: 1;
}
.nav div.logo {
float: left;
width: auto;
height: auto;
padding-left: 0.9rem;
}
.nav div.logo a {
text-decoration: none;
color: #fff;
}
.nav div.logo a:hover {
color: #00E676;
}
.nav div.main_list {
height: 65px;
float: right;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav div.main_list ul li {
width: auto;
height: 65px;
padding: 2px;
padding-right: 0.9rem;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
font-size: 80%;
font-weight: bold;
}
.nav div.main_list ul li a:hover {
color: #00b3ee;
}
/* Home section */
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
}
.navTrigger {
display: none;
}
.nav {
padding-top: 20px;
padding-bottom: 20px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 1;
}
/* Media query section */
#media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
margin: 0;
}
}
#media screen and (max-width:768px) {
.navTrigger {
display: block;
}
.nav div.logo {
margin-left: 15px;
}
.nav div.main_list {
width: 100%;
height: 0;
overflow: hidden;
}
.nav div.show_list {
height: auto;
display: none;
}
.nav div.main_list ul {
flex-direction: column;
width: 100%;
height: 100vh;
right: 0;
left: 0;
bottom: 0;
background-color: #111;
/*same background color of navbar*/
background-position: center top;
}
.nav div.main_list ul li {
width: 100%;
text-align: right;
}
.nav div.main_list ul li a {
text-align: center;
width: 100%;
font-size: 3rem;
padding: 20px;
}
.nav div.media_button {
display: block;
}
}
.navTrigger {
cursor: pointer;
width: 30px;
height: 25px;
margin: auto;
position: absolute;
right: 30px;
top: 0;
bottom: 0;
}
.navTrigger i {
background-color: #fff;
border-radius: 2px;
content: '';
display: block;
width: 100%;
height: 4px;
}
.navTrigger i:nth-child(1) {
-webkit-animation: outT 0.8s backwards;
animation: outT 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(2) {
margin: 5px 0;
-webkit-animation: outM 0.8s backwards;
animation: outM 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(3) {
-webkit-animation: outBtm 0.8s backwards;
animation: outBtm 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
-webkit-animation: inT 0.8s forwards;
animation: inT 0.8s forwards;
}
.navTrigger.active i:nth-child(2) {
-webkit-animation: inM 0.8s forwards;
animation: inM 0.8s forwards;
}
.navTrigger.active i:nth-child(3) {
-webkit-animation: inBtm 0.8s forwards;
animation: inBtm 0.8s forwards;
}
#-webkit-keyframes inM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes inM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes outM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes outM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes inT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes inT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes outT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes outT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes inBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes inBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
#-webkit-keyframes outBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes outBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
.affix {
padding: 0;
background-color: #111;
}
.myH2 {
text-align: center;
font-size: 4rem;
}
.myP {
text-align: justify;
padding-left: 15%;
padding-right: 15%;
font-size: 20px;
}
#media all and (max-width:700px) {
.myP {
padding: 2%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="img" class="ha">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="chk2.png" class="hello">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS AT HEGTAVIC</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>

I have tried your code and modified in fallowing way. It is working fine.
$(document).ready(function(){
$('.navTrigger').on('click',function (){
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
});

Move element out of screen and then back with CSS animation

In the following example the goal is to control the element position with smooth slideIn/Out animation. The problem is when the new class is added it overwrites the first one and the second part of animation begins with the reset of element position to 0 and then slidesIn again.
The following snippet will show better what I've tried to explain.
$('.trigger').click(function() {
if (!$('.target').hasClass('hide')) {
$('.target').addClass('hide')
} else {
$('.target').addClass('show')
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
animation-delay: .2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>

If you remove the animation-delay attribute you have in the .show css that should prevent the visible 0.2s reset, as below
$('.trigger').click(function() {
var target = $('.target');
if (!target.hasClass('hide')) {
target.removeClass('show');
target.addClass('hide');
} else {
target.removeClass('hide');
target.addClass('show');
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0vw);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>

$('.trigger').click(function() {
if (!$('.target').hasClass('hide')) {
$('.target').addClass('hide')
} else {
$('.target').css({"transform":"translate(120vw)"});
$('.target').addClass('show')
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
animation-delay: .2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>

Div remains on the screen after animation

I'm building an app for Android in HTML. I made the NavigationDrawer in HTML, and with javascript I make it to show on button click, and dissapear on <p> click. I'm using keyframes for the animations. When I press the button, the animation works (I am using -webkit-transform: translateX), and when I click the button again, the animation works but the div doesn't hide. It remains on the screen, but I can click through it (like pointer-events: none;). What's the problem?
CSS:
#-webkit-keyframes sMenuClose {
from {
-webkit-transform: translateX(0%);
}
to {
-webkit-transform: translateX(-100%);
}
}
#-webkit-keyframes sMenuOpen {
from {
-webkit-transform: translateX(-100%);
}
to {
-webkit-transform: translateX(0%);
}
}
.slidemenu {
background: transparent;
height: 100%;
left: 0px;
pointer-events: none;
position: fixed;
top: 0px;
width: 100%;
z-index: 9991;
}
.slidemenu .menu {
background: #FFF;
border-right: 1px solid #000;
color: #333;
height: 100%;
overflow: visible;
pointer-events: visible;
position: absolute;
top: 0px;
-webkit-transform: translateX(-100%);
width: 80%;
}
.slidemenu .menu.hidden {
-webkit-animation-name: sMenuClose;
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: running;
}
.slidemenu .menu.visible {
-webkit-animation-name: sMenuOpen;
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: running;
}
HTML:
<html>
<head>
...
</head>
<body>
...
<div class="slidemenu">
<div class="menu">
<p>Some text</p>
</div>
</div>
</body>
</html>
JS:
window.onload = function() {
document.querySelector("body div#actionbar div.action ul li.menu a").addEventListener("click", function(e) {
e.preventDefault();
if(document.querySelector("body div.slidemenu div.menu").classList.contains("hidden"))
{
document.querySelector("body div.slidemenu div.menu").classList.remove("hidden");
}
document.querySelector("body div.slidemenu div.menu").classList.add("visible");
});
document.querySelector("p").addEventListener("click", function(e) {
e.preventDefault();
document.querySelector("body div.slidemenu div.menu").classList.remove("visible");
document.querySelector("body div.slidemenu div.menu").classList.add("hidden");
});
};
Can you help me?

I think you can get the effect you are after with a slightly simpler setup. This example is modified slightly to show a demo here but I think you should be able to convert this button back into your li menu item with ease. I made the slideout a light blue just so it is easier to see here as well.
function slideMenu_Toggle(){
var _selector = "body div.slidemenu div.menu";
document.querySelector(_selector).classList.toggle("visible");
}
window.onload = function() {
var _selector = ".slidemenu .menu";
document.querySelector(_selector).addEventListener("click", function(){
if( this.classList.contains("visible") ) { slideMenu_Toggle(); }
});
document.querySelector("#toggle").addEventListener("click", slideMenu_Toggle);
};
.slidemenu {
background: transparent;
height: 100%;
left: 0px;
pointer-events: none;
position: fixed;
top: 0px;
width: 100%;
z-index: 9991;
}
.slidemenu .menu {
border-right: 1px solid #000;
color: #333;
height: 100%;
overflow: visible;
position: absolute;
top: 0px;
width: 80%;
pointer-events: visible;
background: aliceblue;
-webkit-transition: transform .5s ease;
-webkit-transform: translateX(-100%);
}
.slidemenu .menu.visible {
-webkit-transform: translateX(0%);
}
<div style="text-align: right; margin-top: 3em;">
<button id="toggle" style="font-size: 2em;">toggle</button>
</div>
<div class="slidemenu">
<div class="menu">
<p>Some text</p>
</div>
</div>

Here is a workaround
<script language="JavaScript">
var TheDivParentContents
self.window.onload=getDivContents
function getDivContents(){
TheDivParentContents=document.getElementById("TheDivParent").innerHTML;
}
function OnClickHideDiv(){
document.getElementById("TheDivParent").innerHTML="";
}
function OnClickShowDiv(){
document.getElementById("TheDivParent").innerHTML=TheDivParentContents;
}
</script>
<body bgcolor="white">
<input script=JavaScript type=button onclick="OnClickShowDiv()" value="Show Div">
<input script=JavaScript type=button onclick="OnClickHideDiv()" value="Hide Div">
<span id=TheDivParent>
<div>
some text
</div>
</span>
</body>
Note that i place the div that i want to hide inside a Span tag. and that span tag will be used by the functions in the script to save the innerhtml of the div to a global variable.. Hope this works for you.

How to hide div under another during CSS3 animation

The CSS code :
.mainDiv{
width: 600px;
height: 600px;
background-color: blue;
}
.innerDiv{
width: 400px;
margin: auto;
height: 400px;
background-color: green;
}
.innerDiv div{
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
}
.removing{
-webkit-animation: slideout 1s;
animation: slideout 1s;
}
#-webkit-keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
#keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
Here is a jsFiddle of the problem.
What i would like it to do is this :
When the first red block moves outside of the green block, i would like it to be behind the blue block instead of in front of it.

add the line: overflow:hidden; to your .innerDiv css rule

Use z-index.
Example:
#somethingBehind {
z-index: 1;
}
#somethingAtTheFront {
z-index: 2;
}

How to use javascript/css to navigate through a pure css carousel/slideshow?

I've created a simple slideshow using just CSS3 animation and keyframes and I'm trying to figure out how I could create navigation arrows that allow you to flick through the slides.
I would want a next and previous button/arrow that slides to each video in the slide on click. I've been trying to do it with CSS but not having much luck, I wondered if anyone might have a solution I might have overlooked.
Any suggestions would be appreciated.
Heres a simple slider to demonstrate what I have...
http://jsfiddle.net/D5Qcw/5/
HTML
<div class="wrapper">
<div class="header">
<h1>Logo Name</h1>
<p class="menu">Menu Button</p>
</div>
<div id="carousel">
<ul class="video-list">
<li>
<div class="content-wrapper">
<div class="progress-bar"></div>
<h2>Content box</h2>
<div class="crossRotate">open button</div>
<p>Content box paragraph text <br/><br/>Play button
</p>
</div>
<div class="video-wrapper">
<iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>
</div>
</li>
<li>
<div class="content-wrapper">
<div class="progress-bar"></div>
<h2>Content box 2</h2>
<div class="crossRotate">open button</div>
<p>Content box paragraph text <br/><br/>Play button
</p>
</div>
<div class="video-wrapper">
<iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>
</div>
</li>
<li>
<div class="content-wrapper">
<div class="progress-bar"></div>
<h2>Content box 3</h2>
<div class="crossRotate">open button</div>
<p>Content box paragraph text <br/><br/>Play button
</p>
</div>
<div class="video-wrapper">
<iframe width="25%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>
</div>
</li>
<li>
<div class="content-wrapper">
<div class="progress-bar"></div>
<h2>Content box 4</h2>
<div class="crossRotate">open button</div>
<p>Content box paragraph text <br/><br/>Play button
</p>
</div>
<div class="video-wrapper">
<iframe width="100%" height="100%" src="//www.youtube.com/embed/BQeMxWjpr-Y" frameborder="0" allowfullscreen></iframe>
</div>
</li>
</ul>
</div> <!-- /carousel -->
</div>
CSS
.wrapper {
position: absolute;
width: 100%;
height: 400px;
overflow: hidden;
margin: 0;
padding:0;
z-index: 1;
}
.header {
position: absolute;
height: 20em;
z-index: 2;
width: 100%;
display: block;
padding-top: 2em;
}
h1 {
font-size: 20px;
color: blue;
z-index: 999;
float: left;
}
h2 {
position: absolute;
float: left;
}
p.menu {
position: absolute;
color: blue;
z-index: 999;
float: left;
right: 20px;
}
p {
position: absolute;
padding-top: 3em;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#carousel {
width: 100%;
}
#carousel .video-list {
position: relative;
width: 400%;
height: 100%;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
animation: slider 40s ease-in-out infinite;
-webkit-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
-moz-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
-o-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
-ms-animation: slider 40s cubic-bezier(.93,.11,.32,.94) infinite;
}
#keyframes slider {
0% { transform: translateX(0%); }
23% { transform: translateX(0%); }
26% { transform: translateX(-25%); }
51% { transform: translateX(-25%); }
54% { transform: translateX(-50%); }
79% { transform: translateX(-50%); }
82% { transform: translateX(-75%); }
97% { transform: translateX(-75%); }
100% { transform: translateX(0%); }
}
#-webkit-keyframes slider {
0% { -webkit-transform: translateX(0%); }
23% { -webkit-transform: translateX(0%); }
26% { -webkit-transform: translateX(-25%); }
51% { -webkit-transform: translateX(-25%); }
54% { -webkit-transform: translateX(-50%); }
79% { -webkit-transform: translateX(-50%); }
82% { -webkit-transform: translateX(-75%); }
97% { -webkit-transform: translateX(-75%); }
100% { -webkit-transform: translateX(0%); }
}
#-moz-keyframes slider {
0% { -moz-transform: translateX(0%); }
23% { -moz-transform: translateX(0%); }
26% { -moz-transform: translateX(-25%); }
51% { -moz-transform: translateX(-25%); }
54% { -moz-transform: translateX(-50%); }
79% { -moz-transform: translateX(-50%); }
82% { -moz-transform: translateX(-75%); }
97% { -moz-transform: translateX(-75%); }
100% { -moz-transform: translateX(0%); }
}
#carousel .video-list li {
position: relative;
width: 25%;
height: 100%;
overflow: hidden;
display: inline-block;
float: left;
}
#carousel .video-list .content-wrapper {
position: absolute;
width: 100%;
height: 50%;
bottom: -130px;
z-index: 999;
background: rgba(255, 255, 255, 0.9);
-webkit-transition: bottom 1s;
-moz-transition: bottom 1s;
-o-transition: bottom 1s;
-ms-transition: bottom 1s;
transition: bottom 1s;
}
.progress-bar {
background: #000;
height: 5px;
width: 40px;
position: relative;
animation: mymove 10s infinite;
-webkit-animation: mymove 10s infinite;
-moz-animation: mymove 10s infinite;
-o-animation: mymove 10s infinite;
-ms-animation: mymove 10s infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
}
#keyframes mymove {
from {left:0;}
to {right:-97%;}
}
#-webkit-keyframes mymove {
from {left:0;}
to {right:-97%;}
}
#carousel .video-wrapper {
position: relative;
top: 0%;
left: 0%;
width: 200%;
height: 200%;
z-index: 2;
}
#carousel .video-wrapper iframe {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 50%;
min-height: 50%;
margin: auto;
z-index: 2;
}
.crossRotate {
position: absolute;
font-size: 20px;
right: 0;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -o-transform;
transition-property: transform;
z-index: 999;
}
.crossRotate:hover {
    cursor: pointer;
}

I would use Javascript for the userinteraction
here is an easy tutorial.
Hope this helps
Here is a JSFiddle that should give you the idea :)
$(function () {
var position = 0;
$('#next').on('click', function (e) {
e.preventDefault();
position = (position + 25) % 100;
$('#carousel .video-list').css('-webkit-transform', 'translateX(-' + position + '%)');
});
});
http://jsfiddle.net/D5Qcw/6/

Develop Reference

JavaScript is the programming language of the Web.

HTML modal popup animation not working second time - javascript

Related

Responsive navbar menu (hamburger menu) doesn't open by clicking

Move element out of screen and then back with CSS animation

Div remains on the screen after animation

How to hide div under another during CSS3 animation

How to use javascript/css to navigate through a pure css carousel/slideshow?

Categories

Resources