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()">
...
Related
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>
I have the next problem: I want to crossfade different background images of a <body> tag, with a timer. You can see here an example of what I want to achieve.
The problem is that I'm new to these stuff and can't figure out how to do it...I've seen many post, but they only made me get more confused!
my HTML code:
<body id="one" onload="startTimer()">
<!-- Some other tags -->
</body>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
var url = "url(" + images[x] + ")";
$("#one").css('background-image', url);
}
function startTimer() {
setInterval(displayNextImage, 6000);
}
var images = [], x = -1;
images[0] = "someimage1.jpg";
images[1] = "someimage2.jpg";
images[2] = "someimage3.jpg";
</script>
and my CSS code:
body {
background-image: url("images/forest1.jpeg");
background-size: cover;
}
I'm open to suggestions, I mean, if there's a better way to do these, great! I just want to get the same point as the web shown above!
Thanks in advance!
You don't need any JavaScript, you can achieve it with CSS animations:
body {
background-size: cover;
}
#-webkit-keyframes changeBckg {
0% { background-image: url("https://unsplash.it/1000?image=1080"); }
25% { background-image: url("https://unsplash.it/1000?image=1081"); }
50% { background-image: url("https://unsplash.it/1000?image=1064"); }
75% {background-image: url("https://unsplash.it/1000?image=1078"); }
100% {background-image: url("https://unsplash.it/1000?image=1080"); }
}
#keyframes changeBckg {
0% { background-image: url("https://unsplash.it/1000?image=1080"); }
25% { background-image: url("https://unsplash.it/1000?image=1081"); }
50% { background-image: url("https://unsplash.it/1000?image=1064"); }
75% {background-image: url("https://unsplash.it/1000?image=1078"); }
100% {background-image: url("https://unsplash.it/1000?image=1080"); }
}
.letterAnimation {
-webkit-animation: changeBckg 16s ease infinite;
animation: changeBckg 16s ease infinite;
}
<body class="letterAnimation">
</body>
A simple CSS only solution, it works using CSS animations #keyframes; You can apply the same code to the body of your html page.
#keyframes cf4FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#cf4a img:nth-of-type(1) {
animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
animation-delay: 0;
}
#cf4a img {
position: absolute;
top: 0;
left: 0;
animation: cf4FadeInOut 5s infinite;
}
<div id="cf4a" class="shadow cf4FadeInOut">
<img src="https://placeimg.com/150/150/01">
<img src="https://placeimg.com/150/150/02">
<img src="https://placeimg.com/150/150/03">
<img src="https://placeimg.com/150/150/04">
</div>
I want to text effect like text increase size and decrease size loop with no limit using JavaScript
JavaScript:
function fontSizer() {
if (!document.getElementById("font").style.fontSize) {
document.getElementById("font").style.fontSize = "15px";
}
if (document.getElementById("font").style.fontSize == "15px") {
document.getElementById("font").style.fontSize = "10px";
} else {
document.getElementById("font").style.fontSize = "15px"
}
}
HTML:
<p onload="fontSizer" id="font">Test</p>
you can raise the event on the body onload event.
<body onload="init()">
<p id="font">Test</p>
</body>
This will call your function if you put it but one good way it to pass to an intermediate function where you call all this kinf of function (if you have several) :
function init() {
fontSizer();
//other method to call during the body loading
}
And if you want i can purpose you the following optimization for your code :
function fontSizer() {
var element = document.getElementById("font");
if (element.style.fontSize == "15px") {
elemeny.style.fontSize = "10px";
return;
}
element.style.fontSize = "15px"
}
You can also use css animation by using something like :
#font {
font-size: 15px;
-webkit-animation: theanim 4s;
-moz-animation: theanim 4s;
-o-animation: theanim 4s;
animation: theanim 4s;
}
#keyframes theanim {
from { font-size:10px; }
to { font-size:15px; }
}
The text effect can be achieved by using onload event with <body onload="fontSizer()> tag.
function fontSizer() {
if (!document.getElementById("font").style.fontSize) {
document.getElementById("font").style.fontSize = "15px";
}
if (document.getElementById("font").style.fontSize == "15px") {
document.getElementById("font").style.fontSize = "30px";
} else {
document.getElementById("font").style.fontSize = "15px"
}
}
<body onload="fontSizer()">
<p id="font">Test</p>
</body>
You can do it without javascript function, only with css animation :
#font {
font-size: 15px;
-webkit-animation: theanim 4s;
-moz-animation: theanim 4s;
-o-animation: theanim 4s;
animation: theanim 4s;
}
#keyframes theanim {
from { font-size:10px; }
to { font-size:15px; }
}
Well JavaScript not work Good Its work fine with animation css
CSS:
<style>
#keyframes fadeIn {
from { font-size: 20px; color:red;}
}
.animate-flicker {
animation: fadeIn 0.2s infinite alternate;
}
</style>
HTML
<span class="animate-flicker">Text</span>
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.
I'm trying to use jquery to bring a constantly rotating div (using CSS animation) to a slow, smooth stop when another div is clicked.
I've been attempting to change the "animation-timing-function" property from "linear" to "ease-out", but it just stops abruptly, as opposed to the slow stop I want.
HTML
<div id=click>Click me</div>
<div id=spinner></div>
jQuery
$(function () {
$("#click").click(
function () {
document.getElementById("spinner").style['-moz-animation-iteration-count'] = '1';
document.getElementById("spinner").style['-moz-animation-timing-function'] = 'ease-out';
document.getElementById("spinner").style['-webkit-animation-iteration-count'] = '1';
document.getElementById("spinner").style['-webkit-animation-timing-function'] = 'ease-out';
document.getElementById("spinner").style['animation-iteration-count'] = '1';
document.getElementById("spinner").style['animation-timing-function'] = 'ease-out';
});
});
CSS
#spinner {
width:50px;
height:50px;
margin:20px;
background-color:red;
animation:spin-constant 5s;
-webkit-animation-name: spin-constant;
-webkit-animation-duration: 1200ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin-constant;
-moz-animation-duration: 1200ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: spin-constant;
animation-duration: 1200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-moz-keyframes spin-constant {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin-constant {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin-constant {
from {
transform:rotate(0deg);
}
to {
transform:rotate(36 0deg);
}
}
Here is the fiddle of the basic concept.
http://jsfiddle.net/jN5vw/1/
Try this one:
See Demo
jQuery:
$('#click').click(function () {
$("#spinner").removeClass('spinner');
$("#spinner").addClass('anim');
});
CSS:
.anim{
width:50px;
height:50px;
margin:20px;
background-color:red;
animation:spin 5s ;
-webkit-animation: spin 1s linear;
-webkit-animation-iteration-count:1;
}
I think this is what you are asking.