Leveraging backstretch.js in combination with blur.js (or equivalent)

Query Update

I provided a response to the query below, however, I am experiencing some lag and a noticeable stepped transition between images. Can anyone offer advice on how to optimize this issue?

Perhaps it would be better to go back to using a static image that is randomly selected and displayed until the page is refreshed.

Inquiry

I am interested in learning if there is a way, or if someone has a working example, to blur a background image (possibly for a background slideshow).

The current setup I have goes through 12 images, each being shown for 10 seconds before transitioning to the next one. I would like to explore the option of blurring the background if feasible. In instances where the image needs to remain static, I would like it to select an image at random from a predefined list.

The code snippet below functions as intended (blur.js is included but not functioning as expected).

I have also tagged this with css3 as I understand that certain CSS3 properties can create a blur effect.

<script src="/js/jquery.js"></script>
<script src="/js/backstretch.js" type="text/javascript"></script>
<script src="/js/blur.js"></script>
<script>
$.backstretch([
    "https://download.unsplash.com/photo-1428604467652-115d9d71a7f1",
    "https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f",
    "https://download.unsplash.com/photo-1423882503395-8571951e45cc",
    "https://download.unsplash.com/photo-1422433555807-2559a27433bd",
    "https://download.unsplash.com/photo-1420819453217-57b6badd9e19",
    "https://download.unsplash.com/photo-1414912925664-0c502cc25dde",
    "https://download.unsplash.com/reserve/IPEivX6xSBaiYOukY88V_DSC06462_tonemapped.jpg",
    "https://download.unsplash.com/reserve/fPuLkQNXRUKI6HQ2cMPf_IMG_4761.jpg",
    "https://download.unsplash.com/photo-1425136738262-212551713a58",
    "https://download.unsplash.com/photo-1425036458755-dc303a604201",
    "https://download.unsplash.com/photo-1422640805998-18a4dd89bec2",
    "https://download.unsplash.com/reserve/Ept9mCvnTiahpYXPi9Ej_DSC_0010.jpg"
], {duration: 3000, fade: 1000});
</script>

http://jsfiddle.net/mstnorris/tg05oxk0/1/

javascriptjquerycssbackground-image

Answer №1

While working on a jsfiddle to showcase my progress, I came across vague.js while searching for blur.js on cdnjs.

The completed script link can be found below; it functions just as I intended and is quite simplistic.

$.backstretch([
    "https://download.unsplash.com/photo-1428604467652-115d9d71a7f1",
    "https://download.unsplash.com/photo-1428591501234-1ffcb0d6871f",
    "https://download.unsplash.com/photo-1423882503395-8571951e45cc",
    "https://download.unsplash.com/photo-1422433555807-2559a27433bd",
    "https://download.unsplash.com/photo-1420819453217-57b6badd9e19",
    "https://download.unsplash.com/photo-1414912925664-0c502cc25dde",
    "https://download.unsplash.com/reserve/IPEivX6xSBaiYOukY88V_DSC06462_tonemapped.jpg",
    "https://download.unsplash.com/reserve/fPuLkQNXRUKI6HQ2cMPf_IMG_4761.jpg",
    "https://download.unsplash.com/photo-1425136738262-212551713a58",
    "https://download.unsplash.com/photo-1425036458755-dc303a604201",
    "https://download.unsplash.com/photo-1422640805998-18a4dd89bec2",
    "https://download.unsplash.com/reserve/Ept9mCvnTiahpYXPi9Ej_DSC_0010.jpg"
], {duration: 3000, fade: 1000});

var vague = $('body').Vague({
    intensity:      10,      // Blur Intensity
    forceSVGUrl:    false,   // Force absolute path to the SVG filter,
    // default animation options
    animationOptions: {
      duration: 1000,
      easing: 'linear' // here you can use also custom jQuery easing functions
    }
});

vague.blur();

http://jsfiddle.net/mstnorris/s0Lbpzuu/2/

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

What is the best way to align text alongside icons using ng-bootstrap in Angular 8?

I have a set of four icons positioned next to each other, but I want them to be evenly spaced apart. I tried using the justify-content-between class, but it didn't work. How can I achieve this? I'm creating a Progressive Web App (PWA) for mobile ...

cssangularbootstrap-4angular-materialmaterial-design

The issue with Fancybox not functioning properly does not display any errors in Firebug, and all the images are

Why is Fancybox not functioning on this specific page? It has worked perfectly on numerous other websites with the same code. Firebug is not showing any errors. Any thoughts on what might be causing the issue? Appreciate any insight, Bob ...

jqueryfancybox

Is there a way to position the text to the right and the image to the left?

I have written the following code: <!DOCTYPE html> <html> <head> <title>UMass Boston Computer Science Club About page</title> <link href='https://fonts.googleapis.com/css?family=Chakra Petch' rel='sty ...

htmlcss

Encountering difficulties in JavaScript while trying to instantiate Vue Router

