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>
Related
I am cycling through background images in javascript/jQuery like this...
var duration = 2500;
var delay = 500;
var i = 0;
setInterval(function() {
if (i == 0) {
$(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");
}
if (i == 1) {
$(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");
}
if (i == 2) {
$(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");
}
if (i == 3) {
$(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");
}
i++;
}, duration + delay)
.myimage {
height: 500px;
width: 500px;
transition: background-image 1s linear;
background-image: url('https://placeimg.com/1648/1488/any');
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>
Problem is, I get flashes of no image occasionally, I think this is down to the images not being loaded in time. Is there a way to preload them?
You could preload them using CSS like:
body::after{
position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}
NOTE: You could use an array of images in the JS code and change them based on the index i.
var duration = 2500;
var delay = 500;
var i = 0;
var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];
setInterval(function() {
$(".myimage").css("background-image", "url(" + images[i] + ")");
i++;
}, duration + delay)
.myimage {
height: 500px;
width: 500px;
transition: background-image 1s linear;
background-image: url('https://placeimg.com/1648/1488/any');
background-size: cover;
}
body::after {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>
You can preload the images as followed
function preloadImages(){
var images = ["https://placeimg.com/1640/1480/any","https://placeimg.com/1640/1481/any","https://placeimg.com/1640/1482/any","https://placeimg.com/1640/1483/any"];
var prelaodedImages = [];
for(i=0;i<images.length;i++){
prelaodedImages[i] = new Image();
prelaodedImages[i].src = images[i];
console.log(prelaodedImages[i].src)
}
}
preloadImages();
After the images are preloaded you can use your code and instead of
"url('https://placeimg.com/1640/1480/any')")
You use
"url("+prelaodedImages1.src+")")
This should normally result in your images already being loaded and displaying correctly.
For the first time, browser needs to download all the images, once downloaded, it'll load from cache.
So, flashes of no image will come every time whenever browser download file. you have two options
the approach you are following (which is ok)
Use CSS trick to load all at once by using following code
.myimage {
height: 500px;
width: 500px;
transition: background-image 1s linear;
background-image: url('https://placeimg.com/1648/1480/any');
background-image: url('https://placeimg.com/1648/1481/any');
background-image: url('https://placeimg.com/1648/1482/any');
background-image: url('https://placeimg.com/1648/1483/any');
background-size: cover;
}
Once browser loads it, it wont be reloaded all the time. the second time the same image is rendered there wont be such issue,
make the image cycle using i= i==3?0:++i.
Rather than just i++
Fiddle
I need to make a carousel with a fade transition that goes black, or even better some dark grey color like #2B303A. I've found this code on the web that works perfectly, the only problem is that the fade effect is a really bright white that I don't like and it's bothering for the eyes.
How can I make it fade to black between images?
$(document).ready(function() {
//Carousel
var vet_url = ["https://i.imgur.com/Bb39Qpp.jpg", "https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg"];
var len = vet_url.length;
var i = 0;
function swapBackgrounds() {
$("#background").animate({
opacity: 0
}, 700, function() {
$($("#background")).css('background-image', 'url(' + vet_url[(i + 1) % len] + ')').animate({
opacity: 1
}, 700);
});
i++;
}
setInterval(swapBackgrounds, 10000);
});
#background {
background-color: #2B303A;
position: absolute;
z-index: 1;
min-height: 100%;
min-width: 100%;
background-image: url("https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
View on JSFiddle
you need to do it on the html element, in your test case at least.
html
{
background-color:#2B303A;
}
Setting the opacity to 0 let you see the element underneath the carousel, in this case there's nothing but the body itself. The background-color of the body wasn't set so it was the default white one. Setting the background-color to black solved the problem.
jquery's .animate does not work with background-colors though it can work with:
https://github.com/jquery/jquery-color
This site I am developing is using HTML5, CSS3, Bootstrap 4, and Jquery. I would like to have a scroll effect on a full-screen background-image that is at the very top of my page (100vh hero banner type thing). I am trying to gradually increase the contrast (css filter: contrast(some%)) of an image as the user scrolls down (its fine if the image is completely unrecognizable by the time it leaves viewport).
I have some Jquery that somewhat does the effect I am looking for, however I would like the effect to be more gradual.
The main issue I am having is that when the user scrolls back to the top of the page the contrast value gets set to 0% leaving a completely grayed out image. What I would like is for the contrast to gradually decrease back to normal (100%) as the user scrolls back up all the way to the top of the page.
I have set up a very simplified codepen. I couldn't get a css background-image url value to reference an external link from codepen, so I am targeting the effect on a full screen image ().
Thanks!
Link to the Pen: [codepen-link][1]
[1]: http://codepen.io/wdzajicek/pen/MVovZE
See code below in snippet
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = $(window).scrollTop();
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
There is the main problem in $(window).scrollTop(); it will return 0 value
that's why contrast value gets set to 0% leaving a completely grayed out image
var pixelstop = $(window).scrollTop();
replace the code with
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
don't just copy this code please understand thanks.
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
console.log(pixelstop);
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
100 is default value of filter contrast not 0. that's why the background is grey out because it reaches zero.
I am designing a bootstrap based website. I have a navigation bar and below it there is a full screen background image. I want to change the the background image after some seconds. The image is inside a header tag and has some text over it in the center. The code for header:-
<header id="image">
<div class="header-content">
<h1>Hello</h1>
</div>
</header>
The css for header:-
header {
position: relative;
width: 100%;
min-height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
background-image: url('images/1.jpg');
text-align: center;
color: white;
}
.header1 {background-image: url('images/1.jpg');}
.header2 {background-image: url('images/2.jpg');}
.header3 {background-image: url('images/3.jpg');}
The javascript i tried:-
<script type="text/javascript">
function run(interval, images) {
var int = 1;
function func() {
var d = document.getElementById("image");
d.className += "header"+int;
int++;
if(int === images) { int = 1; }
}
var swap = window.setInterval(func, interval);
}
run(5000, 3);
</script>
I tried to change the class property after an interval but it didn't work.
I want to change the background-image of the header lets say after every 10 seconds to 2.jpg and then to 3.jpg and then back to 1.jpg using plain javascript. Please provide a way as i am unable to think of a way to change the image. I would be highly grateful if anyone can help.
This will take care of what you are looking for, assuming that your images are named with digits.
var counter = 1; //instantiate a counter
var maxImage = 5; //the total number of images that are available
setInterval(function() {
document.querySelector('header').style.backgroundImage = "url('images/" + (counter + 1) + ".jpg')";
if (counter + 1 == maxImage) {
counter = 0; //reset to start
} else {
++counter; //iterate to next image
}
}, 10000);
I have a index.html where headerwrap div's css property is defined in css file which is included in index.html
HTML
<div id="headerwrap">
<div class="container">
<div class="row">
....
</div>
</div>
</div>
CSS
#headerwrap {
background: url(../img/portfolio/img1.jpg) center top;
margin: 0;
height: 100%;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
width: 100%;
bottom: 10px;
}
I have written a js function change_image to change image of div headerwrap
var image_array= ['url("../img/portfolio/img2.jpg")', 'url("../img/portfolio/img3.jpg")', 'url("../img/portfolio/img4.jpg")'];
var image_index = 0;
var change_image = function(){
$('#headerwrap').css("background", image_array[image_index]);
image_index++;
if (image_index >= image_array.length){
image_index = 0;
}
}
$(document).ready( function(){
setInterval(change_image, 5000);
});
change_image function is getting called after every 5 sec as when i see the div with firebug it looks like this
<div id="headerwrap" style="background: url("../img/portfolio/img3.jpg") repeat scroll 0% 0% transparent;">
<div class="container">
<div class="row">
....
</div>
</div>
</div>
After 5 sec div background is white and i cant see the 1st image. What changes i need to do so that i can see image rotation
I think you need to put the full URL (or relative to the page or site) in the the image_array. When you use a relative url for a background image (url('../foo.png')) in a CSS file the ../ is relative to the CSS file. However, when you set with javascript it is relative to the current page URL.
In my experience, this don't work.
Use some class style and in js change class style.
CSS:
#headerwrap {
margin: 0;
height: 100%;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
width: 100%;
bottom: 10px;
}
.background1 {
background-image: url(../img/portfolio/img1.jpg);
}
.background2 {
background-image: url(../img/portfolio/img2.jpg);
}
JS:
var class_array= ['background1', 'background2'];
var image_index = 0;
var change_image = function(){
$('#headerwrap').removeClass(class_array.join(' '));
$('#headerwrap').addClass(image_array[image_index]);
image_index++;
if (image_index >= image_array.length){
image_index = 0;
}
}
$(document).ready( function(){
setInterval(change_image, 5000);
});
Enjoy your code.
you're using the wrong quotes -
style="background: url("../img/portfolio/img3.jpg")
the style attribute is now just "background: url(" so it isn't loading.
the elements in your image_array in the js should use these quotes.
"url('../img/portfolio/img2.jpg')"
The correct syntax for changing background image is as below:
$('#element').css("background-image", "url(/myimage.jpg)");
Use:
$('#headerwrap').css("background-image", image_array[image_index]);
Image array should have : url(/path) and not url('/path')
var image_array= ['url(./img/portfolio/img3.jpg)', 'url(./img/portfolio/img2.jpg)', 'url(./img/portfolio/img4.jpg)'];
Try this:
CSS
#headerwrap {
background-image: url(/img/portfolio/img1.jpg);
margin: 0;
height: 100%;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
width: 100%;
bottom: 10px;
}
jQuery
var image_array= ['url(/img/portfolio/img2.jpg)', 'url(/img/portfolio/img3.jpg)', 'url("../img/portfolio/img4.jpg")'];
var image_index = 0;
var change_image = function(){
$('#headerwrap').css("background-image", image_array[image_index]);
image_index++;
if (image_index >= image_array.length){
image_index = 0;
}
}
$(document).ready( function(){
setInterval(change_image, 5000);
});
EDIT
Changed the image urls to absolute instead of relative for consistency.