I have an animation in CSS that spins an image around its centre. I want to be able to change animation-timing-function and -webkit-animation-timing-function etc. programmatically in JavaScript. Here is the code and what I have tried:
<div id="content"> <div id="container">
<div id="outerQ"></div> <div id="innerQ">
</div>
</div>
<div id="logo"></div>
<span id="sp"></span>
<input type="button" id="linear" value="Linear"/>
<input type="button" id="ease" value="Ease in and out"/>
</div>
SCRIPT :
<head>
<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script>
$(document).ready(function ()
{
$("#linear").click(function ()
{
$("#innerQ").css("-webkit-animation-timing-function", "linear");
});
$("#ease").click(function ()
{
$("#innerQ").css("-webkit-animation-timing-function", "ease-in-out");
});
});
</script>
CSS:
<style>
body
{
background: #018a9a;
margin: 20px;
}
#content
{
width: 566px;
height: 120px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -80px;
margin-left: -278px;
}
#outerQ
{
width: 96px;
height: 120px;
background-image: url('outerQ.png');
}
#innerQ
{
width: 96px;
height: 120px;
background-image: url('innerQ.png');
position: absolute;
left: 0;
top: 0;
}
#container
{
width: 96px;
height: 120px;
float: left;
}
#logo
{
width: 470px;
height: 120px;
background-image: url('LogoLarge.png');
float: left;
}
#sp
{
clear: both;
}
#keyframes spin
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin
{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spin
{
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#innerQ
{
/*IE 10*/
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 1.3s;
animation-play-state: running;
transform-origin: 48px 50.5px;
/*Chrome*/
-webkit-animation-name: spin;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1.3s;
-webkit-animation-play-state: running;
-webkit-transform-origin: 48px 50px;
/*Firefox*/
-moz-animation-name: spin;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 1.3s;
-moz-animation-play-state: running;
-moz-transform-origin: 48px 50px;
}
</style>
</head>
<body>
HTML:
<input type="button" id="linear" value="Linear"/>
<input type="button" id="ease" value="Ease in and out"/>
</div>
</body>
I am using webkit here because I use Chrome, clicking the buttons do nothing. I also want to change 'animation-iteration-count' and 'animation-duration' but these don't work. The only one that does work is '-webkit-animation-play-state'. I have also tried:
$("#innerQ").style.WebkitAnimationTimingFunction = "ease-in-out";
That doesn't work too. Is there a way of changing these properties after the page has loaded? Thanks
function function_name() {
document.getElementById('innerQ"').className = "innerQ";
}
CSS
.innerQ
{
//you css code(put all timing stuff here!!!)
}
//Step 1--->Put you desired css animation in a css class
//Step 2--->add that css class with javascript(className)
//Step 3---->Call function animation on click of the button
Related
spining icon not spinning in the iOS version > 15.3 or 16.1 but it is working fine in the lower < 15 iOS version iphone and ipad and Android, browser.
Please find the below css code for reference. i have tried with webkit for safari and also tried with transform: rotate(-360deg). but spinner is not spinning/rotating in the iOS device alone. please help me for fixing this issue.
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
/* spinner Wrapper */
.Wrapperspinner{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
line-height: 30px;
margin-left: 0;
margin-top: 0;
text-align: center;
color: #fff;
padding-top: 7px;
background-color: rgba(250, 250, 250, 0.8);
opacity: 0.8;
display: none;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 110px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%)
}
/* Spinning circle (inner circle) */
.loading .maskedCircle {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #ff6969;
}
/* Spinning circle mask */
.loading .mask {
width: 25px;
height: 25px;
overflow: hidden;
margin: -3px;
}
/*waiting text*/
.loading .spinnerWaitingText {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
/* Spinner */
.loading .spinner {
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
border-radius: 50%;
border: 3px solid #12779a;
}
div.tc-screenMask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000;
opacity: 0.3;
display: none;
}
.SpinnerStep1,
.SpinnerStep2,
.SpinnerStep3{
opacity: 0;
text-align: center;
position: absolute;
width: 100%;
}
.SpinnerContainer{
position: fixed;
top: calc(50% + 90px);
width: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
min-width: 300px;
visibility: hidden;
}
.SpinnerStep1 {
animation-name: fadeInOut1;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep2 {
animation-name: fadeInOut2;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut2;
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep3 {
animation-name: fadeInOut3;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation-name: fadeInOut3;
-webkit-animation-duration: 9s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeInOut1 {
0% { opacity: 0 }
1% { opacity: 1 }
95% {opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut2 {
0% { opacity: 0 }
50% { opacity: 0 }
51% { opacity : 1}
95% { opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut3 {
0% { opacity: 0 }
66% { opacity: 0 }
67% { opacity: 1 }
100% { opacity: 1 }
}
#-webkit-keyframes fadeInOut1 {
0% { -webkit-opacity: 0 }
1% { -webkit-opacity: 1 }
95% {-webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut2 {
0% { -webkit-opacity: 0 }
50% { -webkit-opacity: 0 }
51% { -webkit-opacity : 1}
95% { -webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut3 {
0% { -webkit-opacity: 0 }
66% { -webkit-opacity: 0 }
67% { -webkit-opacity: 1 }
100% { -webkit-opacity: 1 }
}
.angSpinner.Wrapperspinner {
background-color: #fff;
opacity: 0.9;
display: block;
visibility: hidden;
}
.angSpinner .loading {
width: 148px;
height: 148px;
}
.angSpinner .loading .spinner {
border: none;
width: 148px;
height: 148px;
animation-name: spin;
animation-duration: .8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.angSpinner .loading .maskedCircle {
border: 4px solid #005900;
width: 140px;
height: 140px;
margin: 0;
box-sizing: content-box;
-webkit-box-sizing: content-box;
}
.angSpinner .loading .mask {
width: 148px;
height: 35px;
margin: 0;
}
<div id="Wrapper" class="Wrapperspinner"
aria-label="Loading page now">
<div class="loading">
<!-- We make this div spin -->
<div class="spinner">
<!-- Mask of the quarter of circle -->
<div class="mask">
<!-- Inner masked circle -->
<div class="maskedCircle"></div>
</div>
</div>
<div class="loginSpinnerContainer" aria-hidden="true" tabindex="-1">
<div class="boi_label SpinnerStep1">
Contacting to server...
</div>
<div class="boi_label SpinnerStep2">
Authenticating your application...
</div>
<div class="boi_label SpinnerStep3">
Running security checks...
</div>
</div>
<div class="boi_label spinnerWaitingText" aria-hidden="true" tabindex="-1">please wait</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
SLoader.setup({
id: 'WRAPPER',
showMask: 'WRAPPER.CREATE_MASK',
delay: '5'
});
$(document).ready(function() {
SLoader.triggerHide();
$('.main-form').attr('aria-hidden', 'false');
});
Hi.addHook('beforeSubmit', showSpinnerOnSubmit);
Hi.addHook('beforeAjaxButtonActionService', showSpinnerForAjaxButton);
Hi.addHook('postProcessResponse', SLoader.triggerHide);
function showSpinnerOnSubmit(){
$('#WRAPPER$').attr({'role': 'alert', 'aria-live': 'assertive'});
$('.main-form').attr('aria-hidden', 'true');
SLoader.triggerShow();
}
function showLoginSpinner(){
$('.loginSpinnerContainer').css('visibility', 'visible');
$('.spinnerWaitingText').hide();
$('#WRAPPER$').addClass('customSpinner');
}
function showSpinnerForAjaxButton() {
if(document.activeElement.classList.contains('showSpinner_ajaxbutton')) {
SLoader.triggerShowAjax();
}
}
//]]>
</script>
I'm trying to move these divs up and down based on clicks:
Initial click moves them up
Next Click moves them down (then repeat on next clicks)
Moving them up works well, but when i click to move them down, they flash invisible first and then move down. What am I doing wrong?
JSFiddle: https://jsfiddle.net/9q0scpa0/
HTML:
<div class="page" id="page1" onclick="restart()">
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
</div>
<div class="page" id="page2" onclick="restart()">
Page 2
</div>
CSS:
*
{
margin: 0em;
padding: 0em;
}
html
{
height: 100%;
width: 100%;
}
body
{
height: 100%;
width: 100%;
overflow: hidden;
}
.page
{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
background-color: red;
}
#keyframes moveNext
{
0% {
transform: translate(0em,100%);
-webkit-transform: translate(0em,0%);
-moz-transform: translate(0em,0%);
}
100% {
transform: translate(0em,-100%);
-webkit-transform: translate(0em,-100%);
-moz-transform: translate(0em,-100%);
}
}
#keyframes movePrevious
{
0% {
transform: translate(0em,-100%);
-webkit-transform: translate(0em,-100%);
-moz-transform: translate(0em,-100%);
display: block;
}
100% {
transform: translate(0em,0%);
-webkit-transform: translate(0em,0%);
-moz-transform: translate(0em,0%);
}
}
#page1.leave
{
z-index: 0;
animation-name: moveNext;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
animation-duration: 800ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#page2.enter
{
background-color: blue;
z-index: 1;
animation-name: moveNext;
animation-duration: 750ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#page1.enter
{
z-index: 0;
animation-name: movePrevious;
animation-duration: 800ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#page2.leave
{
background-color: blue;
z-index: 1;
animation-name: movePrevious;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
animation-duration: 750ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
JavaScript:
var isMoveNext = true;
var page1 = document.getElementById( "page1" );
var page2 = document.getElementById( "page2" );
window.restart = function()
{
//Moving next
if ( isMoveNext )
{
page1.className = "page leave";
page2.className = "page enter";
isMoveNext = false;
}
else
{
page1.className = "page enter";
page2.className = "page leave";
isMoveNext = true;
}
}
Add one more transition translate(0em,-100%) in #page2.leave to remove the blink
var isMoveNext = true;
var page1 = document.getElementById( "page1" );
var page2 = document.getElementById( "page2" );
window.restart = function()
{
//Moving next
if ( isMoveNext )
{
page1.className = "page leave";
page2.className = "page enter";
isMoveNext = false;
}
else
{
page1.className = "page enter";
page2.className = "page leave";
isMoveNext = true;
}
}
*
{
margin: 0em;
padding: 0em;
}
html
{
height: 100%;
width: 100%;
}
body
{
height: 100%;
width: 100%;
overflow: hidden;
}
.page
{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
background-color: red;
}
#keyframes moveNext
{
0% {
transform: translate(0em,100%);
-webkit-transform: translate(0em,0%);
-moz-transform: translate(0em,0%);
}
100% {
transform: translate(0em,-100%);
-webkit-transform: translate(0em,-100%);
-moz-transform: translate(0em,-100%);
}
}
#keyframes movePrevious
{
0% {
transform: translate(0em,-100%);
-webkit-transform: translate(0em,-100%);
-moz-transform: translate(0em,-100%);
display: block;
}
100% {
transform: translate(0em,0%);
-webkit-transform: translate(0em,0%);
-moz-transform: translate(0em,0%);
}
}
#page1.leave
{
z-index: 0;
animation-name: moveNext;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
animation-duration: 800ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#page2.enter
{
background-color: blue;
z-index: 1;
animation-name: moveNext;
animation-duration: 750ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#page1.enter
{
z-index: 0;
animation-name: movePrevious;
animation-duration: 800ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#page2.leave
{
background-color: blue;
z-index: 1;
animation-name: movePrevious;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
animation-duration: 750ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
transform: translate(0em,-100%);
-webkit-transform: translate(0em,-100%);
-moz-transform: translate(0em,-100%);
}
<div class="page" id="page1" onclick="restart()">
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>
</div>
<div class="page" id="page2" onclick="restart()">
Page 2
</div>
You achieve your animation by using only transition you don't need to use keyframes
this how css look like :
*
{
margin: 0em;
padding: 0em;
}
html
{
height: 100%;
width: 100%;
}
body
{
height: 100%;
width: 100%;
overflow: hidden;
}
.page
{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
background-color: red;
transition:all linear 800ms;
}
#page2{
background-color: blue;
}
#page1.leave,#page2.enter
{
transform: translate(0em,-100%);
-webkit-transform: translate(0em,-100%);
-moz-transform: translate(0em,-100%);
}
#page1.enter,#page2.leave
{
transform: translate(0em,-0%);
-webkit-transform: translate(0em,-0%);
-moz-transform: translate(0em,-0%);
}
See demo here
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.
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/
infact i want to make Solar System for an Educational purpose! so a big yellow circle should be in the middle and others should spin around ! but i dont have any idea! just help with spining thing and i will find out other things! i find below code but it just spins around him self!
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
live demo : http://jsfiddle.net/hamidrezabstn/bLqak/
Refer to this tutorial/example for the solar system using CSS3:
CSS3 Solar System
Using simple CSS will do the trick:
http://lea.verou.me/2012/02/moving-an-element-along-a-circle/
#keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
i found the simple answer too :D
.deform {
width: 200px;
height: 200px;
transform: scaleX(3);
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
border-radius: 50%;
}
.rotate {
width: 100%;
height: 100%;
animation: circle 10s infinite linear;
transform-origin: 50% 50%;
}
.counterrotate {
width: 50px;
height: 50px;
animation: ccircle 5s infinite linear;
}
.planet {
width: 50px;
height: 50px;
position: absolute;
border-radius : 50px;
left: 0px;
top: 0px;
background-color: red;
display: block;
}
#keyframes circle {
from {transform: rotateZ(0deg)}
to {transform: rotateZ(360deg)}
}
#keyframes ccircle {
from {transform: rotateZ(360deg)}
to {transform: rotateZ(0deg)}
}
Demo: http://jsfiddle.net/hamidrezabstn/fgcPa/3/embedded/result/