getElementbyID works since IDs have to be unique and thus the function always returns exactly one element (or null if none was found).
Got struck with the class name.
How can i add the style.animation to the class name ?
function myFunction() {
document.getElementsByClassName("myDIV").style.WebkitAnimation = "mynewmove 4s 2";
document.getElementsByClassName("myDIV").style.animation = "mynewmove 4s 2";
}
.myDIV {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
#-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#-webkit-keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
#keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
<button onclick="myFunction()">Try it</button>
<div class="myDIV"></div>
getElementsByClassName returns a HTMLCollection, therefore, you either need to access specific items([0]) or iterate over them
function myFunction() {
document.getElementsByClassName("myDIV")[0].style.WebkitAnimation = "mynewmove 4s 2";
document.getElementsByClassName("myDIV")[0].style.animation = "mynewmove 4s 2";
}
.myDIV {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
#-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#-webkit-keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
#keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#keyframes mynewmove {
from {
top: 0px;
}
to {
top: 200px;
}
}
<button onclick="myFunction()">Try it</button>
<div class="myDIV"></div>
Related
The goal is to have the text transition to 3 different words. I want them to be in sync with the animated rings(text change after every two rings animate fading in and fading out) I'm not sure what is the best way to set the timing for the rings and the text - should this be done with javascript or CSS animation keyframes? Below is a link to my codepen and HTML/CSS.
Codepen - https://codepen.io/pizzapgh/pen/RygPQJ
body {
background-color: gray;
}
#circles {
width: 1000px;
height: 1000px;
display: inline-block;
position: relative;
margin: auto;
border: 1px solid blue;
}
#circles div {
position: absolute;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.5);
width: 0;
height: 0;
opacity: 0;
animation-name: growCircles;
animation-duration: 8s;
transition-timing-function: ease-out;
animation-iteration-count: infinite;
}
#circles div:nth-child(1) {
animation-delay: 0s;
}
#circles div:nth-child(2) {
animation-delay: 1s;
}
#circles div:nth-child(3) {
animation-delay: 2s;
}
#circles div:nth-child(4) {
animation-delay: 3s;
}
#circles div:nth-child(5) {
animation-delay: 4s;
}
#circles div:nth-child(6) {
animation-delay: 5s;
}
#keyframes growCircles {
0% {
top: 500px;
left: 500px;
}
20% {
opacity: 0.5;
}
80% {
opacity: 0;
top: 0;
left: 0;
width: 1000px;
height: 1000px;
}
100% {
opacity: 0;
}
}
/*================================
Text Transition
================================== */
#spin:after {
content: "";
animation: spin 5s ease-in infinite;
}
#keyframes spin {
0% {
content: "From The Classroom";
}
60% {
content: "To the City";
}
100% {
content: "To the World";
}
}
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
color: white;
width: 500px;
overflow: hidden;
text-align: center;
font-family: 'RockwellMT' !important;
}
<div class="circle-container">
<div id="circles">
<h2 id="spin"></h2>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
I was implementing this css3 slider with no jquery at all. How can I add captions for each slide below the slider?
I was working on this:
https://codepen.io/davidhc/pen/nLpJk
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
Thanks for your help :)
Please check this. I have added caption inside slide div and give this css for caption:
.slider p {
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 100%;
}
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg)no-repeat center;
background-size: cover;
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
.slide2 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371565525_p17tbqpu0d69c21hetd77dh483.jpeg)no-repeat center;
background-size: cover;
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371564896_p17tbq6n86jdo3ishhta3fv1i3.jpg)no-repeat center;
background-size: cover;
animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
#keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
.slider p {
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 100%;
}
<div class='slider'>
<div class='slide1'><p>slide1</p></div>
<div class='slide2'><p>slide2</p></div>
<div class='slide3'><p>slide3</p></div>
</div>
here is the html and it works with your code but you have to style it by css
<div class='slider'>
<div class='slide1'><div class="carl-caption">
<h3>burger lover</h3>
<p>Eat it pal</p>
</div></div>
<div class='slide2'><div class="carl-caption">
<h3>dubai</h3>
<p>dubai is wild</p>
</div></div>
<div class='slide3'><div class="carl-caption">
<h3>gray land</h3>
<p>imaginary land</p>
</div></div>
</div>
for css caption try this
.slide1:after{content:"My name is lover";
position: absolute;
top: 0;
right: 0;}
I Think this is what u want.
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg)no-repeat center;
background-size: cover;
animation: fade 8s infinite;
-webkit-animation: fade 8s infinite;
}
.slide2 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371565525_p17tbqpu0d69c21hetd77dh483.jpeg)no-repeat center;
background-size: cover;
animation: fade2 8s infinite;
-webkit-animation: fade2 8s infinite;
}
.slide3 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371564896_p17tbq6n86jdo3ishhta3fv1i3.jpg)no-repeat center;
background-size: cover;
animation: fade3 8s infinite;
-webkit-animation: fade3 8s infinite;
}
#keyframes fade {
0% {
opacity: 1;
}
33.333% {
opacity: 0;
}
66.666% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade2 {
0% {
opacity: 0;
}
33.333% {
opacity: 1;
}
66.666% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade3 {
0% {
opacity: 0;
}
33.333% {
opacity: 0;
}
66.666% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.slider p {
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 100%;
}
.slide1:after {
position: absolute;
content: "Slide one";
bottom: -25px;
width: 100%;
text-align: center;
}
.slide2:after {
position: absolute;
content: "Slide Two";
bottom: -25px;
width: 100%;
text-align: center;
}
.slide3:after {
position: absolute;
content: "Slide Three";
bottom: -25px;
width: 100%;
text-align: center;
}
<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
Is there a way to make an object move with CSS keyframes by adding the animate property to a class. So that when you click on a certain button the class will be attached to the object, thus creating an animation? Here is the code for it
function start(){
document.getElementById('up').onclick = function() {
document.getElementById('red').className = "uppy";
};
document.getElementById('do').onclick = function() {
document.getElementById('red').className = "downy";
};
}
start();
#area {
height: 400px;
width: 400px;
border: 1px solid black;
}
#red {
height: 25px;
width: 25px;
background: red;
}
#btn-row { margin-top: 20px; }
div.downy {
-moz-animation: down 1s;
animation: down 1s;
}
div.uppy {
-moz-animation: up 1s;
animation: up 1s;
}
#keyframes down {
from { top: 0; }
to {top:5 0px; }
}
#-moz-keyframes down {
from { top: 0; }
to { top: 50px; }
}
#keyframes up {
from { bottom: 0; }
to { bottom: 50px; }
}
#-moz-keyframes up {
from { bottom: 0; }
to { bottom: 50px; }
}
<div id="area">
<div id="red"></div>
</div>
<div id="btn-row">
<button id="up">Up</button>
<button id="do">Down</button>
</div>
Set position to relative at #red element, animation-fill-mode to forwards at .downy
function start() {
document.getElementById('up').onclick = function() {
document.getElementById('red').className = "uppy";
};
document.getElementById('do').onclick = function() {
document.getElementById('red').className = "downy";
};
}
window.onload = start;
#area {
height: 400px;
width: 400px;
border: 1px solid black;
}
#red {
height: 25px;
width: 25px;
background: red;
position:relative;
}
#btn-row {
margin-top: 20px;
}
div.downy {
-moz-animation: down 1s;
animation: down 1s;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
div.uppy {
-moz-animation: up 1s;
animation: up 1s;
}
#keyframes down {
from {
top: 0px;
}
to {
top: 50px;
}
}
#-moz-keyframes down {
from {
top: 0px;
}
to {
top: 50px;
}
}
#keyframes up {
from {
bottom: 0;
}
to {
bottom: 50px;
}
}
#-moz-keyframes up {
from {
bottom: 0;
}
to {
bottom: 50px;
}
}
<div id="area">
<div id="red"></div>
</div>
<div id="btn-row">
<button id="up">Up</button>
<button id="do">Down</button>
</div>
change javascript to :
<script>
function start() {
document.getElementById('up').onclick = function(){
document.getElementById('red').className = "uppy";
}
document.getElementById('do').onclick = function(){
document.getElementById('red').className = "downy";
}
}
window.onload =start;
</script>
insert 'position:relative;' to #red in css to :
#red{ height:25px; width:25px; background:red; position:relative;}
I'm trying to make 3DIVs to move with JS and place them on the right side of the page, I've done the animate script, however the position isn't right. On mobile phones it goes above my other divs in #header section and it's to much to the left. And on PC:s it is to far from the left.
Is there any way to keep my animation this way but to make it inside of the wrapper? So that It doesn't change it's position on mobile phones and PC:s?
HTML:
<div class="wrapper">
<div id="intro-right">
<div id="clouds-1"></div>
<div id="clouds-2"></div>
<div id="clouds-3"></div>
</div>
</div>
CSS:
div.wrapper {
margin: 0 auto;
padding: 0 20px;
min-width: 1024px;
width: 1024px;
}
div#intro-right {
float: right;
}
div#clouds-1 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 100px;
right: 150px;
background: url("img/clouds_bg_1.png") no-repeat;
opacity: 0;
}
div#clouds-2 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 110px;
right: 150px;
background: url("img/clouds_bg_2.png") no-repeat;
opacity: 0;
}
div#clouds-3 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 130px;
right: 150px;
background: url("img/clouds_bg_3.png") no-repeat;
opacity: 0;
}
JS:
$(document).ready(function() {
$("div#clouds-1").animate({
opacity:'0.4'
}, 1450);
$("div#clouds-2").animate({
opacity:'0.6'
}, 1450);
$("div#clouds-3").animate({
opacity:'0.8'
}, 1450);
});
$(document).ready(function() {
function moveRight1() {
$("div#clouds-1").animate({
top:'-=24px',
right: '+=50px',
opacity: '0.9'
}, 8000, moveLeft1);
}
function moveLeft1() {
$("div#clouds-1").animate({
top:'+=24px',
right: '-=50px',
opacity: '0.4'
}, 8000, moveRight1);
}
moveRight1();
function moveRight2() {
$("div#clouds-2").animate({
top:'-=24px',
right:'-=50px',
opacity: '0.9'
}, 8000, moveLeft2);
}
function moveLeft2() {
$("div#clouds-2").animate({
top:'+=24px',
right:'+=50px',
opacity: '0.6'
}, 8000, moveRight2);
}
moveRight2();
function moveRight3() {
$("div#clouds-3").animate({
top:'+=24px',
right:'+=100px',
opacity: '0.4'
}, 8000, moveLeft3);
}
function moveLeft3() {
$("div#clouds-3").animate({
top:'-=24px',
right:'-=100px',
opacity: '0.8'
}, 8000, moveRight3);
}
moveRight3();
});
Like pixelcdv said, CSS3 animations would be perfect for simple movement like this.
Here's a quick animation I came up using your code (all in percent)
The CSS for it based off of your html:
div#clouds-1 {
position: absolute;
width: 30%;
height: 20%;
top: 15%;
left: 35%;
background: url(http://www.drawingcoach.com/image-files/cartoon_clouds_2.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudOne 16s infinite;
-moz-transition: cloudOne 16s infinite;
-o-transition: cloudOne 16s infinite;
transition: cloudOne 16s infinite;
animation: cloudOne 16s infinite;
}
#keyframes cloudOne {
0% {
top:15%;
left: 35%;
}
50% {
top:7%;
left: 20%;
}
100% {
top:15%;
left: 35%;
}
}
div#clouds-2 {
position: absolute;
width: 30%;
height: 20%;
top:20%;
left: 45%;
background: url(http://asnika.info/wp-content/uploads/2013/04/drawing-of-cloudscartoon-clouds-drawing-techniques-fauprla4.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudTwo 16s infinite;
-moz-transition: cloudTwo 16s infinite;
-o-transition: cloudTwo 16s infinite;
transition: cloudTwo 16s infinite;
animation: cloudTwo 16s infinite;
}
#keyframes cloudTwo {
0% {
top:20%;
left: 45%;
}
50% {
top:35%;
left: 15%;
}
100% {
top:20%;
left: 45%;
}
}
div#clouds-3 {
position: absolute;
width: 30%;
height: 20%;
top:30%;
left: 50%;
background: url(http://www.how-to-draw-cartoons-online.com/image-files/cartoon_clouds.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudThree 16s infinite;
-moz-transition: cloudThree 16s infinite;
-o-transition: cloudThree 16s infinite;
transition: cloudThree 16s infinite;
animation: cloudThree 16s infinite;
}
#keyframes cloudThree {
0% {
top:30%;
left: 50%;
}
50% {
top:5%;
left: 65%;
}
100% {
top:30%;
left: 50%;
}
}
I think in your case it would be better to use CSS3 animations. This way, you just have to call $('div#clouds-1').addClass(<new class that sets the position on the right>) instead of .animate() and adapt the css to work both on mobile and on desktop
Let's say we have an animation like here: http://jsfiddle.net/utterstep/JPDwC/
Layout:
<div>back</div>
<div class="animating"></div>
<div>forward</div>
And corresponding CSS:
#keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
.animating {
width: 200px;
height: 200px;
background-color: red;
animation: someanimation 5s infinite;
}
And I want to go to the next or previous animation state when I press back or forward. There can be more than one object and I would like to switch their animation states at the same time.
Is it someway possible via CSS or CSS+JS, or it maybe it will be easier for me just to rewrite my code in pure-JS? (currently I don't like this idea because I have a lot of properties to animate and CSS makes it much more easier for me)
Perhaps you have got the answer in CSS+JS
Please refer Old Post
Here on fiddle from the same post Fiddle
And with CSS only here is the Fiddle I have tweaked with :hover property,
#-webkit-keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
#-moz-keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
#keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
#-webkit-keyframes someani2 {
0%,100% {
width: 100px;
}
50% {
width: 200px;
}
}
#-moz-keyframes someani2 {
0%,100% {
width: 100px;
}
50% {
width: 200px;
}
}
#keyframes someani2 {
0%,100% {
width: 100px;
}
50% {
width: 200px;
}
}
.animating {
width: 200px;
height: 200px;
background-color: red;
-webkit-animation: someanimation 5s infinite;
-moz-animation: someanimation 5s infinite;
animation: someanimation 5s infinite;
}
.animating:hover{
color:#f60;
-webkit-animation: someani2 6s 1;
-moz-animation: someani2 6s 1;
animation: someani2 6s 1;
}
<div>back</div>
<div class="animating"></div>
<div>forward</div>
it changes the animation on hover, just like back button.
I hope this will solve your purpose..