Develop Reference

How to Fade-in 2 images simultaneously using JS?

Already tried answer - jQuery Fade Images simultaneously
I have 2 divisions with 2 different images and i want them to load after i scroll down to that section, only 1 image is fading-in after i apply the same function to both images.
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn()
{
setInterval(show, 200);
}
function show()
{
var star11 = document.getElementById("star1");
opacity = Number(window.getComputedStyle(star11).getPropertyValue("opacity"));
if (opacity < 1)
{
opacity = opacity + 0.1;
star11.style.opacity = opacity
}
else
{
clearInterval(intervalID);
}
}
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn()
{
setInterval(show, 200);
}
function show()
{
var star22 = document.getElementById("star2");
opacity = Number(window.getComputedStyle(star22).getPropertyValue("opacity"));
if (opacity < 1)
{
opacity = opacity + 0.1;
star22.style.opacity = opacity
}
else
{
clearInterval(intervalID);
}
}
#star1{
opacity:0;
width:100px;
height:100px;
float:left;
}
#star2{
opacity:0;
width:100px;
height:100px;
float:right;
}
<div>
<img id="star1" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="star123">
</div>
<div>
<img id="star2" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="123star">
</div>
P.S - I am new to JS/JQuery.
Thank You

You are declaring the function show twice. So ehat happens here is that the first function that you defined for the first star will be over written by the second function written for the second star and hence the styles for the second star only works. Function defenition is just like variable assigning. The variable name taks the latest value for which that is assigned and will neglect the previous values when define multiple times.
So what I suggest is to decalre the function only once and pass the id as a parameter.
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn() {
setInterval(() => show('star1'), 200);
setInterval(() => show('star2'), 200);
}
function show(starId) {
var star = document.getElementById(starId);
opacity = Number(
window.getComputedStyle(star).getPropertyValue("opacity")
);
if (opacity < 1) {
opacity = opacity + 0.1;
star.style.opacity = opacity;
} else {
clearInterval(intervalID);
}
}
#star1 {
opacity: 0;
width: 100px;
height: 100px;
float: left;
}
#star2 {
opacity: 0;
width: 100px;
height: 100px;
float: right;
}
<div>
<img
id="star1"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="star123"
/>
</div>
<div>
<img
id="star2"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="123star"
/>
</div>
Update
Handling scroll events.
I have refered this answer to prepare the javascript/jquery solution for scroll
$(document).ready(function () {
$(window).scroll(function () {
console.log("Scroll");
triggerScrollListner("star1");
triggerScrollListner("star2");
});
});
function triggerScrollListner(id) {
var hT = $(`#${id}`).offset().top,
hH = $(`#${id}`).outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > hT + hH - wH) {
setInterval(() => show(id), 200);
}
}
var opacity = 0;
var intervalID = 0;
function show(starId) {
var star = document.getElementById(starId);
opacity = Number(
window.getComputedStyle(star).getPropertyValue("opacity")
);
if (opacity < 1) {
opacity = opacity + 0.1;
star.style.opacity = opacity;
} else {
clearInterval(intervalID);
}
}
body {
height: 1000px;
}
#star1 {
opacity: 0;
width: 100px;
height: 100px;
float: left;
}
#star2 {
opacity: 0;
width: 100px;
height: 100px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>
<img
id="star1"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="star123"
/>
</div>
<div>
<img
id="star2"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="123star"
/>
</div>
More generic solution with multiple stars
Since there was only one row, the visualiztion is a little hard. In this example I have added multiple rows and have made a little bit more visual.
$(document).ready(function () {
$(window).scroll(function () {
triggerScrollListner("star1");
triggerScrollListner("star2");
triggerScrollListner("star3");
triggerScrollListner("star4");
});
});
function triggerScrollListner(id) {
var hT = $(`#${id}`).offset().top,
hH = $(`#${id}`).outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > hT + hH - wH) {
setInterval(() => show(id), 200);
}
}
var opacity = 0;
var intervalID = 0;
function show(starId) {
var star = document.getElementById(starId);
opacity = Number(
window.getComputedStyle(star).getPropertyValue("opacity")
);
if (opacity < 1) {
opacity = opacity + 0.1;
star.style.opacity = opacity;
} else {
clearInterval(intervalID);
}
}
.star {
opacity: 0;
width: 100px;
height: 100px;
}
.container1, .container2 {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
flex-direction: row;
}
.container2 {
margin-top: 1500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container1">
<img
id="star1"
class="star"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="star123"
/>
<img
id="star2"
class="star"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="123star"
/>
</div>
<div class="container2">
<img
id="star3"
class="star"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="star123"
/>
<img
id="star4"
class="star"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="123star"
/>
</div>

Just fiddled around into the code
Needed only 1 function and changed code in js only.
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn()
{
setInterval(show, 200);
}
function show()
{
var star11 = document.getElementById("star1");
var star22 = document.getElementById("star2");
opacity =
Number(window.getComputedStyle(star22).getPropertyValue("opacity"));
opacity =
Number(window.getComputedStyle(star11).getPropertyValue("opacity"));
if (opacity < 1)
{
opacity = opacity + 0.1;
star11.style.opacity = opacity
star22.style.opacity = opacity
}
else
{
clearInterval(intervalID);
}
}

How to crossfade images in .js slideshow

So this is my slideshow div:
<div class="header">
<img name="slide" class="slide">
</div>
the css for it:
.slide{
width: 80%;
height: auto;
filter: brightness(90%);
}
and the javascript:
var i = 0;
var images = [];
var time = 4000;
images[0] = '1.png';
images[1] = '2.png';
images[2] = '3.png';
function changeImg() {
document.slide.src = images[i];
if (i < images.length -1) {
i++;
}
else
{
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
Now i want it to crossfade, currently its just switching the images very abruptly, but i want it smooth.
Any help?

You need to add opacity set to 0 on your css class, and then create a new class with opacity set to 1, that way you'll trigger the function to switch opacity after a specific time period has passed
<style>
.slide {
border: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
.visible {
opacity: 1;
}
</style>
<div class="header">
<img id="img0" class="slide visible" src="1.png">
<img id="img1" class="slide" src="2.png">
<img id="img2" class="slide" src="3.png">
</div>
<script>
var actual = 0;
var total = 3;
function addClass(elem, name) {
elem.className = elem.className + " " + name;
}
function deleteClass(elem, name) {
var c = elem.className;
elem.className = c.replace(name, "").replace(/ /g, " ").replace(/^ | $/g, "");
}
function nextImg() {
var e;
e = document.getElementById("img" + actual);
deleteClass(e, "visible");
actual++;
if (actual > total - 1) actual = 0;
e = document.getElementById("img" + actual);
addClass(e, "visible");
}
var slider = setInterval(nextImg, 4000);
</script>

While I like Joe's answer, here is one that uses JavaScript without adding or removing classes:
I gave the <img> an id for ease of reference here:
<img id='slideShow' name="slide" class="slide">
JavaScript:
function fadeImg(elem, total, step, speed){
step=step||5;
speed=speed||50;
var iter=0;
var fadeOutTime=(100/step)*speed;
var time=total;
var n = 0;
var opacity;
elem.src=images[n];
var fadeInterval=setInterval(function(){
time=time-speed;
opacity=iter/100;
if(time>fadeOutTime&&opacity<1){
iter=iter+step;
} else if(time<=fadeOutTime&&time>0&&opacity>0){
iter=iter-step;
} else if(time<=0){
n<images.length-1?n++:n=0;
elem.src=images[n];
time=total;
}
elem.style.opacity=opacity;
elem.style.filter= 'alpha(opacity=' +opacity*100 + ')';
},speed);
}
window.onload = fadeImg(document.getElementById('slideShow'),time);
I borrowed the interval concept from here: https://stackoverflow.com/a/2207751/6661052

How make slide to auto play and change swap to fade in JavaScript

Hi guys I am new in JavaScript I have a image slider here I want the Image Slider to auto play and change swap to fade effect. How can I change this?
My current JavaScript code is below
$('#banner .banner-bg').each(function() {
var self = $(this),
images = self.find('.banner-bg-item');
// SET BG IMAGES
images.each(function() {
var img = $(this).find('img');
if (img.length > 0) {
$(this).css('background-image', 'url(' + img.attr('src') + ')');
img.hide();
}
});
// INIT SLIDER
if ($.fn.owlCarousel) {
self.owlCarousel({
slideSpeed: 500,
pagination: true,
navigation: true,
paginationSpeed: 200,
singleItem: true,
autoPlay:true,
animateIn: 'fadeIn',
navigationText: [
"<i class='fa fa-angle-left'></i>",
"<i class='fa fa-angle-right'></i>"
],
addClassActive: true,
afterMove: function() {
// ACTIVATE TAB
var active_index = self.find('.owl-item.active').index();
$('.banner-search-inner .tab-title:eq(' + active_index + ')').trigger('click');
}
});
}
// SET DEFAULT IF NEEDED
var active_tab_index = $('.banner-bg-item.active, .banner-search-inner .tab-title.active').index();
if (active_tab_index !== 0) {
self.trigger('owl.jumpTo', active_tab_index);
}
});
$('.banner-search-inner').each(function() {
var self = $(this),
tabs = self.find('.tab-title'),
contents = self.find('.tab-content');
// TAB CLICK
tabs.click(function() {
if (!$(this).hasClass('active')) {
var index = $(this).index();
tabs.filter('.active').removeClass('active');
$(this).addClass('active');
contents.filter('.active').hide().removeClass('active');
contents.filter(':eq(' + index + ')').fadeToggle().addClass('active');
// CHANGE BG
if ($.fn.owlCarousel) {
$('#banner .banner-bg').trigger('owl.goTo', index);
}
}
});
});
Below Is the HTML code
<div class="banner-bg">
<div class="banner-bg-item active"><img src="img/banner-bg-1.jpg" alt="" class="img-responsive"></div>
<div class="banner-bg-item"><img src="img/banner-bg-2.jpg" alt="" class="img-responsive"></div>
</div>

You can use CSS animation for that and switch between the slides with javascript. I wrote this code for you and you can use play, stop, next and prev button to navigate. You can use img tag inside slide div if you like image inside your slide.
var slideIn = 0;
function prev() {
var slide = document.querySelectorAll('.slide'),
prevSlide = (typeof slide[slideIn-1] !== 'undefined')? slideIn-1 : slide.length-1;
if (slide[prevSlide] && slide[slideIn]){
slide[slideIn].className = 'slide out';
slide[prevSlide].className = 'slide in';
slideIn = prevSlide;
}
}
function next() {
var slide = document.querySelectorAll('.slide'),
nextSlide = (typeof slide[slideIn+1] !== 'undefined')? slideIn+1 : 0;
if (slide[nextSlide] && slide[slideIn]){
slide[slideIn].className = 'slide out';
slide[nextSlide].className = 'slide in';
slideIn = nextSlide;
}
}
var playInterval,
PlayTimer = 1000; // 1 second
function play() {
next();
playInterval = setTimeout(play,PlayTimer);
}
function stop() {
clearTimeout(playInterval);
}
body {
padding: 0;
margin: 0;
font-family: tahoma;
font-size: 8pt;
color: black;
}
div {
height: 30px;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
div>div {
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.in {
-webkit-animation: comein 1s 1;
-moz-animation: comein 1s 1;
animation: comein 1s 1;
animation-fill-mode: both;
}
#keyframes comein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.out {
-webkit-animation: goout 1s 1;
-moz-animation: goout 1s 1;
animation: goout 1s 1;
animation-fill-mode: both;
}
#keyframes goout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div>
<div class="slide in">1st Slide content</div>
<div class="slide">2nd Slide content</div>
<div class="slide">3rd Slide content</div>
<div class="slide">4th Slide content</div>
</div>
<button onclick="prev();">Prev</button>
<button onclick="next();">Next</button>
<button onclick="play();">Play</button>
<button onclick="stop();">Stop</button>

slideshow is not working properly

I am building a website in which on header div i want to add a slideshow.My code took and display the first Image but the slider did not work i put all the images in images folder here the .html file is
<html>
<head>
<title>slideshow</title>
</head>
<body>
<img scr ="image/slider1.jpg" id = "img"/>
<script language="javascript" type="text/javascript" scr="slideshow.js"></script>
</body>
and my .js file is this
var myImage = doucoment.getElementById("img");
var ImageArray = ["slider1.jpg", "slider2.jpg", "slider3.jpg"];
ImageIndex = 0;
function changeImage() {
img.setAttribute("src", ImageArray[ImageIndex]);
ImageIndex++;
if (ImageIndex >= ImageArray.length){
ImageIndex = 0;
}
}
var ImageHandle = setInterval(changeImage, 3000);

You have a typo in your HTML and JavaScript..
Change
scr to src
And
doucoment to document
Here is modified snippet.
var myImage = document.getElementById("img");
// ^^^^^^^ typo here.
var ImageArray = ["https://www.google.com.pk/logos/doodles/2016/2016-doodle-fruit-games-day-8-5666133911797760.3-hp.gif", "http://reservations.life/css/images/bg-01.jpg"];
ImageIndex = 0;
function changeImage(){
img.setAttribute("src", ImageArray[ImageIndex]);
ImageIndex++;
if(ImageIndex >= ImageArray.length){
ImageIndex = 0;
}
}
var ImageHandle = setInterval(changeImage,3000);
img{
width:400px;
height:200px;
}
// ||| typo here.
<img src ="https://www.google.com.pk/logos/doodles/2016/2016-doodle-fruit-games-day-8-5666133911797760.3-hp.gif" id = "img"/>

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
}
#slides {
position: relative;
height: 300px;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.showing {
opacity: 1;
z-index: 2;
}
<ul id="slides">
<li class="slide showing">Slide 1</li>
<li class="slide">Slide 2</li>
<li class="slide">Slide 3</li>
<li class="slide">Slide 4</li>
<li class="slide">Slide 5</li>
</ul>

HTML:
scr ="image/slider1.jpg"
scr="slideshow.js"
turn 'scr' into 'src'
JS:
doucoment.getElementById("img")
turn 'doucoment' into 'document'

Rotating Background Image with jQuery

I am trying to rotate the background image of a div with jquery. It works fine but the content within the div disappears when the image rotates. How can i prevent the content from disappering and make it such the it is always present:
Code:
jQuery(document).ready(function($) {
$(window).load(function() {
var i =0;
var images = ['http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image2.png','http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image3.png','http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png'];
var image = $('#slideit');
image.css('background-image', 'url(http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png)');
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
})
});
Fiddle HERE

You can make it like this http://jsfiddle.net/frzssoyw/3/
<div id="slideit">
<div id="slideit-bg"></div>
<div id="slideit-content">
some content
</div>
</div>

You can use position: absolute; on images.
I edited your JSFiddle using position: absolute;.
HTML:
<div id="slideit" style="width:700px;height:391px;">
<div class="slideit-content">some content</div>
<img class="img-rotate active" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image2.png" />
<img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image3.png" />
<img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png" />
</div>
CSS:
.img-rotate {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 391px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.img-rotate.active {
opacity: 1;
}
.slideit-content {
z-index: 10;
position: relative;
}
JS:
jQuery(function($) {
var i = 0,
image = $('#slideit'),
images = image.find(".img-rotate"),
images_count = images.length,
next_image;
setInterval(function(){
i = (i+1) % images_count;
next_image = images.eq(i);
images.filter(".active").removeClass("active");
next_image.addClass("active");
}, 5000);
});