I was wondering how you make a background slideshow fade into other photos like a regular slideshow. I've tried many codes and have yet to be successful.
Now, I have a code to make the background change to different photos which works well, but it doesn't fade. Is there anyway to add this?
Here is the code
<html>
<head>
<style>
body{
/*Remove below line to make bgimage NOT fixed*/
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
/*Use center center in place of 300 200 to center bg image*/
background-position: 0 0; background-
}
</style>
<script language="JavaScript1.2">
//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com
//Specify background images to slide
var bgslides=new Array()
bgslides[0]="http://i892.photobucket.c…
bgslides[1]="http://i892.photobucket.c…
bgslides[2]="http://i892.photobucket.c…
//Specify interval between slide (in miliseconds)
var speed=2000
//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}
var inc=-1
function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.body.background=processed[inc…
}
if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",spee…
</script>
</head>
</html>
If you have any suggestions please let me know. Also, I am not the greatest at coding and don't have a clue about JavaScript, so please explain what to do.
Working example on jsFiddle.
Use this code instead: (note that you'll need to load jQuery in order for this code to work)
HTML
<div class="fadein">
<img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">
<img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">
<img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">
<img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">
<img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg">
</div>
CSS
.fadein {
position:relative;
height:320px;
width:320px;
}
.fadein img {
position:absolute;
left:0;
top:0;
}
JavaScript
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
});
</script>
Inside the Css:
width: 100%;
height: 100%;
position: fixed;
Related
In this code below I use clip path and the mouse to create a flashlight effect with your mouse and you can use it to look around an image and this works perfectly fine.
However I'm wondering how to create a JavaScript function to stop this happening and just display the whole image without the flashlight effect. This would be attached to the button turn on light.
I have tried and the closest I've got is that it shows the image fine but goes back to the flashlight after I move the mouse.
Any code on how to stop this and a bit of explanation how its stoping the effect would be great
So I want the flashlight effect to stop working when I click the button
<html>
<head>
<style>
.image {
width:600px;
height:400px;
border:5px solid black;
cursor:none;
}
.image .torch {
width:600px;
height:400px;
background:url("back.jpg") center no-repeat;
background-size:cover;
clip-path:circle(30% at 0% 0%);
}
</style>
<script>
function moveTorch(event){
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = `circle(30% at ${event.offsetX}px ${event.offsetY}px)`;
}
function turnOn(){
}
</script>
</head>
<body>
<div class="image" onmousemove="moveTorch(event)">
<div class="torch">
<button onclick="turnOn();">Turn on Light</button>
></div>
</div>
</body>
</html>
Try this code:
<html>
<head>
<style>
.image {
width:600px;
height:400px;
border:5px solid black;
cursor:none;
}
.image .torch {
width:600px;
height:400px;
background:url("back.jpg") center no-repeat;
background-size:cover;
clip-path:circle(30% at 0% 0%);
}
</style>
<script>
var flashLightOn = false;
function moveTorch(event){
if (!flashLightOn) {
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = `circle(30% at ${event.offsetX}px ${event.offsetY}px)`;
}
}
function turnOn(){
flashLightOn = true;
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = "none";
}
</script>
</head>
<body>
<div class="image" onmousemove="moveTorch(event)">
<div class="torch">
<button onclick="turnOn();">Turn on Light</button>
>
</div>
</div>
</body>
</html>
Basically it stores the flash liste state (on/off) in a variable. When on, the event that makes the flash light effect does nothing (if flashLightOn statement).
When you click on the button, the flashLightOn value is set to false, and the style of the "torch" is reset to default to disable the light effect.
Heyo,
I'm currently working on a background slider but I can't make it work as I want it to work.
So what I need is a fade-effect which produces no white space between the images.
So ... the following image should fadeIn but the current image should just stay and fadeOut when the fadeIn effect of the following image is done. (If that makes sense)
This is the current script I'm using:
$(document).ready(function(){
var count = 1;
var images = [ "http://i.imgur.com/HX0X6lV.png", "http://i.imgur.com/N50Ye7i.png", "http://i.imgur.com/TFG5oaa.png"];
var image = $(".background");
setInterval(function(){
image.fadeOut(500, function(){
image.css("background-image","url("+images[count++]+")");
image.fadeIn(500);
});
if(count == images.length)
{
count = 0;
}
},3000);
});
.background {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background-size: cover;
background-position: center center;
background-image: url("http://i.imgur.com/HX0X6lV.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>
Question
Can someone please look at the code and tell me if I'm doing something that's driving up CPU usage in Firefox or if this is a Firefox bug? It's driving me mental at this point and I'm pretty much out of ideas. Hardware acceleration is enabled in Firefox.
I have tried the same animation in Chrome, Chromium and PaleMoon without any issues. The CPU usage in all browsers except Firefox doesn't change all that much even after the animation's been running for over an hour but in Firefox, as soon as the animation starts, CPU usage jumps straight to over 90% and keeps rising (even if the tab is closed) until it reaches 100%. The only way to stop CPU usage is to kill Firefox altogether.
Hardware and OS
I am using a laptop with a core i7-4700mq processor, 16 GB RAM, 500 GB SSD and a 1 TB HDD.
I am using Kubuntu 16.04 (with the KDE Project Neon repository added) and the kernel upgraded to 4.10.10.
Slideshow Description
The slideshow is quite simple and is supposed to:
Image is faded in.
This is achieved by using jQuery fadeIn().
Image starts to zoom in
This is achieved by using CSS3 transition. A class is added to the image in jQuery which sets the width of the image to 120% and its left coordinates to -10%.
If I remove this step, the animation runs perfectly and Firefox's CPU utilization does not change at all.
After a set interval, the image is then faded out
This is done using jQuery fadeOut(). Once the div containing the image is faded out, the CSS class responsible for zooming in is removed from the image.
Another image is faded in while the previous image is fading out
This is done using jQuery fadeIn(). Once the div has been faded in, the zoom in CSS class is added to the image.
Working Sample
You can find a working sample of the slideshow on codepen
Code
HTML
<div class="slideshow">
<div class="slide" id="slide-1">
<img class="slide-img" id="slide_img-1" data-src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Proboscis_monkey_%28Nasalis_larvatus%29_female_Labuk_Bay.jpg"/>
</div>
<div class="slide" id="slide-2">
<img class="slide-img" id="slide_img-2" data-src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Saffron_finch_%28Sicalis_flaveola%29_male.JPG"/>
</div>
</div>
CSS
.slideshow{
width: 100%;
overflow: hidden;
}
.slide{
width: 100%;
overflow: hidden;
position: absolute;
text-align: center;
background-position: center;
background-repeat: no-repeat;
}
.slide img{
position: relative;
margin-left:0px;
width:100%;
min-width:100%;
transition: all 8s;
}
.slide_zoom{
width: 120%!important;
margin-left: -10%!important;
}
Javascript
var current=1;
var prev=1;
var counter=0;
var slide_duration=8000;
var transition_duration=700;
var interval;
var width=($(window).width()+200)+'px';
$(function(){
function slideshow_play(){
console.log(current);
$('#slide-'+current).fadeOut(transition_duration,function(){
$('#slide_img-'+prev).removeClass('slide_zoom');
});
prev=current;
if (current<$('.slide').length){
current=current+1;
}
else{
current=1;
}
$('#slide-'+current).fadeIn(transition_duration, function(){
$('#slide_img-'+current).addClass('slide_zoom');
});
}
$('.slide').each(function(){
var img=$(this).find('img');
var src=$(img).data('src');
var image=new Image();
image.src=src;
image.onload=function(){
counter+=1;
img.prop('src', this.src);
if (counter==($('.slide').length)){
$('#slide-'+current).fadeIn(500);
var timeout=window.setTimeout(function(){
$('#slide_img-'+current).addClass('slide_zoom');
interval=window.setInterval(function(){ slideshow_play(); }, slide_duration);
},500);
}
}
});
});
Animating width and left is not performant, using transform is.
Here is an updated Codepen and a Stack snippet, where I removed the width/left and added transform: scale(1.2) and transform-origin: center top;
I also recommend you use CSS animations/transitions as much as possible, i.e. by toggeling classes, as they, in general, are more performant than script based are.
var current=1;
var prev=1;
var counter=0;
var slide_duration=8000;
var transition_duration=700;
var interval;
var width=($(window).width()+200)+'px';
$(function(){
function slideshow_play(){
console.log(current);
$('#slide-'+current).fadeOut(transition_duration,function(){
$('#slide_img-'+prev).removeClass('slide_zoom');
});
prev=current;
if (current<$('.slide').length){
current=current+1;
}
else{
current=1;
}
$('#slide-'+current).fadeIn(transition_duration, function(){
$('#slide_img-'+current).addClass('slide_zoom');
});
}
$('.slide').each(function(){
var img=$(this).find('img');
var src=$(img).data('src');
var image=new Image();
image.src=src;
image.onload=function(){
counter+=1;
img.prop('src', this.src);
if (counter==($('.slide').length)){
$('#slide-'+current).fadeIn(500);
var timeout=window.setTimeout(function(){
$('#slide_img-'+current).addClass('slide_zoom');
interval=window.setInterval(function(){ slideshow_play(); }, slide_duration);
},500);
}
}
});
});
.slideshow{
width: 100%;
overflow: hidden;
}
.slide{
width: 100%;
overflow: hidden;
position: absolute;
text-align: center;
background-position: center;
background-repeat: no-repeat;
}
.slide img{
position: relative;
margin-left:0px;
width:100%;
min-width:100%;
transition: all 8s;
transform-origin: center top;
}
.slide_zoom{
/*
width: 120%!important;
margin-left: -10%!important;
*/
transform: scale(1.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow">
<div class="slide" id="slide-1">
<img class="slide-img" id="slide_img-1" data-src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Proboscis_monkey_%28Nasalis_larvatus%29_female_Labuk_Bay.jpg"/>
</div>
<div class="slide" id="slide-2">
<img class="slide-img" id="slide_img-2" data-src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Saffron_finch_%28Sicalis_flaveola%29_male.JPG"/>
</div>
</div>
I've tried out this solution for rotating background images:
Original Article: Preloading images and transition for my simple Javascript option for CSS row
Now i'm trying to find out how to avoid the flickering if there is only one image.
I believe what you're asking for is a smooth way of loading an image. Here's an example on how to do that. If it's not what you're looking for just comment.
$("#background").load(function () {
$(this).fadeIn(500)
});
#background {
display:none;
position:fixed;
z-index:0; /* modify this number acording to how your page is layed out, so -1 will work for some webpages */
object-fit: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="background" src="http://neil.computer/stack/bg3.jpg" />
Without the fading effect:
$("#background").load(function () {
$(this).show();
});
body {
padding:0;
margin:0;
}
#background {
display:none;
position:fixed;
z-index:0; /* modify this number acording to how your page is layed out, so -1 will work for some webpages */
object-fit: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="background" src="http://neil.computer/stack/bg3.jpg" />
that's the solution - add this filter in line 9:
if (zindex == -1) return;
I am trying to implement a loader for a background image until the whole image is completely loaded using jquery. I have tried the various method to do this. Since the image is specified in the CSS I could not specify the exact image id or class. Finally I end up doing this ,
$(window).load(function() {
$(".loader").fadeOut("slow");
})
But doing this it is happening when the window is loaded. I wanted to happen it until the image is completely loaded.
And the background image comes under the following section
<div class="loader"></div>
<div class="test_banner services_banner">
</div>
It would be great if somebody give a helping hand to manage this case. Thanks in advance.
Maybe you could use a multiple background-image
example:
div {
height:90vh;
width:90vw;
background:url(http://lorempixel.com/1200/800/nature/) center,
url(http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif) center center no-repeat ;/* this works once/untill image has been loaded */
<div></div>
The Gif background remains here but is painted behi,d the big image. It is seen as long as the big image is not loaded ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Create a "Please Wait, Loading..." Animation</title>
<style>
.overlay{
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
background: rgba(255,255,255,0.8) url("http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif") center no-repeat;
}
body{
text-align: center;
}
/* Turn off scrollbar when body element has the loading class */
body.loading{
overflow: hidden;
}
/* Make spinner image visible when body element has the loading class */
body.loading .overlay{
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// Initiate an Ajax request on button click
$(document).on("click", "button", function(){
// Adding timestamp to set cache false
$.get("/examples/php/customers.php?v="+ $.now(), function(data){
//$("body").html(data);
});
});
// Add remove loading class on body element depending on Ajax request status
$(document).on({
ajaxStart: function(){
$("body").addClass("loading");
},
ajaxStop: function(){
$("body").removeClass("loading");
}
});
</script>
</head>
<body>
<button type="button">Get Customers Details</button>
<div class="overlay"></div>
</body>
</html>