I have to write a simple HTML banner rotator in JavaScript with animated transition using CSS3. I came with this:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/banner.css" type="text/css" />
<script type="text/javascript" src="scripts/banner.js"></script>
</head>
<body>
<div><img src="img/banner1.jpg" alt="" id="banner" /></div>
<script>window.onload = rotateAnimation('banner', 5000);</script>
</body>
</html>
CSS:
#banner {
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
#keyframes myfirst {
0% {opacity: 0;}
10% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
JavaScript:
var i = 0;
var banners = new Array("img/banner1.jpg", "img/banner2.jpg", "img/banner3.jpg");
function rotateAnimation(el, speed) {
var elem = document.getElementById(el);
elem.src = banners[i];
setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
i++;
if(i === banners.length) i = 0;
}
But as I expected, the animation desynchronise itself and I don't know how to make this on one timer only.
It didn't need an CSS3 animation. All it needed was JS script that change images and CSS3 trasition property. Didn't know that transitions work if JS is changing something.
Related
I'm trying to call a CSS animation on the event that this button is pressed, after doing some research it seems classList is the way forward. It's late and I think I'm being stupid but I cannot get it to work.
HTML:
<body>
<img id="myID" class="mouse" src="mouse.png" onclick="ani()">
<script src="script.js"></script>
</body>
<head>
<link href="styles.css" rel="stylesheet"/>
</head>
JavaScript:
function ani()
{
document.getElementById('myID').classList.add = 'animate';
}
CSS:
.animate
{
animation: test 1s linear forwards;
}
#keyframes test
{
100%
{
transform: translateX(calc(8%));
}
}
add is a function so the way you are using classList needs a slight change from:
document.getElementById('myID').classList.add = 'animate';
to:
document.getElementById('myID').classList.add('animate');
function ani(){
document.getElementById('myID').classList.add('animate');
}
.animate {
animation: test 1s linear forwards;
}
#keyframes test {
100% {
transform: translateX(calc(8%));
}
}
<body>
<img id="myID" class="mouse" src="https://stock.wikimini.org/w/images/d/d4/Mickey_Mouse.png" onclick="ani()">
</body>
I have an image that disappears (via javascript) and then fades out (via CSS) on my page, and then once this happens I have a div with text that appears once the image disappears. What I am hoping to do and am having problems with is making the text that appears after 5 seconds appear with a fade in ... html/js as follows:
<script type="text/javascript">
var random_images_array = ['light.jpg', 'dark.jpg', 'photo.jpg'];
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}
</script>
</head>
<body>
<div id="welcomeImage" class="fadeout">
<script type="text/javascript">getRandomImage(random_images_array, 'images/')</script>
</div>
<div id="introText" class="animated fadeIn">
<p>Div with Text</p>
</div>
<script type="text/javascript">window.setTimeout("document.getElementById('welcomeImage').style.display='none';", 4000); </script>
<script type="text/javascript">
function showIt() {document.getElementById("introText").style.visibility = "visible";}
setTimeout("showIt()", 5000); </script>
</body>
</html>
CSS:
.fadeout {
animation: fadeOut 1s forwards;
animation-delay: 3s;
}
#keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
/* One option I tried that did not work out
.fadein {
animation: fadeIn 3s forwards;
animation-delay: 5s;
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
*/
/*my most current attempt at fadein through CSS */
.animated {
animation-duration: 3s;
animation-fill-mode: both;
animation-delay: 5;
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
animation-name: fadeIn;
}
#introText {
width: auto;
padding: 100px;
visibility: hidden;
text-align: center;
height: auto;
}
'''
Am i able to add a fade-in transition into the visibility script? I tried doing a fade in with CSS but could not get it to work.
I do not know the JS to add it to my script and have tried searching for it but could not find anything for my specific situation.
If anyone sees anything I could fix in my CSS to make it fade in properly (maybe a timing issue?) or know how I can include a fade-in in my script making the text visible it would be much appreciated!
Thanks!!
Maybe instead of toggleing visibility you can toggle the display from none to block.
Take a look here:
.fadeout {
animation: fadeOut 1s forwards;
animation-delay: 3s;
}
#keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
/* One option I tried that did not work out
.fadein {
animation: fadeIn 3s forwards;
animation-delay: 5s;
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
*/
/*my most current attempt at fadein through CSS */
.animated {
animation-duration: 3s;
animation-fill-mode: both;
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
animation-name: fadeIn;
}
#introText {
width: auto;
padding: 100px;
display: none;
text-align: center;
height: auto;
}
<script type="text/javascript">
var random_images_array = ['light.jpg', 'dark.jpg', 'photo.jpg'];
function getRandomImage(imgAr, path) {
path = path || 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fr.ddmcdn.com%2Fs_f%2Fo_1%2FAPL%2Fuploads%2F2014%2F10%2Fintro-cats-at-home-324x205.jpg&f=1&nofb=1'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}
</script>
<body>
<div id="welcomeImage" class="fadeout">
<script type="text/javascript">getRandomImage(random_images_array, 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fr.ddmcdn.com%2Fs_f%2Fo_1%2FAPL%2Fuploads%2F2014%2F10%2Fintro-cats-at-home-324x205.jpg&f=1&nofb=1')</script>
</div>
<div id="introText" class="animated fadeIn">
<p>Div with Text</p>
</div>
<script type="text/javascript">window.setTimeout("document.getElementById('welcomeImage').style.display='none';", 4000); </script>
<script type="text/javascript">
function showIt() {document.getElementById("introText").style.display = "block";}
setTimeout("showIt()", 5000); </script>
</body>
As the title says, this animation is not working on Firefox.
I am running this animation through JavaScript after a few seconds by using:
document.getElementById('my_id').style.webkitAnimationPlayState = "running";
I also tried:
style.animationPlayState
In the same file, changing the background-color animation works perfectly.
My conclusion is, there is something wrong with opacity on Firefox?
#my_id {
opacity: 0;
animation: animation 1s;
animation-fill-mode: forwards;
animation-play-state: paused;
-webkit-animation: animation 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
-moz-animation: animation 1s;
-moz-animation-fill-mode: forwards;
-moz-animation-play-state: paused;
}
#keyframes animation {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0.2;}
}
The above CSS is from the element I want to animate.
Instead of using JavaScript to add -webkit-animation-play-state, just add a class to your #my_id div using onload that includes all of the browser prefixes.
JavaScript
window.onload = function() {
document.getElementById("my_id").className += "running";
}
CSS
#my_id.running {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
The above code adds the .running class to your #my_id element, which declares animation-play-state: running, including the browser prefixes. You can test the above code by checking out my example that uses your code. I've tested it and it works in Firefox (51), Chrome, Opera, & Safari.
I want tot revert back to my first position from the current frame of animation.
Here in this code I have written a simple css3 keyframe animation and its working on hover. while mouse is out, I want this element to revert back to its first position with animation.
// html
------------------------------------
<div class="wrapper">
<div class="test"></div>
</div>
Css
.wrapper {width: 300px; height: 400px; position: relative;}
.test {width:40px; height: 40px; background-color: #0c6; border-radius: 40px; position: absolute; top:100px; left: 100px;}
.wrapper:hover .test{
animation-name:testin ; -webkit-animation-name:testin;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
#keyframes testin {
0%{top:100px; left:100px;}
20%{top:150px; left:150px;}
40%{top:200px; left:50px;}
60%{top:250px; left:150px;}
80%{top:300px; left:50px;}
100%{top:350px; left:150px;}
}
#-webkit-keyframes testin {
0%{top:100px; left:100px;}
20%{top:150px; left:150px;}
40%{top:200px; left:50px;}
60%{top:250px; left:150px;}
80%{top:300px; left:50px;}
100%{top:350px; left:150px;}
}
Please tell me if there is any javascript / jquery help or library for this kind of effects.
Thanks
what you want to achieve can be done with JavaScript or JQuery. These two are the ones that triggers functionality in a web page, so in your example the functionality of ":hover" (which is CSS) can also be achieved with JS libraries. In this case a simple one to use is hover(), so let's say we use JQuery library for this, and we'll start off by setting the appropiate scripts and markup in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="wrapper">
<div class="test"></div>
</div>
<script type= "text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Once you have that, we will need to create the other keyframe animation which will be the opposite, something like this:
#keyframes testinBack {
0%{top:350px; left:150px;}
20%{top:300px; left:50px;}
40%{top:250px; left:150px;}
60%{top:200px; left:50px;}
80%{top:150px; left:150px;}
100%{top:100px; left:100px;}
}
#-webkit-keyframes testinBack {
0%{top:350px; left:150px;}
20%{top:300px; left:50px;}
40%{top:250px; left:150px;}
60%{top:200px; left:50px;}
80%{top:150px; left:150px;}
100%{top:100px; left:100px;}
}
Now for the JS part, what we will do is to create a class in CSS from the one you already had, and create two classes, one with the keyframe animation-name: "testin", and the other with "testinBack":
.animationTest{
animation-name: testin; -webkit-animation-name:testin;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
.animationTestBack{
animation-name: testinBack; -webkit-animation-name:testinBack;
animation-duration: 2s; -webkit-animation-duration: 2s;
animation-timing-function: ease; -webkit-animation-timing-function:ease;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
animation-direction: normal; -webkit-animation-direction: normal;
animation-delay: 0s; -webkit-animation-delay:0s;
animation-play-state: running; -webkit-animation-play-state: running;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
}
With that created, now the JS part should end up like this:
$( ".wrapper" ).hover(function() {
$('.test').addClass('animationTestin');
$('.test').removeClass('animationTestinBack');
},function(){
$('.test').removeClass('animationTestin');
$('.test').addClass('animationTestinBack');
});
So that when you hover on the wrapper you add the class that has the animation going down, and when you hover out, you remove that class and then add the animation going up.
Here is a fiddle:
https://jsfiddle.net/n1k5hkff/
Hope it helps,
Leo.
I am completely new to this so bear with me. I am looking to rotate the main image on this page http://jovanatanackovic.com/index.html every time its refreshed or loaded. I found this and tried adding it in the script tags
function random_imglink(){
var theImages = new Array()
theIimages[1]="images/thalia-heffernan-4.jpg"
theImages[2]="images/volcano-surfing-the-ascent.jpg"
theImages[3]="images/rooster-fighting-sucking-blood-from-face.jpg"
theImages[4]="images/cooper-canyon-fallen-tarahumara.jpg"
theImages[5]="images/copper-canyon-finishers.jpg"
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
if(whichImage==0){
document.write('<img src="'+theImages[whichImage]+'" border=0 width=689 height=466>');
} else if(whichImage==1){
document.write('<img src="'+theImages[whichImage]+'" border=0 width=689 height=466>');
} else if(whichImage==2){
document.write('<img src="'+theImages[whichImage]+'" border=0 width=689 height=466>');
} else if(whichImage==3){
document.write('<img src="'+theImages[whichImage]+'" border=0 width=689 height=466>');
} else if(whichImage==4){
document.write('<img src="'+theImages[whichImage]+'" border=0 width=689 height=466>');
}
}
and I was told to add this where I wanted the images to show
<script>showImage();</script>
is this correct? I'm sure sure where exactly to put it as the current image has css attached. I've tried adding it inside the div tags.
Try this;
JSfiddle
CSS
#imgTest {
background-image: url('YourImage.jpg');
width: 450px;
height: 281px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: right;
-webkit-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: 1;
-ms-animation-direction: right;
-ms-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: right;
-moz-animation-timing-function: linear;
-o-animation-name: rotate;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-o-animation-direction: right;
-o-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: 1;
animation-direction: right;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#-ms-keyframes rotate {
0% {
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#-moz-keyframes rotate {
0% {
-moz-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#-o-keyframes rotate {
0% {
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}
#keyframes rotate {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="imgTest"></div>
</body>
</html>
As a tip, you could simplify the array:
var theImages = [
"images/thalia-heffernan-4.jpg",
"images/volcano-surfing-the-ascent.jpg",
"images/rooster-fighting-sucking-blood-from-face.jpg",
"images/cooper-canyon-fallen-tarahumara.jpg",
"images/copper-canyon-finishers.jpg"
]
If you really want to use that code, then you want the following:
<div class="photo">
<script>
...JAVASCRIPT HERE...
</script>
</div>
Of course, it would be a much nicer solution to use javascript like the following instead of document.write:
In the HEAD:
<script>
function showImage()
{
// Better array init thanks to Joseph Silvashy
var theImages = [
"images/thalia-heffernan-4.jpg",
"images/volcano-surfing-the-ascent.jpg",
"images/rooster-fighting-sucking-blood-from-face.jpg",
"images/cooper-canyon-fallen-tarahumara.jpg",
"images/copper-canyon-finishers.jpg"
]
var whichImage = Math.round(Math.random()*(p-1));
document.getElementById("rotatingImage").src = theImages[whichImage];
}
</script>
and
<body onload="showImage()">
...