How to call background-image URL in Javascript

Question

I have a section in Squarespace where I've set the background image via custom CSS:

background-image:url('https://images.squarespace-cdn.com/content/v1/5f187409db749f75b4b70872/1595438345426-RJBC7YPJSV4XRBU4WSDM/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg');
background-repeat:no-repeat;

I'm trying to apply this hover distortion effect on said background image, and need to call/target it but I don't know how as I'm not a developer - how would I go about doing so? Here's the Javascript code I have so far:

var myAnimation = new hoverEffect({
    parent: document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].section-background'),
    image1: ???,
    image2: ???,
    displacementImage: 'https://homesteadmodern.com/assets/displacement.png'
});

UPDATE

I managed to target the div more specifically with parent: document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].page-section > div') , and have managed to use actual URLs in image1 and image2 which show up like a background image as intended. The only problem now is that the hover doesn't work anymore, even though it does work when I take out > div (but that causes the image to show up in the wrong place)? Any help?

Answer 1

You can do this by using getComputedStyle() function .

var parent = document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].section-background');
var bgImage = getComputedStyle(parent).getPropertyValue('background-image');

The value of bgImage will be this:

url("https://images.squarespace-cdn.com/content/v1/5f187409db749f…ALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg")

which is the exact value you put in CSS. If you want to get the URL, you can add a replace() function, as suggested by this answer to a similar question :

var bgImage = getComputedStyle(parent)
        .getPropertyValue('background-image')
        .slice(4, -1).replace(/"/g, "");

The value of bgImage now will be:

https://images.squarespace-cdn.com/content/v1/5f187409db749f…ALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg

Answer 2

ETA: It seems for this particular tutorial on distortion effects, you don't need to actually call a function. Simply assigning the new hoverEffect to a variable and including the hover-effect part of the robin dela library is sufficient to activate the effect.

You can use JavaScript mouseover and mouseout events.

ie where parent is selecting your element (and assuming you might like to change background image on hover and change back when no longer hovering):

 const parent = document.querySelector("your HTML stuff here"); parent.addEventListener("mouseover", function(){ parent.style.backgroundImage = "url('new-image-url')"; }); parent.addEventListener("mouseout", function(){ parent.style.backgroundImage = "url('original-image-url')"; });

you can also style this as:

 parent.onmouseover = function(){}; parent.onmouseout = function(){};

That can be fine if you're only ever doing one event on the element, is my understanding.