We Keep Coding

Adding a fade between JavaScript slideshow? [duplicate]

I have created a JavaScript Slideshow, but I don't know how to add the fade effect. Please tell me how to do it, and please tell in JavaScript only, no jQuery!
Code:
var imgArray = [
'img/slider1.jpg',
'img/slider2.jpg',
'img/slider3.jpg'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').src = imgArray[curIndex];
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
setTimeout("slideShow()", imgDuration);
}
slideShow();

Much shorter than Ninja's solution and with hardware accelerated CSS3 animation. http://jsfiddle.net/pdb4kb1a/2/ Just make sure that the transition time (1s) is the same as the first timeout function (1000(ms)).
Plain JS
var imgArray = [
'http://placehold.it/300x200',
'http://placehold.it/200x100',
'http://placehold.it/400x300'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function() {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
},1000);
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
setTimeout(slideShow, imgDuration);
}
slideShow();
CSS
#slider {
opacity:1;
transition: opacity 1s;
}
#slider.fadeOut {
opacity:0;
}

As an alternative. If you are trying to make a slider.
The usual approach is to animate a frame out and animate a frame in.
This is what makes the slide effect, and the fade effect work. Your example fades in. Which is fine, but maybe not what you really want once you see it working.
If what you really want is to animate images in and ...OUT you need something a little more complex.
To animate images in and out you must use an image element for each, then flip one out and flip one in. The images need to be placed on top of each other in the case of a fade, if you want to slide you lay them beside each other.
Your slideshow function then works the magic, but before you can do that you need to add all those images in your array into the dom, this is called dynamic dom injection and it's really cool.
Make sure you check the fiddle for the full working demo and code it's linked at the bottom.
HTML
<div id="slider">
// ...we will dynamically add your images here, we need element for each image
</div>
JS
var curIndex = 0,
imgDuration = 3000,
slider = document.getElementById("slider"),
slides = slider.childNodes; //get a hook on all child elements, this is live so anything we add will get listed
imgArray = [
'http://placehold.it/300x200',
'http://placehold.it/200x100',
'http://placehold.it/400x300'];
//
// Dynamically add each image frame into the dom;
//
function buildSlideShow(arr) {
for (i = 0; i < arr.length; i++) {
var img = document.createElement('img');
img.src = arr[i];
slider.appendChild(img);
}
// note the slides reference will now contain the images so we can access them
}
//
// Our slideshow function, we can call this and it flips the image instantly, once it is called it will roll
// our images at given interval [imgDuration];
//
function slideShow() {
function fadeIn(e) {
e.className = "fadeIn";
};
function fadeOut(e) {
e.className = "";
};
// first we start the existing image fading out;
fadeOut(slides[curIndex]);
// then we start the next image fading in, making sure if we are at the end we restart!
curIndex++;
if (curIndex == slides.length) {
curIndex = 0;
}
fadeIn(slides[curIndex]);
// now we are done we recall this function with a timer, simple.
setTimeout(function () {
slideShow();
}, imgDuration);
};
// first build the slider, then start it rolling!
buildSlideShow(imgArray);
slideShow();
Fiddle:
http://jsfiddle.net/f8d1js04/2/

you can use this code
var fadeEffect=function(){
return{
init:function(id, flag, target){
this.elem = document.getElementById(id);
clearInterval(this.elem.si);
this.target = target ? target : flag ? 100 : 0;
this.flag = flag || -1;
this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
},
tween:function(){
if(this.alpha == this.target){
clearInterval(this.elem.si);
}else{
var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
this.elem.style.opacity = value / 100;
this.elem.style.filter = 'alpha(opacity=' + value + ')';
this.alpha = value
}
}
}
}();
this is how to use it
fadeEffect.init('fade', 1, 50) // fade in the "fade" element to 50% transparency
fadeEffect.init('fade', 1) // fade out the "fade" element

Much shorter answer:
HTML:
<div class="js-slideshow">
<img src="[your/image/path]">
<img src="[your/image/path]" class="is-shown">
<img src="[your/image/path]">
</div>
Javascript:
setInterval(function(){
var $container = $('.js-slideshow'),
$currentImage = $container.find('.is-shown'),
currentImageIndex = $currentImage.index() + 1,
imagesLength = $container.find('img').length;
$currentImage.removeClass('is-shown');
$currentImage.next('img').addClass('is-shown');
if ( currentImageIndex == imagesLength ) {
$container.find('img').first().addClass('is-shown');
}
}, 5000)
SCSS
.promo-banner {
height: 300px;
width: 100%;
overflow: hidden;
position: relative;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: -10;
transition: all 800ms;
&.is-shown {
transition: all 800ms;
opacity: 1;
z-index: 10;
}
}
}

