Once the tracking process has finished, I would like to blur the image

Question

Once the tracking process has finished, I would like to blur the image

Currently, I am in the process of developing a website feature where users can track their packages. The tracking screen displays the real-time status of the package, with completed processes appearing blurred while the current status glows. Below is the HTML and CSS code snippet I've implemented for this feature:

li {
  list-style-type: none;
  float: left;
  margin: 10px;
}

.imgage {
  margin-top: 150px;
}

body h2 {
  font-family: sans-serif, 'Montserrat';
}

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<ul>
  <li>
    <div class="imgage">
      <img src="images/fil_1.jpg" width="202px" height="100px">
  </li>
</ul>
<ul>
  <li>
    <div class="imgage">
      <img src="images/export1.jpg" width="202px" height="100px">
      <h2>IMPORT</h2>
  </li>
</ul>
<ul>
  <li>
    <div class="imgage">
      <img src="images/UKimport.jpg" width="202px" height="100px">
      <h2>CARRIER</h2>
  </li>
</ul>
<ul>
  <li>
    <div class="imgage">
      <img src="images/DHL.jpg" width="202px" height="100px">
      <h2>DHL</h2>
  </li>
</ul>
<ul>
  <li>
    <div class="imgage">
      <img src="images/HMRC_logo.jpg" width="202px" height="100px">
      <h2>HMRC</h2>
  </li>
</ul>
<ul>
  <li>
    <div class="imgage">
      <img src="images/Importt.jpg" width="202px" height="100px">
  </li>
</ul>

javascript jquery html css blur

Answer 1

Answer №1

It was my endeavor to comprehend your desired outcome.

To my understanding, you intended to implement a blur effect on the page during loading and then reveal the fully loaded content.

I have incorporated the necessary code to achieve this functionality, along with additional code to simulate the loading of photos that were missing due to incomplete URIs.

If this does not align with your expectations, I kindly ask you to modify your inquiry so that I may adjust my response accordingly.

// Emulating loading the photos
$(window).on('load', function() {
    $("#cover").fadeOut(200);
});

function callLoad(){
    $(window).load();
}
setTimeout(callLoad, 1000);

$(function() {
  
  $('.image').each(function(){
    let randomNumber = (Math.floor(Math.random() * 100) + 1);
    $(this).attr('src', 'https://picsum.photos/id/' + randomNumber + '/202/100');      
  });    

  var images = $('.image').sort(function (a, b) {
    return +$(a).data('sort') - +$(b).data('sort');
  });
  
  var index = 0;
  var getNextImage = function(index){
    var remainder = index % images.length;
    return $(images[(remainder === 0) ? images.length - 1 : remainder - 1]);
  };
    
  $("#btnNext").click(function(){    
    getNextImage(index - 1).addClass("blur-content");
    getNextImage(index).toggleClass("blur-content");   
    index++;
  });
  
});

li {
  list-style-type: none;
  float: left;
  margin: 10px;
}

.imgage {
  margin-top: 50px;
}

body h2 {
  font-family: sans-serif, 'Montserrat';
}

#cover {
  top:0; 
  left: 0;  
  position: fixed; 
  height: 100%; 
  width: 100%; 
  background: #CCC; 
  z-index:9999;
}

