I am trying to change the background image of an div without having any effect on the content inside the div. i wrote following code to change the background-mage. I didn't understand why firefox doesn't respond to my css transition. is there any fix by which i can make it to work in ie and firefox.
Html
<body>
<header>
</header>
</body>
Css
body {
margin: 0;
}
header {
height: 665px;
width: 100%;
background-image: url('image0.jpg');
-moz-transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
}
Jquery
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.src = array[i];
preloadImages.list.push(img);
}
}
var imageURLs = [
"image0.jpg",
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg"
];
preloadImages(imageURLs);
var counterForBackgroundImage = -1;
function changeBackgroundImage() {
counterForBackgroundImage++;
if (counterForBackgroundImage > imageURLs.length-1)
counterForBackgroundImage = 0;
$('header').css('background-image', 'url(' + imageURLs[counterForBackgroundImage] + ')');
setTimeout(function() {
changeBackgroundImage();
}, 5000);
}
changeBackgroundImage();
background-image animate property is not listed at w3c animatable list.
Try using some trick such as this.
Related
I have a banner area that I am changing its background every 10 seconds. The issue is, on firefox, when I change the background-image using javascript instead of animation, it flickers for a glimpse of time.
The transition works fine on other browsers except Firefox (among tested browsers; Chrome, Opera, Safari, Firefox)
Is there any method I could prevent this happening?
Code;
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
var list = preloadImages.list;
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.onload = function() {
var index = list.indexOf(this);
if (index !== -1) {
list.splice(index, 1);
}
}
list.push(img);
img.src = array[i];
}
}
var slide_images = [
"https://picsum.photos/id/11/2500/1667",
"https://picsum.photos/id/15/2500/1667",
"https://picsum.photos/id/17/2500/1667",
"https://picsum.photos/id/19/2500/1667",
];
var slide_count = 0;
$(document).ready(function() {
preloadImages(["https://picsum.photos/id/15/2500/1667"]);
setInterval(function() {
slide_count = ++slide_count % slide_images.length;
if (jQuery.inArray(slide_images[slide_count + 1], slide_images) !== -1) {
preloadImages([slide_images[slide_count + 1]]);
}
$('.banner').css('background-image', 'url(\'' + slide_images[slide_count] + '\')');
}, 5000); //lowered from 10
});
.banner {
min-height: 1000px;
color: #fff;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.bg {
background-image: url('https://picsum.photos/id/11/2500/1667');
transition: 2s;
-webkit-animation: 4s infinite fade;
-moz-animation: 4s infinite fade;
-o-animation: 4s infinite fade;
animation: 4s infinite fade;
}
<div class="banner bg">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Thanks in advance.
add transition for other browser to smooth transition
transition: 0.7s all ease;
-webkit-transition: 0.7s all ease;
-moz-transition: 0.7s all ease;
-o-transition: 0.7s all ease;
I am trying to make a message appear if the user doesn't scroll for specific amount of time and then make the text fade out as soon as the user scroll. What I have tried so far is not working.
I am looking for vanilla javascript solutions only.
thank you for your help.
// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");
function showMsg() {
scrollText.className = "show";
}
setTimeout(showMsg, 2000);
// make scroll button fadout ---------------
function scrollHide() {
var scrollText2 = document.querySelector("#scrollMsg.show");
var scrllTPosition = scrollText2.getBoundingClientRect().top;
var screenPosition = window.innerHeight / 0.5;
if (scrllTPosition < screenPosition) {
scrollText2.classList.add("scrollHide");
}
}
window.addEventListener("scroll", scrollHide);
#scrollMsg {
height: auto;
position: sticky;
bottom: 175px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
transition: opacity 0.7s;
}
#scrollMsg.show {
opacity: 1;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
}
#scrollhide {
opacity: 0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
}
<p id="scrollMsg">scroll</p>
I've added some large divs to allow us to scroll through the document.
// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");
window.addEventListener('scroll', (e) => {
console.log('user scrolled!')
scrollText.style.opacity = 0
});
#scrollMsg {
opacity: 1;
transition: opacity 1s;
}
<div style="height:100px"></div>
<p id="scrollMsg">scroll</p>
<div style="height:4000px"></div>
I have this page with menu-link (#navBtn), and #mobileLinks div that opens and closes when clicking #navBtn.
I would like to add fade-in animation when #mobileLinks div is opened, and fade-out animation when the #mobileLinks div is closed. I would like to achieve this with pure JavaScript.
I managed to insert the fade-in animation already, but don't know how to add the fade-out animation as well.
var content = document.getElementById("mobileLinks");
var button = document.getElementById("navBtn");
button.onclick = function(){
if(content.className == "open"){
content.className = "";
content.animate([{opacity:'0.0'}, {opacity:'1.0'}],
{duration: 1500, fill:'forwards'})
} else{
content.className = "open";
}
};
#navBtn
#mobileLinks {
display: none
}
#mobileLinks.open {
display: flex;
}
You can handle the styles entirely in CSS, and only toggle a class with Js.
With CSS & Js
const menu = document.getElementById("menu")
function toggleMenu() {
menu.classList.toggle("isOpen");
}
#menu {
opacity: 0;
transition: opacity 0.2s ease-out;
}
#menu.isOpen {
opacity: 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>
Or with JS only
const menu = document.getElementById("menu")
menu.style.opacity = '0'
menu.style.transition = "opacity 0.2s ease-out"
function toggleMenu() {
// Toggle between 0 and 1
menu.style.opacity ^= 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>
You can achieve it using jquery effect
To show your element, use fadeIn() and to hide an element, you can use fadeOut()
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeOut();
$("#div3").fadeToggle();
});
});
</script>
You can do it with JS. You can change the opacity of the element to hide it and along with css transition property to make fade effect
var container = document.getElementById("container")
function clicked() {
if (container.style.opacity == 0) {
container.style.opacity = 1
}
else {
container.style.opacity = 0
}
}
#container {
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div id="container">Some Text</div>
Submit
I have a lightbox photo gallery I am building. When the first image loads the css transition works. When every image after loads it does not. Any ideas why? The photos after the first one load but they have no transition.
Image.prototype.load = function(url){
var thisImg = this;
var xmlHTTP = new XMLHttpRequest();
xmlHTTP.open('GET', url,true);
xmlHTTP.responseType = 'arraybuffer';
xmlHTTP.onload = function(e) {
var blob = new Blob([this.response]);
thisImg.src = window.URL.createObjectURL(blob);
};
xmlHTTP.onprogress = function(e) {
thisImg.completedPercentage = parseInt((e.loaded / e.total) * 100);
};
xmlHTTP.onloadstart = function() {
thisImg.completedPercentage = 0;
};
xmlHTTP.onloadend = function() {
thisImg.completedPercentage = 0;
gallery.appendChild(currentImage);
gallery.className = "gallery toggle";
};
xmlHTTP.send();
};
.gallery {
display: absolute;
position: fixed;
margin: auto;
visibility: hidden;
opacity: 0;
-moz-transition: opacity 0.5s, visibility 0.5s ease-in-out;
-webkit-transition: opacity 0.5s, visibility 0.5s ease-in-out;
-ms-transition: opacity 0.5s, visibility 0.5s ease-in-out;
transition: opacity 0.5s, visibility 0.5s ease-in-out;
background: rgba(0, 0, 0, 0.0);
width: 96%;
height: 96%;
margin-top: 2%;
margin-left: 2%;
overflow: hidden;
z-index: 1001;
}
.gallery.toggle {
visibility: visible;
opacity: 1;
}
your CSS is executed on page load. When you dynamically add or remove content, CSS is not loaded again. You would probably have to create the transitions with JS after loading the image.
Maybe this helps:
https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/
You are adding the images with the class gallery toggle, which means the transition will never take place; it will be loaded in its final state. You need to load the images with gallery, allow the DOM to render, and then add the toggle class. You can probably get it working by doing this:
xmlHTTP.onloadend = function() {
thisImg.completedPercentage = 0;
gallery.appendChild(currentImage);
gallery.className = "gallery";
setTimeout(function () {
gallery.className = 'gallery toggle';
}, 20);
};
My target goal is to enlarge a picture within a div and shrink a background-picture of a div.
I have a first javascript that alters the IMG element within the .pixbox DIV. This works.
I have a second javascript that alters the background-image from .pixbox DIV.
Question: How do i select the control the element through .on() event argument
I tried with .css('background-image') but that doesnt seem to work.
http://jsfiddle.net/q9jHu/347/
CSS
.pixbox {
background:url()
javascript
$('.pixbox').css('background-image').on({
mouseover: function(){
var $scale = 0.7;
if ($(this).data('w')) {
var $w = $(this).data('w');
var $h = $(this).data('h');
} else {
var $w = $(this).width();
var $h = $(this).height();
$(this).data('w', $w).data('h', $h);
}
<rest of code>
html
<div class="pixbox">
<img class="zoom" src="">
</div>
I managed to solve it myself! but the code is still a bit buggy
http://jsfiddle.net/q9jHu/360/
div {
width: 300px;
height: 300px;
background: url(http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/glossy-black-icons-business/080837-glossy-black-icon-business-magnifying-glass-ps.png) no-repeat center center;
transition: background-size 2s ease-in-out;
-moz-transition: background-size 2s ease-in-out;
-ms-transition: background-size 2s ease-in-out;
-o-transition: background-size 2s ease-in-out;
-webkit-transition: background-size 2s ease-in-out;
}
div:hover {background-size: 60% 60%;}