Click to change images with an ease transition

I have a hero image that changes with the click of an arrow button (previous / next). This part works well, however the change is sharp. I'm trying to add an ease transition between each image so that they quickly fade in or out. Is there a simple way to do this using the JS below? I'm a beginner. Thanks!
<script>
$( document ).ready(function() {
var images = [
"tophalf-b.jpg",
"tophalf-a.jpg",
];
var imageIndex = 0;
$("#previous").on("click", function(){
imageIndex = (imageIndex + images.length -1) % (images.length);
$("#image").attr('src', images[imageIndex]);
});
$("#next").on("click", function(){
imageIndex = (imageIndex+1) % (images.length);
$("#image").attr('src', images[imageIndex]);
});
$("#image").attr(images[0]);
});
</script>

Since a src change cannot be transformed on a single IMGElement, you need to create all your images upfront. Such will also prevent to see flashes of white when the next image is still being loaded by the browser.
Use GPU accelerated CSS transition and CSS transform, to animate your opacity property of your images.
Use JS just to toggle a CSS ".is-active" class, that in return will fade your images:
jQuery(($) => {
const images = [
"https://placehold.it/150x150/0bf?text=One",
"https://placehold.it/300x150/bf0?text=Two",
"https://placehold.it/300x150/fb0?text=Three",
];
const $img = $(images.map((src) => $("<img>", {src: src})[0])); // Generate IMGs
const $gal = $("#images").append($img); // Append them to a parent
const tot = images.length;
const anim = () => $img.removeClass("is-active").eq(idx).addClass("is-active");
let idx = 0;
$("#prev").on("click", () => {
idx = (idx + tot - 1) % tot;
anim();
});
$("#next").on("click", () => {
idx = (idx + 1) % tot;
anim();
});
anim(); // Init Animate!
});
#images {
height: 150px;
position: relative;
}
#images img {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain; /* Scale image to fit parent element */
pointer-events: none;
opacity: 0;
transition: opacity 0.4s; /* Use GPU accelerated properties */
}
#images img.is-active {
opacity: 1;
pointer-events: auto;
}
<div id="images"></div>
<button type="button" id="prev">←</button>
<button type="button" id="next">→</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Sure.
$("#previous").on("click", function(){
$("#image").fadeOut(500, (function() {
imageIndex = (imageIndex + images.length -1) % (images.length);
$("#image").attr('src', images[imageIndex]);
}));
$("#image").fadeIn();
});
500 is a time of animation. Next, the callback function where we change the image. Finally, fade in image element.
If you want a 'crossfade' then go to the page.

Hide scroll bar when page preloader loads

I want to hide scroll bar while preloader is loading the scroll bar will not show until unless preloader disappears which means the user can't able to scroll the page while preloader is loading here I'm using canvas as a preloader. I tried by using body overflow: hidden and some CSS also but unable to achieve the result here I used canvas effect as a preloader. Can anyone point me in the right direction what I'm doing wrong?
/* Preloader Effect */
var noise = function(){
//const noise = () => {
var canvas, ctx;
var wWidth, wHeight;
var noiseData = [];
var frame = 0;
var loopTimeout;
// Create Noise
const createNoise = function() {
const idata = ctx.createImageData(wWidth, wHeight);
const buffer32 = new Uint32Array(idata.data.buffer);
const len = buffer32.length;
for (var i = 0; i < len; i++) {
if (Math.random() < 0.5) {
buffer32[i] = 0xff000000;
}
}
noiseData.push(idata);
};
// Play Noise
const paintNoise = function() {
if (frame === 9) {
frame = 0;
} else {
frame++;
}
ctx.putImageData(noiseData[frame], 0, 0);
};
// Loop
const loop = function() {
paintNoise(frame);
loopTimeout = window.setTimeout(function() {
window.requestAnimationFrame(loop);
}, (1000 / 25));
};
// Setup
const setup = function() {
wWidth = window.innerWidth;
wHeight = window.innerHeight;
canvas.width = wWidth;
canvas.height = wHeight;
for (var i = 0; i < 10; i++) {
createNoise();
}
loop();
};
// Reset
var resizeThrottle;
const reset = function() {
window.addEventListener('resize', function() {
window.clearTimeout(resizeThrottle);
resizeThrottle = window.setTimeout(function() {
window.clearTimeout(loopTimeout);
setup();
}, 200);
}, false);
};
// Init
const init = (function() {
canvas = document.getElementById('noise');
ctx = canvas.getContext('2d');
setup();
})();
};
noise();
$(document).ready(function(){
$('body').css({
overflow: 'hidden'
});
setTimeout(function(){
$('#preloader').fadeOut('slow', function(){
$('body').css({
overflow: 'auto'
});
});
}, 5000);
});
#preloader {
position: fixed;
height: 100vh;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
/* change if the mask should have another color then white */
z-index: 10000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="preloader">
<canvas id="noise" class="noise"></canvas>
</div>