After following the guide, I reached the point where creating a Vue instance was necessary (which seemed to work). However, it also required providing a Vue Router instance into the Vue constructor, as shown below. const router = new VueRouter({ routes }) ...

javascriptroutesvue.js.net-corevue-router

Exploring the Dependency Injection array in Angular directives

After some deliberation between using chaining or a variable to decide on which convention to follow, I made an interesting observation: //this works angular.module("myApp", []); angular.module('myApp', ['myApp.myD', 'myApp.myD1&a ...

javascriptarraysangularjs

The functionality of socket.io is not functioning properly on the server, resulting in a 404

I encountered errors while working on a simple socket.io project on my server. The IP address I am using is . All files are stored in public_html and can be accessed through the URL: . Here are the code snippets: <!doctype html> <html> < ...

javascriptnode.jssocketsexpresssocket.io

What steps can I take to direct mobile visitors to the mobile-friendly version of my website?

Looking for a way to automatically redirect users on mobile devices from www.domain.com to the new mobile version at m.domain.com? ...

phpjavascriptjquerycsshtml

Delegating events with .on('click') and using the CSS negation selector :not()

Struggling to implement event delegation for a dynamically added or removed class? I need to create an event for elements that are clicked, but without a specific class. Here's the code I have so far, but it doesn't seem to be working. Could it b ...

jquerycsseventsdelegationnegation

Utilizing React to connect with Metamask and share the signer across various contracts

I'm currently working on a solution for sharing signers across multiple JavaScript files. In my walletConnect.js file, I successfully connect to Metamask and retrieve an ERC20 token contract. async function connect(){ try{ const accounts = awai ...

javascriptreactjsnext.jsethereumsolidity

Enhancing Image Quality with jspdf and Html2Canvas

We are currently utilizing jsPDF and HTML2canvas to create PDFs, however, we have noticed that the image resolution is quite high. Is there a method available to obtain low-resolution images using jquery, javascript, jsPDF, and html2canvas? function addE ...

javascriptjqueryjspdfhtml2canvas

Loading a form on the fly using jQuery

As I delve into the realm of web design, I encountered a perplexing issue that has left me stumped. My goal is to dynamically load a form into a div element using jQuery. Here's a snippet of my code: Inside the main file: $('#left_colum'). ...

phpjqueryhtmlajaxdynamic

Avoid creating a line break directly after the header, however allow for a line break

I find myself in a scenario where I require a paragraph that has a specific format: An Emphasized Title Some relevant information regarding the subject... I am looking to insert a new line before the title, ensuring it seamlessly integrates with the re ...

htmlcssheaderjekyll

Gliding along a div and concealing it out of view, making it seem like it has disappeared

I attempted to slide down the ".preloader" div after a 2-second delay using JQUERY, but I couldn't get it to work as expected. I didn't want to use a toggle button for this effect. I also experimented with creating an animation using @keyframes, ...

javascripthtmljquerycss

Using Python Webdriver to Execute JavaScript File and Passing Arguments to Functions

How can I execute a JavaScript function and pass arguments to it? value = driver.execute_script(open("path/file.js").read()) I have successfully executed the file, but I am unsure of how to pass arguments to the function within it. Any suggestions would ...

javascriptpythonselenium-webdriver

The AJAX response doesn't hold on for the query to complete

I'm currently facing an issue with a pop-up form that utilizes preventDefault on the submit button to avoid immediate submission. Using jQuery, I send the input to an AJAX function and aim to display a message to the user based on the AJAX function&ap ...

phpjquerymysqlajax

Hiding an element with display: none will prevent the hover effect from

I have integrated a CSS dropdown menu from this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button Additionally, I am utilizing jQuery .on("click", event with an AJAX call. Following the successful AJAX call, I am using the foll ...

jquerycssdisplay

Is there a specific method for organizing cached buffer conversions in Node.js for optimal efficiency?

In a GitHub discussion, it was pointed out that the Map's .has method does not work with buffers because identical buffers are considered as distinct objects. This limitation became apparent when attempting to store buffer string conversions in a map ...

javascriptnode.js

What is the best way to retrieve a specific property or attribute of a specific div element after obtaining it from e.target.parentNode?

e.target.parentNode will return this element. <div class="quantity"> <span class="glyphicon glyphicon-minus-sign"></span> <span class="product_Count"> 4 </span> <spa ...

javascript

Effective communication among sibling components in Vue.js

Interaction between parent and child components can be easily achieved using $broadcast and $dispatch However, I'm currently faced with a challenge regarding communication between sibling components. My current approach involves triggering a $dispatc ...

javascriptvue.js

Issue with anchor tag not functioning properly within toggle div

Can you please help me troubleshoot why the anchor tag is not functioning properly within my div elements? When I click on the first div, the second div is displayed but the anchor tag inside the first div does not seem to be working. <script> $(&ap ...

phpjqueryhtmlcss