.blur-content {
    -webkit-filter: url(#svg-blur);
    filter: url(#svg-blur);
}

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<button id="btnNext"> Next </button>
<div id="cover" class="blur-content"></div>
<div>
  <ul>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/fil_1.jpg" width="202px" height="100px" data-sort="7">
        <h2>SOMETHING</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/export1.jpg" width="202px" height="100px" data-sort="2">
        <h2>IMPORT</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/UKimport.jpg" width="202px" height="100px" data-sort="3">
        <h2>CARRIER</h2>
    </li>
  </ul>

  <ul>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/DHL.jpg" width="202px" height="100px" data-sort="4">
        <h2>DHL</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/HMRC_logo.jpg" width="202px" height="100px" data-sort="5">
        <h2>HMRC</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/Importt.jpg" width="202px" height="100px" data-sort="6">
        <h2>HMRC2</h2>
    </li>
  </ul>
</div>

<!-- SVG Blur Filter -->
<!-- 'stdDeviation' is the blur amount applied -->
<svg id="svg-filter-blur">
    <filter id="svg-blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
    </filter>
</svg>

Answer 2

It was my endeavor to comprehend your desired outcome.

To my understanding, you intended to implement a blur effect on the page during loading and then reveal the fully loaded content.

I have incorporated the necessary code to achieve this functionality, along with additional code to simulate the loading of photos that were missing due to incomplete URIs.

If this does not align with your expectations, I kindly ask you to modify your inquiry so that I may adjust my response accordingly.

// Emulating loading the photos
$(window).on('load', function() {
    $("#cover").fadeOut(200);
});

function callLoad(){
    $(window).load();
}
setTimeout(callLoad, 1000);

$(function() {
  
  $('.image').each(function(){
    let randomNumber = (Math.floor(Math.random() * 100) + 1);
    $(this).attr('src', 'https://picsum.photos/id/' + randomNumber + '/202/100');      
  });    

  var images = $('.image').sort(function (a, b) {
    return +$(a).data('sort') - +$(b).data('sort');
  });
  
  var index = 0;
  var getNextImage = function(index){
    var remainder = index % images.length;
    return $(images[(remainder === 0) ? images.length - 1 : remainder - 1]);
  };
    
  $("#btnNext").click(function(){    
    getNextImage(index - 1).addClass("blur-content");
    getNextImage(index).toggleClass("blur-content");   
    index++;
  });
  
});

li {
  list-style-type: none;
  float: left;
  margin: 10px;
}

.imgage {
  margin-top: 50px;
}

body h2 {
  font-family: sans-serif, 'Montserrat';
}

#cover {
  top:0; 
  left: 0;  
  position: fixed; 
  height: 100%; 
  width: 100%; 
  background: #CCC; 
  z-index:9999;
}

.blur-content {
    -webkit-filter: url(#svg-blur);
    filter: url(#svg-blur);
}

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<button id="btnNext"> Next </button>
<div id="cover" class="blur-content"></div>
<div>
  <ul>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/fil_1.jpg" width="202px" height="100px" data-sort="7">
        <h2>SOMETHING</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/export1.jpg" width="202px" height="100px" data-sort="2">
        <h2>IMPORT</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/UKimport.jpg" width="202px" height="100px" data-sort="3">
        <h2>CARRIER</h2>
    </li>
  </ul>

  <ul>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/DHL.jpg" width="202px" height="100px" data-sort="4">
        <h2>DHL</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/HMRC_logo.jpg" width="202px" height="100px" data-sort="5">
        <h2>HMRC</h2>
    </li>
    <li>
      <div class="imgage">
        <img class="image blur-content" src="images/Importt.jpg" width="202px" height="100px" data-sort="6">
        <h2>HMRC2</h2>
    </li>
  </ul>
</div>

<!-- SVG Blur Filter -->
<!-- 'stdDeviation' is the blur amount applied -->
<svg id="svg-filter-blur">
    <filter id="svg-blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
    </filter>
</svg>

Once the tracking process has finished, I would like to blur the image

Answer №1

Similar questions

Switching images dynamically using Flask and JavaScript

PHP version 7.2.1 is throwing an error indicating an undefined index for the file_upload

Could it be that the reason why document.getElementById is undefined in a Vue2 component is due to a misunderstanding

Creating HTML tables dynamically using PHP

ReactJs allows for fluid scroll animations that persist as long as the mouse is clicked or a button

Pick and modify a particular component in ReactJS

Secure your online file with a password

Trigger an Ajax call to submit data and execute a PHP SQL query upon clicking

Are arrays being used in function parameters?

Button to return to top and footer placement

Implementing dual pagination components in Vue JS for dynamic updates on click

To modify the text within the pagination select box in ANTD, follow these steps:

What is the best way to code an HTML block with jQuery?

What is the reason behind modern browsers continuing to add spaces between inline blocks when there is whitespace present?

What is the most efficient method for transferring ASP.NET form data to an Excel spreadsheet?

What is the best way to align my grid cells to the center?

Incorporating Protractor for automated testing with PhantomJS

How can we customize HTML images without allowing third-party JavaScript to enlarge them?

How does Facebook utilize ajax to refresh content on a user's side only upon request?

Issue with Ext JS: The property 'substring' is being attempted to be read from an undefined value