Try these Codes, If it works for you. I found this on StackOverflow. Source: Disable scrolling when preload a web page
Js Code
$(window).load(function() {
$(".preloader").fadeOut(1000, function() {
$('body').removeClass('loading');
});
});
Css Code
.loading {
overflow: hidden;
height: 100vh;
}
.preloader {
background: #fff;
position: fixed;
text-align: center;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.preloader4 {
position: absolute;
margin: -17px 0 0 -17px;
left: 50%;
top: 50%;
width:35px;
height:35px;
padding: 0px;
border-radius:100%;
border:2px solid;
border-top-color:rgba(0,0,0, 0.65);
border-bottom-color:rgba(0,0,0, 0.15);
border-left-color:rgba(0,0,0, 0.65);
border-right-color:rgba(0,0,0, 0.15);
-webkit-animation: preloader4 0.8s linear infinite;
animation: preloader4 0.8s linear infinite;
}
#keyframes preloader4 {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#-webkit-keyframes preloader4 {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body class="loading">
<div class="preloader">
<div class="preloader4"></div>
</div>
//Code
</body>

You need to set overflow: hidden and height: 100vh both on the body and the html tags.
/* Preloader Effect */
var noise = function(){
//const noise = () => {
var canvas, ctx;
var wWidth, wHeight;
var noiseData = [];
var frame = 0;
var loopTimeout;
// Create Noise
const createNoise = function() {
const idata = ctx.createImageData(wWidth, wHeight);
const buffer32 = new Uint32Array(idata.data.buffer);
const len = buffer32.length;
for (var i = 0; i < len; i++) {
if (Math.random() < 0.5) {
buffer32[i] = 0xff000000;
}
}
noiseData.push(idata);
};
// Play Noise
const paintNoise = function() {
if (frame === 9) {
frame = 0;
} else {
frame++;
}
ctx.putImageData(noiseData[frame], 0, 0);
};
// Loop
const loop = function() {
paintNoise(frame);
loopTimeout = window.setTimeout(function() {
window.requestAnimationFrame(loop);
}, (1000 / 25));
};
// Setup
const setup = function() {
wWidth = window.innerWidth;
wHeight = window.innerHeight;
canvas.width = wWidth;
canvas.height = wHeight;
for (var i = 0; i < 10; i++) {
createNoise();
}
loop();
};
// Reset
var resizeThrottle;
const reset = function() {
window.addEventListener('resize', function() {
window.clearTimeout(resizeThrottle);
resizeThrottle = window.setTimeout(function() {
window.clearTimeout(loopTimeout);
setup();
}, 200);
}, false);
};
// Init
const init = (function() {
canvas = document.getElementById('noise');
ctx = canvas.getContext('2d');
setup();
})();
};
noise();
$(document).ready(function(){
$('body, html').css({
overflow: 'hidden',
height: '100vh'
});
setTimeout(function(){
$('#preloader').fadeOut('slow', function(){
$('body, html').css({
overflow: 'auto',
height: 'auto'
});
});
}, 5000);
});
#preloader {
position: fixed;
height: 100vh;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
/* change if the mask should have another color then white */
z-index: 10000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="preloader">
<canvas id="noise" class="noise"></canvas>
</div>

Set the position of body as fixed and when the page is loaded, remove that.
document.body.style.position = "fixed";
window.addEventListener("load", () => {
document.body.style.position = "";
document.querySelector(".preloader").style.display = "none";
});

How do I create png button animation with javascript?

I'm a graphic designer in Portugal, used to work with code everyday, like css, html and a bit javascript and php. I am currently developing an interactive logo button, but it has to be PNG to look the way I want. This is the javascript code on html (image is hosted in my website):
I want to create a mouseclick start and stop on last/first frame, not a infinite loop like this, and reversed animation after click to open/close. Basically, the lock and unlock of the padlock.
The point of this animation is to open a menu nav-bar under the logo. Can you help me?
My code:
var cSpeed = 5;
var cWidth = 200;
var cHeight = 145;
var cTotalFrames = 7;
var cFrameWidth = 200;
var cImageSrc = 'https://www.studiogo.net/sprites.png';
var cImageTimeout = false;
var cIndex = 0;
var cXpos = 0;
var SECONDS_BETWEEN_FRAMES = 0;
function startAnimation() {
document.getElementById('loaderImage').style.backgroundImage = 'url(' + cImageSrc + ')';
document.getElementById('loaderImage').style.width = cWidth + 'px';
document.getElementById('loaderImage').style.height = cHeight + 'px';
//FPS = Math.round(100/(maxSpeed+2-speed));
FPS = Math.round(100 / cSpeed);
SECONDS_BETWEEN_FRAMES = 1 / FPS;
setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES / 1000);
}
function continueAnimation() {
cXpos += cFrameWidth;
//increase the index so we know which frame of our animation we are currently on
cIndex += 1;
//if our cIndex is higher than our total number of frames, we're at the end and should restart
if (cIndex >= cTotalFrames) {
cXpos = 0;
cIndex = 0;
}
document.getElementById('loaderImage').style.backgroundPosition = (-cXpos) + 'px 0';
setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES * 1000);
}
function imageLoader(s, fun) //Pre-loads the sprites image
{
clearTimeout(cImageTimeout);
cImageTimeout = 0;
genImage = new Image();
genImage.onload = function() {
cImageTimeout = setTimeout(fun, 0)
};
genImage.onerror = new Function('alert(\'Could not load the image\')');
genImage.src = s;
}
//The following code starts the animation
new imageLoader(cImageSrc, 'startAnimation()');
<div id="loaderImage"></div>

