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

Hiding Bootstrap Popover When User Clicks Outside of it

My webpage has dynamically loaded content featuring popovers which need to be bound to the body for correct loading and appearance. I am looking for a solution to hide the popovers when a user clicks outside them or on another popover trigger. After some ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

Enhancing my Javascript code by adjusting the styling of a link within the page navigation bar

Looking for assistance with a javascript and DOM code improvement. I currently have a page navigation bar structured like this (used on certain pages): <div id="pagebar"> <a href="iraq_pixra1.html">1</a> <a href="iraq_pixra2.html"> ...

javascript

Employing state management in React to toggle the sidebar

A working example of a sidebar that can be toggled to open/close using CSS, HTML and JavaScript is available. Link to the Example The goal is to convert this example to React by utilizing states instead of adding/removing CSS classes. To ensure the side ...

javascripthtmlcssreactjs

Ways to position an element at the edge of the browser either on the left or right side when the image is not in a centered container

Looking to create a unique layout that involves: Utilizing a three-column structure Incorporating a div element that spans two columns Positioning an image within the two-column div so that it extends to the left edge of the browser window while staying ...

htmlcssimage

CSS @page does not render content within @top-center, @bottom-right, and similar positions

Currently, I am working on generating a HTML file that is print-ready and have been using CSS @page for this purpose. However, I have encountered a major issue with displaying page numbers utilizing @bottom-right and other similar solutions. Could there be ...

htmlcssprinting

The event on the full calendar is stuck in place and will not budge

function moveEvent(event, delta, revertFunc) { console.log(event.title + " has been moved to " + event.start.format()); var page = '../include/UpdateCalendarEvent.php'; $("#dialog") .data('start', event.start.format ...

javascriptjqueryajaxeventsfullcalendar

Implementing HTMX with just one HTML page: A step-by-step guide

Just starting out with HTMX and created a sample: <!DOCTYPE html> <html> <head> </head> <body> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfema ...

javascriptajaxhtmx

Expand the image background to fit within a div container

Below is the code snippet I am working on: <div id="intro_section_upper" > <%= image_tag("video_background.jpg", :id=>"video_bg") %> <div id="video_table_main" > <table class=" ...

htmlruby-on-railscss

Guidelines for determining a screen's location using Javascript

I have integrated a label onto an image and I am trying to figure out how to determine the exact position of each label on the screen. Is there a way to retrieve the screen coordinates for each label? Below is the code snippet that I have uploaded, perha ...

javascriptcssthree.js

Requesting data from an ASP.NET MVC web API using an Ajax call

I have been working on an MVC app and trying to establish an AJAX connection to a web API controller. However, the error message that keeps appearing is "Unidentified". Additionally, when I attempt to throw a random exception in my api controller delete ac ...

asp.net-mvcjqueryasp.net-web-api

Move the footer down to the bottom of the page

I'm struggling to create a footer that consistently stays at the bottom of the page, regardless of the amount of content on the page. I've tried following various tutorials but haven't had much success. I'm starting to think I must be d ...

javascriptjqueryhtmlcssfooter

How can I position a vertically centered image to the left of a block paragraph using inline styles?

I am faced with the challenge of aligning a 100x100 vertically-centered image to the left of a text block that extends beyond its height. It is important that the text does not wrap underneath the image but stays in a single block on the right side. I must ...

htmlcssimagepositioninginline-styles

Sort items in a list manually using Jquery sortable feature

Is there a way to sort the listitems using either sortList[0] or sortList[1]? Example: http://jsfiddle.net/wmaqb/20/ HTML <div id="sortable"> <div id="sort_18b0c79408a72">Berlin</div> <div id="sort_dkj8das9sd98a" ...

jquerysortingjquery-ui-sortable

What is the best way to adjust the screen to display the toggle element when it is opened?

Here is the code I'm currently using to create a toggle button that shows or hides extra content when clicked: $(".toggle .button").click(function() { $(this).next().slideToggle('fast'); }); The issue I am encountering is that if t ...

javascriptjquerypositiontoggle

Eliminate event listener using unique identifier

Is there a way to retrieve information about all event handlers for an element in JavaScript? $._data($('#element_id')[0], "events"); This will provide a detailed record of every event handler attached to the element. 0: {type: "c ...

javascriptjqueryevents

Passing component properties using spaces in VueJS is a simple and effective

I am encountering an issue where I want to pass component props from my view, but I am facing a challenge due to the presence of a space in the value. This causes Vue to return the following error: vendor.js:695 [Vue warn]: Error compiling template: - inva ...

javascriptvue.js

Changing the color of Material-UI's Toggle component: A step-by-step guide

After placing my Toggle button in the AppBar, I encountered an issue where both items were the same color when the Toggle was selected. Despite attempting various solutions (seen below), I have not been successful in changing its color. import React fr ...

javascriptreactjsmaterial-ui

Guide on how to programmatically assign a selected value to an answer using Inquirer

Currently, I'm utilizing inquirer to prompt a question to my users via the terminal: var inquirer = require('inquirer'); var question = { name: 'name', message: '', validation: function(){ ... } filter: function( ...

javascriptnode.jsnpm

How can Vue be used to dynamically alter a string within an input field by incorporating the status of checked checkboxes?

Yesterday, I stumbled upon a concise Vue presentation on YouTube before answering a technical question on Stack Overflow. The question involved generating checkbox elements based on a string of text containing '1's and '0's, with the ch ...

javascriptvue.js

A guide on accessing the first element in an array when performing multiplication within the Interval component in React.js

I am having trouble initiating an if statement from number 0 once the window is loaded, as it seems to be skipping over 0 and starting from 1 instead. Can someone please assist me in understanding how this works? showAnime = () => { let counter ...

javascriptreactjsif-statementiteration