Is it possible to achieve seamless image transitions in Firefox like it does in Chrome?

To achieve the desired effect, you may need to use some javascript. Visit aditagarwal.com for more information.

Styling with CSS:

.images-wrapper{

    position: fixed;
    left: 0;
    top: 80px;
    bottom: 0;
    width: 100%;
    height: 100vh;
    animation: animate 16s ease-in-out infinite;// customize as needed
    background-size: cover;

}


@keyframes animate{

    0%,100%{
        background-image: url(coding2.jpeg);

    }
    25%{
        background-image: url(Flowers.png);
    }
    50%{
        background-image: url(Desert.png);
    }
    75%{
        background-image: url(sunset.png);
    }
}

Adding HTML:

<div class="images-wrapper">

</div>
javascripthtmlcssimagefirefox

Answer №1

In this solution, I have incorporated some JavaScript code to continuously change the background image of the element. Additionally, I have included a CSS property transition:background 1s ease-in to ensure a smooth transition effect.

const elem = document.getElementById("main");

const bg = [
  "https://wallpapercave.com/wp/wp2599605.jpg",
  "https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg"
];

elem.style.backgroundImage = `url(${bg[0]})`;
let i = 0;
setInterval(() => {
  i = i == 1 ? 0 : 1;
  elem.style.backgroundImage = `url(${bg[i]})`;
}, 2000);
div {
  position: fixed;
  left: 0;
  top: 80px;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat:no-repeat;/*Modified for demo*/
  transition: background 1s ease-in;
}
<div id="main">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing a single variable across different JavaScript scripts - where one script includes a .ready function while the other does not

I am facing a challenge with 2 javascript scripts that I have: <script type="text/javascript"> function capture(){ var canvas = document.getElementById('canvas'); var video = document.getElementById('video'); canvas.getContext ...

javascriptjqueryajaxvariablesshare

Is Python being used to track NBA.com stats?

Does anyone have any advice on how to extract NBA.com "tracking" stats using a python script and display them in a simple table? I'm particularly struggling with this specific section of stats on the site. Accessing stats directly from NBA.com can be ...

javascriptpythondatabaseweb-scraping

What could be causing the div to not respond to ngAnimate?

Recently, I encountered an issue with adding animations to a list of <div>'s in my webapp. After incorporating ngAnimate into the app.js file and including ng-animate="'animate'" in the <div>, I was disappointed to find that the ...

javascripthtmlcssangularjs

Obtain the ending section of a URL using JavaScript

Is it possible to extract the username from a URL like this example? I'm interested in seeing a regex method for achieving this. The existing code snippet only retrieves the domain name: var url = $(location).attr('href'); alert(get_doma ...

javascriptjqueryregex

Utilize the Appy Wordpress Widget in your designated widget region

This is my first time working with WordPress, and I am attempting to add a custom Widget to an HTML box. Here is the HTML: The blank News box Following some tutorials, I created a new Widget area inside my functions.php file using the following code: &l ...

phphtmlwordpresswidgetarea

What are some best practices for managing object-level variables in TypeScript and Vue.js?

Uncertain about the optimal approach, I am looking to create a component and leverage some object level variables. Consider the example below: import Vue from "vue" import * as paper from "paper" export default Vue.extend({ template: ` <d ...

javascripttypescriptvue.jsvuejs2

Sinon threw an assertion error out of the blue

Just diving into using Sinon and facing a small hiccup. Let's say we have a module (named myModule.js) defined as follows: //myModule.js var _f2 = function() { console.log('_f2 enter'); return {prop1:'var1'}; }; var f1 = ...

javascriptnode.jsunit-testingsinon

What technique works best for changing the visibility of an image without causing other elements to shift position?

On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a s ...

jquerycsshovertoggle

Broaden the default className attribute of the component

Greetings! I'm currently using Bootstrap with React and I am trying to figure out how to extend my component by passing className props deeper. Within my atom component, I have two separate files. The first one contains the component declaration. B ...

javascriptcssreactjsreact-bootstrapbootstrap-5

Regex substitute every instance of the phrase CONTAINED within brackets

I am looking to replace all instances of text within brackets, including the brackets themselves, in a given string. The specific text to be replaced will be stored in a variable in Javascript. Using a simple regex in a replace method won't work due t ...

javascriptregex

Using ORDER BY RAND() on Internet Explorer consistently returns the same row

I am using a JavaScript function called by a button to perform an AJAX request to a PHP file. This PHP file connects to the database and echoes a random row from the database. The following PHP code is responsible for this: $value = $db->get_row("SELEC ...

phpjqueryhtmlsqlajax

How can I position two bootstrap tables side by side based on their columns

Currently, I am utilizing bootstrap and Laravel form control to generate the table structures below. The one issue I am encountering is figuring out how to align the delete and edit buttons from two separate tables. Here is a snapshot of the current layout ...

csslaravelbootstrap-4

Transferring JSON data using AJAX

I am having trouble sending JSON via AJAX using pure JavaScript. While I can successfully retrieve values back from PHP, I am struggling to retrieve a specific JSON array. var mname = ["john", "mary", "eva"]; var fname = 678; clicked_keyword_test = {"last ...

javascriptphpajaxjson

Discover the method to retrieve every element from a Listbox with the click of a Button and utilizing an ajax call

How can I retrieve all the elements from a Listbox when a Button Click event triggers an ajax call? I have created a function that successfully returns all the elements from the Listbox. However, when I try to bind it with the ajax call, it doesn't w ...

javascriptjqueryjquery-uikendo-uijquery-ajaxq

Having trouble with the Three.js OBJ loader in CodePen?

Currently, I am experiencing a challenge with loading an OBJ file on Three.js. Oddly enough, the functionality seems to be working perfectly fine when I deploy the files on my server as demonstrated here: However, when attempting to run it on Codepen, I e ...

javascripthtmlcssthree.js

The map feature is not working on the imported Obj file

After my previous question here, I'm attempting to give each side of this obj a different texture. However, despite applying everything in the correct order, nothing is showing up and there are no console errors. It seems like a simple task but I&apo ...

javascriptthree.js

A step-by-step guide on showcasing freshly submitted input data through Ajax

I'm having trouble with this issue! Once I submit the new input, it doesn't show up in the div. Below is my JavaScript code: $('#addVariable').validate({ rules: { variable: {required:true}} , submitHandler: functio ...

phphtmlajax

When a user clicks on JavaScript, it will return true if clicked and false if

Currently working with selenium Java code and incorporating JavaScript execution using the executeScript method, as seen below: WebElement menu = driver.findElement(By.cssSelector(string1)); ((JavascriptExecutor) driver).executeScript("arguments ...

javascriptjavaselenium

Struggling with implementing Mobile Navigation menu

I'm struggling to implement a mobile menu for my website. After adding the necessary code, when I view the page in a mobile viewport, all I see are two sets of periods ("..."). However, unlike in the code snippet provided, the list does appear on the ...

javascriptjqueryhtmlcss

Make sure the text fits perfectly without any extra spaces

When working with CSS/HTML, I noticed that using a simple text within a div without any margin or padding, and specifying a font-size of 36px with a line-height also set to 36px doesn't fit perfectly - there is always some spacing at the top of the li ...

htmlcsstypography