I'm going to change back ground an element in a setInterval function. the background is getting changed imediately, but I would like to make it transited in couple of seconds.
var act = true;
setInterval(function(){
if (act) {
$("div").addClass("back2")
$("div").removeClass("back")
act = false
} else {
$("div").addClass("back")
$("div").removeClass("back2")
act = true
}
}, 10000)
.back{
width:100px;
height:100px;
background-image:url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
display:block;
transition: .5s ;
}
.back2{
width:100px;
height:100px;
background-image:url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
display:block;
transition: .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c">tz</div>
background-image is not an animatable property. As you can see in this list on the mozilla dev page, this is not possible: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
What you can do is have two divs with one background image each overlapping each other and then make one of them transparent to create a blending effect.
I made a fiddle to illustrate the idea:
https://jsfiddle.net/Lpduw3mq/
// find elements
var firstDiv = $("#first")
var secondDiv = $("#second")
// Swap backgrounds
var act = true;
setInterval(function(){
if (act) {
firstDiv.addClass("transparent")
secondDiv.removeClass("transparent")
act = false
} else {
firstDiv.removeClass("transparent")
secondDiv.addClass("transparent")
act = true
}
}, 5000)
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.base {
position: absolute;
top: 0;
left: 0;
}
.back {
width: 100px;
height: 100px;
background-image: url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
display: block;
opacity: 1;
transition: opacity 0.5s;
}
.back2 {
width: 100px;
height: 100px;
background-image: url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
display: block;
opacity: 1;
transition: opacity 0.5s;
}
.transparent {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" class="base back"></div>
<div id="second" class="base back2 transparent"></div>
You can use an unordered list of two items absolutely styled with the image backgrounds and use keyframe animation to change between these two items while smoothly changing a background opacity. Check this out http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
Related
#loading_screen {
display: none;
z-index: 1;
height: 100vh;
width: 100vw;
opacity: 0;
background-color: red;
transition: opacity 4s 0s ease;
}
<div id="loading_screen" class="page">
</div>
<script>
function hide_page() {
const loading = document.getElementById('loading_screen');
loading.style.display = 'block';
loading.style.opacity = '1';
}
hide_page()
</script>
The loading_screen div appears instantly, as if the transition didn't even exist
Is there a chance that the css is not functional immediately when I run the page?
You need to wait for the browser to update and paint the loading element first, then you can use setTimeout to change the opacity after the browser has done its paint.
function hide_page() {
const loading = document.getElementById('loading_screen');
loading.style.display = 'block';
setTimeout(() => {
loading.style.opacity = '1';
});
}
hide_page();
#loading_screen {
display: none;
z-index: 1;
height: 100vh;
width: 100vw;
opacity: 0;
background-color: red;
transition: opacity 4s ease;
}
<div id="loading_screen" class="page">
</div>
So far, i've been able to make it such that when the cursor hovers over the div a background image in the body appears. I need to add a fade in animation to this. Ive been looking for solutions here but havent been able to work around it. I don't have any experience in javascript.
enter code here
<script>
changeBgImage = () => {
document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";
console.log("working")
}
ogBgImage = () => {
document.body.style.backgroundImage = "url('../Images/Background/black.jpg')";
console.log("working")
}
</script>
<style>
body {
background-image: url('../Images/Background/black.jpg');
}
</style>
<body>
<div class="gwraith"><a href="../Legends/wraith.html ">
<img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">
</a>
</body>
Add a transition rule to the body tag. The same can be done in css, without javascript.
function changeBgImage() {
document.body.style.backgroundImage = "url('https://s1.1zoom.ru/big0/284/Summer_Pond_Fence_Trees_496376.jpg')";
}
function ogBgImage() {
document.body.style.backgroundImage = "url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg')";
}
body {
background-image: url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg');
background-repeat: no-repeat;
background-size: cover;
transition: all 0.7s linear;
}
<body>
<div class="gwraith">
<a href="../Legends/wraith.html">
<img src="https://begin-english.ru/img/word/refresh.jpg" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">
</a>
</div>
</body>
I didn't manage to do it with body. But you can stretch the underlying div and change its opacity.
const appDiv = document.getElementById("app");
appDiv.addEventListener("mouseover", showBodyBackground);
appDiv.addEventListener("mouseout", hideBodyBackground);
function showBodyBackground() {
document.getElementById("bg").classList.add("hidden");
}
function hideBodyBackground() {
document.getElementById("bg").classList.remove("hidden");
}
.visible {
background: url('https://www.bouwendnederland.nl/media/6502/rijnhaven-impressie-602-x-402.jpg');
transition: opacity 1.5s linear;
opacity: 1;
}
.hidden {
opacity: 0;
}
.stretched {
position: absolute;
width: 100%;
height: 100%;
}
#app {
width: 100px;
height:50px;
background: lightblue;
text-align: center;
margin: 0 auto;
position: relative;
}
<body>
<div class="stretched visible" id="bg"></div>
<div id="app">Hover me!</div>
</body>
Be aware, that everything will disappear in the element with opacity: 0. It means, your button and other elements you want to keep on the screen shouldn't be children of that div.
We can't just fade body, or indeed any wrapper div which may replace it, as that would fade everything. We also can't directly fade a background image as CSS doesn't have that ability. But we can put the two background images into the two pseudo elements, before and after, of body and these can then be animated to fade in and out. The code wants to fade in one background on mouseover, and fade it out on mouseout.
There are two background images used, one called black. The code here fades that out as the other image fades in, but that can be easily removed if required.
Mouse over the gear image to fade in the second image, and mouseout of the gear to fade it out.
<!DOCTYPE html>
<html>
<head>
<script>
changeBgImage = () => {
<!--document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";-->
document.body.classList.toggle('showbefore');
document.body.classList.toggle('showafter');
console.log("working")
}
ogBgImage = () => {
<!--document.body.style.backgroundImage = "url('christmas card 2020 front.jpg')";-->
document.body.classList.toggle('showbefore');
document.body.classList.toggle('showafter');
console.log("working")
}
</script>
<style>
body {
position: relative;
height: 100vh; /* I added this just to cover the whole window you may not want it */
}
body:before, body:after {
opacity: 0;
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size:cover; /* I added this just to get the background over the whole window - you may or may not want it */
background-repeat: no-repeat no-repeat;
background-position: center center;
animation-duration: 2s; /* change to what you want it to be */
animation-fill-mode: forwards;
}
body:before {
background-image: linear-gradient(black, black); /*change this to url('your background image');*/
animation-name: shown;
}
body:after {
background-image: url('https://ahweb.org.uk/christmas card 2020 front.jpg');
animation-name: unshown;
}
body.showbefore:before, body.showafter:after {
animation-name: show;
}
body.showafter:before, body.showbefore:after {
animation-name: unshow;
}
#keyframes unshown {
from {
opacity: 0;
}
to {
opacity: 0;
}
}
#keyframes shown {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
#keyframes unshow {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body class="showbefore">
<div class="gwraith"><!--<a href="../Legends/wraith.html ">-->
<!--<img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">-->
<img src="https://ahweb.org.uk/gear.jpg" width="130vw" class="wraith"
onmouseover="event.preventDefault();event.stopPropagation();changeBgImage();" onmouseout="event.preventDefault();event.stopPropagation();ogBgImage();">
<!--</a>-->
</body>
</body>
</html>
I want to fade between two differently sized elements within a container overlaying each other. The first element should be faded out, then the container resized and finally the other element faded in.
Here's the related snippet:
var layer1 = document.getElementById("layer1");
var layer2 = document.getElementById("layer2");
function switchLayers() {
layer1.addEventListener("transitionend", function() {
layer2.classList.add("fadein");
});
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px;
overflow: hidden;
}
.layer {
position: relative;
width: 400px;
}
#layer1 {
height: 100px;
float: left;
background-color: blue;
}
#layer2 {
height: 150px;
background-color: red;
display: none;
opacity: 0;
}
#layer1.fadeout {
opacity: 0;
transition: opacity 1s ease-out;
}
#layer2.fadein {
display: block;
opacity: 1;
transition: opacity 1s ease-out;
}
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>
When the second layer's display property is set to block it works as expected, i.e. the opacity is changed from 0 to 1 within a second. Though if it's set to none, the transition suddenly is discrete.
I've tried to set all within the transition value to transition all properties and also tried to include the display property in the transition like this:
transition: display 0s, opacity 1s ease-out;
Though without success. Note that because the container should resize to the size of the currently displayed layer, the visibility property can't be used (as it hides the element but still lets it occupy the space).
How to made this work?
Try using the visibility property instead of display.
For more information regarding the state changes in visibility and display, refer article.
For transitioning the parent height, you have to manually change the height property of the #container. Using display: block & display: none will never transition the parent.
Refer code:
var layer1 = document.getElementById("layer1");
var layer2 = document.getElementById("layer2");
function switchLayers() {
layer1.addEventListener("transitionend", function() {
layer2.classList.add("fadein");
document.getElementById("container").style.height = "170px";
});
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px;
height: 100px;
overflow: hidden;
transition: all 0.5s;
}
.layer {
position: relative;
width: 400px;
}
#layer1 {
height: 100px;
float: left;
background-color: blue;
}
#layer2 {
height: 150px;
background-color: red;
visibility: none;
opacity: 0;
}
#layer1.fadeout {
visibility: none;
opacity: 0;
transition: all 1s ease-out;
}
#layer2.fadein {
visibility: visible;
opacity: 1;
transition: all 1s ease-out;
}
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>
There is no straightforward way. Transitions do not work on display, nor do they work on auto height. So, visibility is a good bet.
Note that because the container should resize to the size of the
currently displayed layer, the visibility property can't be used (as
it hides the element but still lets it occupy the space).
Then, you will need to hack it out. You can make use of min-height. Give a faux min-height to your container, and then apply the height of your layer2 to it once the transition ends. Also, because display on layer2 will block the transition, you need to separate out the classes for display and opacity and space out their application using a zero timeout in between.
Here is a crude idea:
var layer1 = document.getElementById("layer1"),
layer2 = document.getElementById("layer2"),
container = document.getElementById("container"),
h = window.getComputedStyle(layer2).getPropertyValue("height");
container.addEventListener("transitionend", function(e) {
if (e.target.id === 'layer1') {
// apply layer2 height to container min-height
container.style.minHeight = h;
}
if (e.target.id === 'container') {
// First show the layer2
layer2.classList.add("show");
// Then a dummy pause to fadein
setTimeout(function(){
layer2.classList.add("fadein");
}, 0);
}
}, false);
function switchLayers() {
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px; overflow: hidden;
min-height: 1px; /* faux min-height */
transition: min-height 1s linear;
}
.layer { position: relative; width: 400px; }
#layer1 {
height: 100px; float: left;
background-color: blue;
transition: all 1s linear;
}
#layer2 {
height: 150px; background-color: red;
display: none; opacity: 0;
transition: opacity 1s linear;
}
#layer1.fadeout { opacity: 0; }
#layer2.show { display: block; } /* Separate out display */
#layer2.fadein { opacity: 1; } /* Separate out opacity */
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>
I'm sure this is easy fix. I need that my preloader fade out slowly. I tried with css animation but didn't work. Can somebody tell me how should i do that in javascript ? As you can see in example, the transition is very rough. I don't want that.
<script> <!--Preloader-->
var myVar;
function preloader() {
myVar = setTimeout(showPage, 1500);
}
function showPage() {
document.getElementById("preloader").style.display = "none";
document.getElementById("wrapper").style.display = "block";
}
</script>
CODEPEN EXAMPLE
Add following changes into your codes.
#preloader {
transition:1s ease;
}
#wrapper {
opacity:0;/*Remove display and hide opacity*/
}
function showPage() {
document.getElementById("preloader").style.opacity = 0;
document.getElementById("wrapper").style.opacity = 1;
}
transition doent work with display block and none..
use
var myVar;
function preloader() {
myVar = setTimeout(showPage, 1500);
}
function showPage() {
document.getElementById("preloader").style.opacity = 0;
document.getElementById("wrapper").style.opacity = 1;
}
and
#preloader {
position: absolute;
z-index: 1000;
background-color:black;
width: 100vw;
height: 100vh;
color:white;
transition: 0.5s all linear
}
You can't animate display: none itself, what you can do is animate opacity: 0 for example.
You'll add display: block, while opacity is still 0. After that add opacity: 1 and animate that
Try this example may helps you.
$(function() {
$("#loader-image").fadeIn(500, function() {
$("#loader-image").fadeOut(1000, function() {
$(".loader-container").fadeOut(1000, function() {
alert("loaded!");
});
});
});
});
body {
background-color: black;
}
.loader-container {
background-color: yellow;
height: 200px;
}
#loader-image {
display: none;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<body>
<div class="loader-container">
<img src="image.png" alt="Image" id="loader-image" />
</div>
</body>
You can use a CSS transition.
Change your preloader styles to:
#preloader {
position: absolute;
z-index: 1000;
background-color:black;
width: 100vw;
height: 100vh;
color:white;
display: block;
opacity: 1; // Add opacity
transition: 1s opacity ease-in; // Add transition
}
Add styles for the hidden class:
#preloader.hidden {
opacity: 0;
}
Then when you call showPage()
function showPage() {
// Add the newly defined hidden class to the preloader element
document.getElementById("preloader").classList.add('hidden');
}
Here is a working example.
I've created a background body slider which will switch through body backgrounds with 'next' and 'back' buttons. Live example here:
https://ts564737-container.zoeysite.com/lookbook
This functions perfectly (ignore the large images causing it to load slowly), but I can't seem to add a crossfade effect like on this website:
http://northamerica.triangl.com/pages/lookbook-swimwear
I tried this with CSS transition: all 0.5s ease-out but the transition is poor and loaded horribly.
Could anybody please advise where I can add a crossfade to this so that it's like the website above? Thank you for your help and time.
HTML & jQuery etc.
<!-- Remove header from lookbook page only and add background1 -->
<script>
jQuery(document).ready(function() {
if (top.location.pathname === '/lookbook')
{
jQuery("#root-header-cp-41e961ff2cbb3d4e6ae72927272f2db5").addClass("removeheader");
jQuery("body").addClass("background1");
}
});
</script>
<!-- Change background -->
<script>
jQuery(document).ready(function() {
var current = 1; // current background index
var max_backgrounds = 3; // 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);
});
});
</script>
<!-- Container plus images -->
<div id="toggle" width="100%">
<img src="/media/import/icons/back.png" class="back">
<img src="/media/import/icons/next.png" class="next">
</div>
CSS
/* Body background options */
.background1 {
background: url('/media/import/backgrounds/background1.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
.background2 {
background: url('/media/import/backgrounds/background2.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
.background3 {
background: url('/media/import/backgrounds/background3.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
/* Toggle Buttons */
#toggle .next {
float: right;
margin-right: 20px !important;
}
#toggle .back {
margin-left: 20px !important;
}
#toggle img {
margin-top: 400px;
display: inline;
}
#toggle img:hover {
cursor: pointer;
opacity: 0.8;
}
The trick is to use multiple elements, which are all positioned in the exact same place. All elements must have an opacity: 0, except the active one (opacity: 1).
When you navigate to the next/previous item, you need to toggle an active class on them, which removes/sets opacity: 1
Simplified example with divs:
(function () {
var prevButton = $('.previous'),
nextButton = $('.next'),
allImages = $('.background-images li');
nextButton.click(function(e) {
// Find the active element
activeElement = $('li.bg-active');
// remove the 'bg-active'-class from this element
activeElement.removeClass('bg-active');
// if current element is the last one, make sure to add 'bg-active'-class to the very first element.
if (activeElement[0] === allImages.last()[0]){
allImages.first().addClass('bg-active');
} else {
// Add 'bg-active'-class to the next element
activeElement.next().addClass('bg-active');
}
});
prevButton.click(function(e) {
activeElement = $('li.bg-active');
activeElement.removeClass('bg-active');
// if current element is the first one, make sure to add 'bg-active'-class to the very lst element.
if (activeElement[0] === allImages.first()[0]){
allImages.last().addClass('bg-active');
} else {
// add 'bg-active'-class to the previous element
activeElement.prev().addClass('bg-active');
}
});
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
ul {
overflow: auto;
}
li {
width: 100px;
height: 100px;
position: absolute;
left: 0;
}
.bg {
opacity: 0;
transition: all 0.5s ease-out;
}
.bg-active {
opacity: 1;
}
.bg1 {
background-color: red;
}
.bg2 {
background-color: green;
}
.bg3 {
background-color: blue;
}
</style>
</head>
<body>
previous
next
<ul class="background-images">
<li class="bg bg1 bg-active"></li>
<li class="bg bg2"></li>
<li class="bg bg3"></li>
</ul>
</body>
</html>
Try using
#Crossfade img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
This should give you the crossfade that you want.
Instead of toggling classes you could just swap out the image, here's a quick proof of concept you can run in your console:
jQuery("body").css({'background-image':'url(/media/import/backgrounds/background3.jpg)', 'transition':'all 0.5s ease-out'});
Adapting this for your code would look something like:
jQuery
jQuery(".next").click(function() {
current++;
if (current > max_backgrounds) {
current = 1;
}
jQuery("body").css({'background-image':'url(/media/import/backgrounds/background' + current + '.jpg');
});
jQuery(".back").click(function() {
current--;
if (current < 1) {
current = max_backgrounds
}
jQuery("body").css({'background-image':'url(/media/import/backgrounds/background' + current + '.jpg');
});
CSS
body {
transition: all 0.5s ease-out;
}
There many ways you can about this and this gentleman has showcase many of them
Some pointers:
The page you've given as an example loads every image when the page loads.
Performance wise, you don't want that. If you're going to do such an effect, make sure you load the images only when they actually required.
They achieve the effect by pilling all images on top of each other, then animating the opacity in/out when clicking the arrows.
Since they all have position:absolute, you'll get the crossfade effect you wish for.