I want to fade-in the "image" once it is loaded from an external url, but show a "imgPlaceholder" right from the beginning from local resources.
The HTML looks like this:
<div className="bg-img" style={imgDivStyle}></div>
The CSS looks like this:
const imgDivStyle = {
background: `url('${image}'), url('${imgPlaceholder}')`,
backgroundSize: 'cover',
};
What I want to happen: Show "imgPlaceholder" from beginning and Fade-in "image" once it is loaded.
What is actually happening: "imgPlaceholder" is shown from beginning "image" is showing up instantly once it is loaded.
Is this achievable by pure CSS? Or do I need to load in the image using e.g. jQuery and trigger an animation manually?
You can't check if the image has loaded with css alone so you could do something like the following (comments in code to show what is happening):
$('.inner').each(function() {
var div = $(this),
background = div.data('background'); // get background
$('<img/>').attr('src', background).load(function() { // create an image element with inner background and load it
$(this).remove(); // remove it
// set the inner background image and fade in:
div.css('background-image', 'url(' + background + ')').delay(200).fadeIn(2000); // need a little delay to let the div render it's bg image before the fade starts
});
});
.default,
.inner {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
/* just make sure inner div is same size as outer */
width: 400px;
height: 400px;
}
.default {
background-image: url(https://lorempixel.com/900/900/city/1/); /* default background */
}
.inner {
display:none; /* start of hidden */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default"><!-- default div with default background image -->
<div class="inner" data-background="https://lorempixel.com/900/900/city/2/"><!-- inner div with background-image set as data attribute -->
</div>
</div>
If you want to create the inner div on the fly, you can do something like this:
$('.background').each(function() {
var div = $(this),
background = div.data('background'), // get background
html = div.html(); // get any contents
$('<img/>').attr('src', background).load(function() { // create an image element with inner background and load it
$(this).remove(); // remove it
div.empty(); // empty current div
// create an inner div:
$('<div/>')
.css({
'background-image': 'url(' + background + ')',
'display': 'none'
}) // add background and hide
.addClass('inner')
.html(html)
.appendTo(div) // append to default div
.delay(175)
.fadeIn(2000); // need a little delay to let the div render it's bg image before the fade starts
});
});
.background,
.inner {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.background {
background-image: url(https://lorempixel.com/900/900/city/1/); /* default background */
/* just make sure inner div is same size as outer */
width: 400px;
height: 400px;
}
.inner {width:100%; height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background" data-background="https://lorempixel.com/900/900/city/2/"><!-- default div with default background image, new background image set as data attribute -->
</div>
I found a reference that utilizes #keyframes along with some attributes like 'opacity' within an animation frame.
You can try referencing some of the code in the link here -
https://codepen.io/davidhc/pen/nLpJk
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
Related
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
Im trying to work out script that will change background images every 3 sec using fadeIn, fadeOut, addClass and removeClass.
Is there a better way to do it using setInterval?
$("document").ready(function () {
$("#bg").delay(3000);
$("#bg").fadeOut(300);
$("#bg").removeClass('bg1');
$("#bg").addClass('bg2');
$("#bg").fadeIn(300);
$("#bg").delay(3000);
$("#bg").fadeOut(300);
$("#bg").removeClass('bg2');
$("#bg").addClass('bg1');
$("#bg").fadeIn(300);
});
btw. its not working properly.
HTML:
<div id="bg" class="ShowBG bg1"></div>
CSS:
#bg{
position:absolute;
width:100%;
height:70%;
background-size:cover;
background-position:center;
display:none;
}
.bg1{background-image:url("/img/index/bg1.png");}
.bg2{background-image:url("/img/index/bg2.png");}
Your method should work just fine but it's not the best way to write it: what if your graphic designer suddenly decides to add another background image in the cycle? Your code could become pretty long pretty fast. Here's how I would do it:
var backgroundClasses = ['bg1', 'bg2']; // Store all the background classes defined in your css in an array
var $element = $('.container'); // cache the element we're going to work with
var counter = 0; // this variable will keep increasing to alter classes
setInterval(function() { // an interval
counter++; // increase the counter
$element.fadeOut(500, function() { // fade out the element
$element.removeClass(backgroundClasses.join(' ')). // remove all the classes defined in the array
addClass(backgroundClasses[counter % backgroundClasses.length]). // add a class from the classes array
fadeIn(500); // show the element
});
}, 3000)
.container {
width: 100vw;
height: 100vh;
}
.bg1 {
background-color: red;
}
.bg2 {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container bg1"></div>
The hardest part of the code is this:
$element.addClass(backgroundClasses[counter % backgroundClasses.length])
It basically adds one of the classes stored in the backgroundClasses array. Using the modulo operator (%) on the counter will basically start over every time it has reached the end of the array, counting 0, 1, 0, 1, 0, 1 if you're array is only 2 elements long. If it's 3 elements long it counts 0, 1, 2, 0, 1, 2, ... and so on. Hope that makes sense.
Use callback of fadeOut() method (see complete parameter here) to perform class change when the animation is done. Otherwise the class will swap while the animation is still going.
There is no better way than using setInterval() if you want to do it automatically and continuously.
Here is working example:
$("document").ready(function () {
var bg = $("#bg");
setInterval(function() {
// We fadeOut() the image, and when animation completes we change the class and fadeIn() right after that.
bg.fadeOut(300, function() {
bg.toggleClass('bg1 bg2');
bg.fadeIn(300);
});
}, 1500);
});
#bg {
position:absolute;
width:100%;
height:70%;
background-size:cover;
background-position:center;
}
.bg1 {
background-image: url("https://www.w3schools.com/css/img_fjords.jpg");
}
.bg2 {
background-image: url("https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg" class="ShowBG bg1"></div>
Edit
Just noticed OP wants fading so I added a simple CSS transition and opacity properties to both classes and #bg.
Use toggleClass(). Not sure why you used display:none so I removed it. Also I added the dimensions to html and body so your div has something to relate it's percentage lengths with.
Demo
setInterval(function() {
$('#bg').toggleClass('bg1 bg2');
}, 3000);
html,
body {
height: 100%;
width: 100%
}
#bg {
position: absolute;
width: 100%;
height: 70%;
background-size: cover;
background-position: center;
opacity:1;
transition:all 1s;
}
.bg1 {
background-image: url("http://placehold.it/500x250/00f/eee?text=BG1");
opacity:1;
transition:all 1s;
}
.bg2 {
background-image: url("http://placehold.it/500x250/f00/fff?text=BG2");
opacity:1;
transition:all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg" class="ShowBG bg1"></div>
I have this issue.. I want to be able to use
.custom-forums {
height: auto;
width: 100%;
border-image-source:transparent url("../images/forums.png") center top no-
repeat;
}
with
.custom-forums:hover {
background-image: url('../images/forums-hover.png');
}
The issue is this: When width is set to 100% it simply does not show the image. But when width and height are set to 170px it does work. I would like to have the button resize based on screen resolution and retain the ability to have the hover image change.
Much gratitude,
Mas21
Background images require a predefined height or content of a certain height in its container in order to work.
I had a thought you could do this another way:
Use a background image
Put another image in that div and on hover set it to opacity 0, or your preference and the bg image shows
Run this example:
.container {
background: url('http://placehold.it/199x199') no-repeat center center;
width: 200px;
}
img {
transition: opacity ease-in-out .5s;
}
img:hover {
opacity: .25;
}
<div class="container">
<img src="http://placehold.it/200x200">
</div>
I'm new to development so please go easy on me. Everything I code is from scratch and my own.
I've began creating a body background image slider for one single page of my eCommerce platform and I'm a bit stuck on where to go next with it.
Please see here:
https://zoeyplayground-com.zoeysite.com/lookbook
Currently it is able to fade the body background when clicking the next and previous buttons, but I can't work out a way that this can be converted to handle more than one image per button. I will need the slider to be able to cycle through multiple body background images.
Please see the code below:
HTML
<!-- Remove header from lookbook page and add background1 -->
<script>
jQuery(document).ready(function() {
if (top.location.pathname === '/lookbook')
{
jQuery("body").addClass("background1");
jQuery("#root-header-cp-41e961ff2cbb3d4e6ae72927272f2db5").addClass("removeheader");
}
});
</script>
<!-- Toggle background2 when 'next' is clicked -->
<script>
jQuery(document).ready(function() {
jQuery(".next").click(function() {
jQuery("body").removeClass("background1");
jQuery("body").addClass("background2");
});
});
</script>
<!-- Toggle background1 when 'back' is clicked -->
<script>
jQuery(document).ready(function() {
jQuery(".back").click(function() {
jQuery("body").removeClass("background2");
jQuery("body").addClass("background1");
});
});
</script>
<!-- Container and images -->
<div id="toggle" width="100%">
<img src="/media/import/back.png" class="back">
<img src="/media/import/next.png" class="next">
</div>
CSS
/* Min-height due to hard-coded height issue */
.root-body {
min-height: 0 !important;
}
/* Transition for background image changes */
body {
transition: all 0.5s ease-out !important;
}
/* Hide footer on all pages */
.root-footer {
display: none;
}
/* Removeheader class for the lookbook page */
.removeheader {
display: none;
}
/* Body background options */
.background1 {
background: url('/media/import/background1.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
.background2 {
background: url('/media/import/background2.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
/* Toggle Buttons */
#toggle .next {
float: right;
}
#toggle img {
margin-top: 400px;
display: inline;
}
#toggle img:hover {
cursor: pointer;
opacity: 0.8;
}
Any advice or guidance on what I should do next is greatly appreciated. Thank you for your time.
try this:
jQuery(document).ready(function() {
var current = 1; // current background index
var max_backgrounds = 2; // number of backgrounds it will work with any number
jQuery(".next").click(function() {
jQuery("body").removeClass("background" + current);
// next background index or first one if it's the last one
current++;
if (current > max_backgrounds) {
current = 1;
}
// change background to background1, background2 ...
jQuery("body").addClass("background" + current);
});
jQuery(".back").click(function() {
jQuery("body").removeClass("background" + current);
// previous background index or last one if current is the first one
current--;
if (current < 1) {
current = max_backgrounds
}
// change background to background1, background2 ...
jQuery("body").addClass("background" + current);
});
});
I am trying to replace some logo images on a web site with a all white version of the same image. The idea is that when you hover over the image you see the logo in white with a coloured background (done in css)
jQuery(document).ready(function() {
jQuery('.la-item img').hover(function() {
var image = jQuery(this).attr('data-imagenormal')+'-white.png';
jQuery(this).attr("src", image)
jQuery(this).addClass("circleitem")
}, function() {
var image = jQuery(this).attr('data-imagenormal')+'.png';
jQuery(this).attr("src", image )
jQuery(this).removeClass("circleitem")
});
});
This actually looks great, but I would like it to animate the change over 2 seconds. I've tried using this.animate, but it does not work.
jQuery(document).ready(function() {
jQuery('.la-item img').hover(function() {
var image = jQuery(this).attr('data-imagenormal')+'-white.png';
jQuery(this).animate({
jQuery(this).attr("src", image)
jQuery(this).addClass("circleitem")
)}
}, function() {
var color = jQuery(this).attr('data-imagenormal')+'.png';
jQuery(this).animate({
jQuery(this).attr("src", color )
jQuery(this).removeClass("circleitem")
});
})
});
Don't use <img> tag, just use CSS and backgrounds.
For example (I'm not trying to have the same structure than yours) :
HTML
<div id="logo"></div>
CSS
#logo {
width: 50px;
height: 50px;
background-color: #whatyouwhant;
background-image: url('yourlogo.png');
background-position: center center;
background-repeat: no-repeat;
transition: .3s;
}
#logo:hover {
background-image: url('yourwhitelogo.png');
}
You can combine background colors and transparent PNGs.
You can use this technique and still change the background with jQuery :
$('.matchyourelements').hover(function() {
$(this).css('background-image', $(this).data('imagenormal')+'-white.png');
});
you can do something like this.
<img src="one.png" id="one" />
//Script
$('#one').hover(function() {
// increase the 500 to larger values to lengthen the duration of the fadeout
// and/or fadein
$('#one').fadeOut(500, function() {
$('#one').attr("src","/newImage.png");
//here you can add or remove class
$('#one').fadeIn(500);
});
});