Please, see if this is what you want.
$(document).ready(function () {
$(".lock").click(function () {
var $self = $(this);
if ($self.hasClass("closed")) {
$self.removeClass("close");
setTimeout(function () {
$self.addClass("open").removeClass("closed");
}, 100);
} else {
$self.removeClass("open");
setTimeout(function () {
$self.addClass("close").addClass("closed");
}, 100);
}
});
});
div.lock {
background-image: url('https://www.studiogo.net/sprites.png');
width: 200px;
height: 145px;
background-position: 0 center;
background-repeat: no-repeat;
}
div.closed {
background-position: -1200px center;
}
div.close {
animation: close-animation 300ms steps(6, start); // 1200px / 200px = 6
}
div.open {
animation: close-animation 300ms steps(6, end); // 1200px / 200px = 6
animation-fill-mode: backwards;
animation-direction: reverse;
}
#keyframes close-animation {
from {
background-position: 0 center;
}
to {
background-position: -1200px center;
}
}
<div class="lock closed">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

how can I get my progress bar to last for exactly 20 seconds?

I need my progress bar to last for exactly 20 seconds.
when it completes the bar, it still needs to be able to refresh, like it does now.
I need to be able to put the exact number of seconds in my code.
here's my code:
<div id="pbar_outerdiv">
<div id="pbar_innerdiv"></div>
<!--<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: black; font-weight: bold; text-align: center;"></div>-->
</div>
<script>
var timer = 0,
perc = 0,
timeTotal = 2500,
timeCount = 1,
cFlag;
function updateProgress(percentage) {
var x = (percentage/timeTotal)*100,
y = x.toFixed(3);
if(y === "100.000")
window.location.reload(1);
$('#pbar_innerdiv').css("width", x + "%");
//$('#pbar_innertext').text(y + "%");
}
function animateUpdate() {
if(perc < timeTotal) {
perc++;
updateProgress(perc);
timer = setTimeout(animateUpdate, timeCount);
}
}
$(document).ready(function() {
$('#pbar_outerdiv').click(function() {
if (cFlag == undefined) {
clearTimeout(timer);
perc = 0;
cFlag = true;
animateUpdate();
}
else if (!cFlag) {
cFlag = true;
animateUpdate();
}
else {
clearTimeout(timer);
cFlag = false;
}
});
$( "#pbar_outerdiv" ).trigger( "click" );
});
</script>

You're using jQuery. Instead of reinventing the wheel, you can do everything you're attempting there with just:
var duration = 20 * 1000; // = 20 seconds
$(document).ready(function() {
$outer = $("#pbar_outerdiv");
$outer.click(function() {
$('#pbar_innerdiv')
.stop()
.css({ width: 0 })
.animate({ width: "100%" }, duration, "linear", function() { window.location.reload(1); });
})
$outer.trigger("click");
});
Working demo