How to add a transition effect when the image changes?
When the array loops through images, how do I add a transition so that its more smooth.
var i = 0;
var images = [];
var time = 3000;
images[0] = 'test.jpg';
images[1] = 'test1.jpg';
images[2] = 'test2.jpg';
function changeImg() {
document.slide.src = images[i];
if(i < images.length - 1) {
i++
} else {
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
My easiest way to do it is putting all the images into 1 wrapper.
Then use loop to set active image by element index.
Something like this
<style>
.wrapper { position: relative; }
.wrapper img {
opacity: 0;
visibility: hidden;
transition: 0.5s opacity;
position: absolute;
}
.wrapper img.active {
opacity: 1;
visibility: visible;
position: relative;
}
</style>
<div class="wrapper">
<img src={images[0]} />
<img src={images[1]} />
<img src={images[2]} />
<img src={images[3]} />
</div>
What you are asking for is called cross-fading, this is a possible duplicate of How can I smoothly transition CSS background images?
But a more detailed guide that worked for me in the past can be found here.
http://css3.bradshawenterprises.com/cfimg/
Keep in mind that you might have to take browser compatibility into consideration if you go the CSS route. Properties such as the -webkit CSS extension is just one of many.
One of the easiest ways I found is using w3.css.
In your html code add these lines.
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<img class="w3-animate-fading" name="slide" src="" width="800" />
</body>
</html>
The class parameter in your image tag will call the predefined css animations deom w3.css file.
There are many more options such as slide right, slide left etc. You can view them all here
Codepen Demo
Related
I am looking for a way to, with multiple <div> elements, have some functionality that can switch between the <div> as if they were pages. I want there to be an 'active' page, and when certain elements or <a> are clicked, there is a way to switch to another div that takes up the whole page. At any given time, only one such page-like <div> is visible.
I am aware this can be done in jquery, such as with their data-role="page" attribute for divs, but I am wondering how this can be done mechanically in pure javascript and css.
Here is an example I wrote, but it does not work, it only allows a transition once, then get stuck.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Divs</title>
<style>
.uipage {
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
border: 0;
}
.lightpage {
background-color: #fcfbd1;
}
.darkpage {
background-color: red;
}
</style>
</head>
<body>
<div class="lightpage" id="pageone" name="pagetype">
<p onclick="switchPages();">Hello! This is page one!</p>
</div>
<div class="darkpage" id="pagetwo" name="pagetype">
<p onclick="switchPages();">Hello! This is page two!</p>
</div>
<script>
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
</script>
<script type="text/javascript">
var currentPage = 1;
function switchPages() {
if(currentPage === 1) {
document.getElementById('pagetwo').style.top = 0;
document.getElementById('pagetwo').style.left = 0;
document.getElementById('pagetwo').style.width = '100%';
document.getElementById('pagetwo').style['min-height'] = '100%';
document.getElementById('pagetwo').style.position = 'absolute';
document.getElementById('pagetwo').style.border = 0;
currentPage = 2;
} else if(currentPage === 2) {
document.getElementById('pageone').style.top = 0;
document.getElementById('pageone').style.left = 0;
document.getElementById('pageone').style.width = '100%';
document.getElementById('pageone').style['min-height'] = '100%';
document.getElementById('pageone').style.position = 'absolute';
document.getElementById('pageone').style.border = 0;
currentPage = 1;
}
}
</script>
</body>
</html>
Basically there is a transition to page two, but then it will not work after that. I am not sure if dynamically changing the style object is a good approach here or not.
Seems to me that you're only applying the styles to the <div> you're trying to show but you're not actually hiding the other one.
Have you tried applying display: none; to the div you're meaning to hide?
I would apply the desired styles for the div assuming it's visible and just changing the display mode from none to block or viceversa depending on the one clicked
Several things going on.
First, you should avoid styles as much as you can. Instead, use classes, they run better and you can reuse the classes. Then you can just use
document.getElementById('pageone').addClass('selected');
document.getElementById('pagetwo').removeClass('selected');
Second, You are adding styles to the target id, but you are not removing the styles to the id/ids that you don't want in front.
I know you want pure js, but you also may want to look up jquery. It can make things like this a lot easier with simple commands like
$('#pageone').show();
$('#pagetwo').hide();
Here's what I have so far, it's a very basic slide image banner inside my header tag in html. Basically, every 3 seconds, I have a new image showing up. I plan on using that for the mock exercise I'm working on right now but unfortunately, something went wrong in Javascript. At least, that's what I think it is. The image banner does NOT keep going through the images. It just sticks to one picture and goes no where else. No other pictures show up. This is the error I'm getting inside my console log right now.
Uncaught TypeError: Cannot read property 'setAttribute' of null. at changeImage (slideshow.js:7)
Here's the HTML I have right now.
<html>
<head>
<title>Kenneth's Slide Show Demonstration</title>
<meta charset="UTF-8">
<link rel='stylesheet' type='text/css' href='slideshow.css'>
<script src="slideshow.js"></script>
</head>
<body>
<div id="wallpaper"><img src="ferrari-logo0.jpg" id="ferrari" alt="ferrari logo"/></div>
</body>
</html>
now for CSS.
body {
padding:0;
margin:0;
}
#wallpaper {
height:300px;
width:100%;
margin:auto;
background:rgba(0,0,0,0.7);
border-bottom:dashed black 1px;
transition:all 0.5s ease-in-out;
}
#ferrari {
margin-left:auto;
margin-right:auto;
display:block;
height:250px;
width:400px;
padding-top:20px;
}
#wallpaper:hover {
background:rgba(0,0,0,1);
}
And then here's the Javascript I've made.
var myImage = document.getElementById('ferrari');
var imageArray=['ferrari-logo0.jpg', 'ferrari-logo1.jpg', 'Ferrari-logo2', 'ferrari-logo3.jpg'];
var imageIndex=0;
function changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
};
var intervalHandle = setInterval(changeImage(),4000);
function changeImage();
Where did I go wrong? If I can make a special request, I'd like straight Vanilla javascript. I know Jquery is popular but I'm not currently studying that right now.
No need in round brackets in setInterval for function changeImage();
var imageArray = ['ferrari-logo0.jpg', 'ferrari-logo1.jpg', 'Ferrari-logo2', 'ferrari-logo3.jpg'];
var imageIndex = 0;
function changeImage() {
var myImage = document.getElementById('ferrari');
if (myImage) {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
};
var intervalHandle = setInterval(changeImage, 4000);
Try it. You must pass a function, not invoke it.
You are loading your JavaScript in the head of your page, so when your JS runs, the ferrari element does not exist yet. getElementById returns null if it doesn't find an element with the id you provide. Thus, you are in effect trying to do null.setAttribute("src", imageArray[imageIndex]);. Since null doesn't have a setAttribute method you are getting the error message telling you Cannot read property 'setAttribute' of null.
Moving your script tag below the ferrari element should fix it. It has become a best practice to load your JS as low in the page as you can for other performance related reasons. You could also keep your script tag where it is if you wrap your code in a DOMContentLoaded event handler.
You just need to invoke changeImage, like this setInterval(changeImage,4000) also changeImage() is already defined, you just need to call it.
Here is a working example.
document.addEventListener("DOMContentLoaded", function() {
var myImage = document.getElementById('ferrari');
var imageArray=['http://placehold.it/350x150?text=1',
'http://placehold.it/350x150?text=2',
'http://placehold.it/350x150?text=3',
'http://placehold.it/350x150?text=4'
];
var imageIndex=0;
function changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
var intervalHandle = setInterval(changeImage, 4000);
changeImage();
});
body {
padding:0;
margin:0;
}
#wallpaper {
height:300px;
width:100%;
margin:auto;
background:rgba(0,0,0,0.7);
border-bottom:dashed black 1px;
transition:all 0.5s ease-in-out;
}
#ferrari {
margin-left:auto;
margin-right:auto;
display:block;
height:250px;
width:400px;
padding-top:20px;
}
#wallpaper:hover {
background:rgba(0,0,0,1);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wallpapers</title>
</head>
<body>
<div id="wallpaper">
<img src="" id="ferrari" alt="ferrari logo"/></div>
</body>
</html>
It's best practice to load your scripts after html is loaded, so place your html before then end body tag </body>, or use DOMContentLoaded https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded
I have two images I want to be stuck together for lack of a better term. As the image on the left animates off the screen, the right image just sits there not moving. I have tried to use position: relative; in the CSS for the right-hand image and even tried to animate it by adding to the javascript (see comments in the js file) but it didn't change anything.
The HTML
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="slidetest01.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script src="./javascripts/picslider01a.js"></script>
</HEAD>
<BODY onload="picrotate()">
<div id="slideshow"><img id="picshown" src="./pix/mtn01.jpg">
<img id="pichidden" src="./pix/mtn02.jpg"></div>
</BODY>
</HTML>
The CSS
#slideshow {
position: relative;
left:0px;
top:0px;
width: 1200px;
float: left;
}
#picshown {
position: relative;
float: left;
}
#pichidden {
float: left;
}
The javascript
function picrotate () {
var picts = new Array();
picts[0] = "./pix/mtn01.jpg";
picts[1] = "./pix/mtn02.jpg";
picts[2] = "./pix/mtn03.jpg";
picts[3] = "./pix/mtn04.jpg";
picts[4] = "./pix/mtn05.jpg";
var count = 2;
function rotator() {
$("#picshown").animate({left: "-600px"});
//Tried adding $("#pichidden").animate({left: "0px"}); here but did not work
//Need to delay since the rest triggers immediately after transition starts.
setTimeout(function () { //1 second should be enough time for the slide.
count = (count+1)%5;
var discard = document.getElementById("picshown"); //removes old picture
discard.parentNode.removeChild(discard);
document.getElementById("pichidden").setAttribute("id", "picshown"); //makes current picture the active one
ith = document.createElement("img"); //create a new image
ith.id = "pichidden";
ith.src = picts[count];
$("#slideshow").append(ith);//Append it to the slideshow
}, 1000);
} //end rotator
setInterval(rotator, 2000);
} // end picrotate
I am just new to Javascript. I want to implement lightbox effect without using jQuery. I can successfully add a fixed div with 100% height and width of body element by using Javascript but there is no animation effect.
HTML:
<html>
<head>
<title>Lightbox Example</title>
<link rel="stylesheet" href="lightboxstyle.css" type="text/css">
</head>
<body>
<ul>
<li><img class="preview" src="images/blue.jpg" title="blue"></li>
<li><img class="preview" src="images/red.jpg" title="red"></li>
<li><img class="preview" src="images/yellow.jpg" title="yellow"></li>
<li><img class="preview" src="images/green.jpg" title="green"></li>
</ul>
<script src="lightbox.js"></script>
</body>
</html>
Stlesheet
.preview {list-style: none;display:inline;width:200px;}
ul li {display:inline;margin-left:1%}
body {background-color:#eee;}
#lightbox {
position:fixed;
left:0;
top:0;
z-index: 999;
background-image:url(images/1.png);
}
Javascript
function lightboxboot(){
var lightbox=document.createElement("div")
lightbox.id="lightbox"
var ul=document.getElementsByTagName("ul")
ul[0].insertBefore(lightbox)
for (var x=1;x<100;x++){
setTimeout(function(){
lightbox.style.width=x+"%";
lightbox.style.height=x+"%";
},50)
}
}
var image=document.getElementsByClassName("preview")
for (var i=0;i<image.length;i++){
image[i].onclick=lightboxboot;
}
The lightbox div can still cover the entire body element after the script runs over but these is no animation effect.
for (var x=1;x<100;x++){
setTimeout(function(){
lightbox.style.width=x+"%";
lightbox.style.height=x+"%";
},50)
}
Is wrong. You set a bunch of timeouts for the same time and try to access x wrongly. Here:
for (var x=1;x<100;x++){
setTimeout(function(x){
lightbox.style.width=x+"%";
lightbox.style.height=x+"%";
},x*50,x)
}
I want to make a image appear on my site when the mouse moves. It can appear to be a stupid thing to do, but it's really important that when the page loads the image is not yet visible.
My HTML is like this:
<html>
<head>
</head>
<body>
<div class="page-container">
<div>
<a id="entrar" href="_pt/log_in.html"><img src="_assets/entrar.jpg" alt="entrar"></a>
</div>
</div>
<script src="_js/jquery-1.10.2.js"></script>
<script src="_js/jquery-ui-1.10.3.js"></script>
<script src="_js/exp.js"></script>
</body>
</html>
In my CSS i'm making the image not visible
#entrar {
display: none;
}
And in my Javascript:
function PrepareHandlers() {
$(".page-container").mousemove(function(){
$("a#entrar").css("display", "inline");
});
}
...
window.onload = function(){
....
PrepareHandlers();
}
Could anyone tell me what I'm doing wrong plz. Thanks
Declare this in your source file , not inside a function !
$(document).ready( function(){
$(".page-container").mousemove(function(){
$("a#entrar").css("display", "inline");
});
})
It appears likely the page container is not taking up any space, and therefore it never receives a mousemove event. Here is an easy CSS fix to test this theory:
body { position : absolute; top :0; bottom : 0; left : 0; right: 0;}
.page-container { width : 100%; height : 100%; background-color : #ddd; }
Check out this solution.
You should preload the image to minimize or avoid an annoying/confusing lag like so:
var img = new Image();
img.src = '//your/url/to/image';