CODEWITHSUNDEEP
javascriptwordpresselementorcodepen
AMG
AMG

Reputation: 1

How Can I add this codepen in Elementor

UPDATE: I'm attempting to apply the ripple effect to a specific section, but all I'm seeing is the background color and the desired effect only works in the HTML code area.

does anyone know how to set it as a background effect, so that it will be applied to a specific section

this is the code that I'm inserting in HTML code in Elementor

    
<!DOCTYPE html>
<html>
<head>
    <title>Ripple Effect</title>
</head>
<body>
    <section style="max-height: auto; width:720px; margin: auto;";background: rgb(0,22,36);
background: linear-gradient(43deg, rgba(0,22,36,1) 0%, rgba(9,84,121,1) 42%, rgba(1,128,93,1) 100%);
 >
        <div id="ripple" style="height: 400px;"
        ></div>
    </section>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.ripples.min.js'></script>
    <script src="./script.js"></script>
    <script>
        $('#ripple').ripples({
            resolution: 512,
            dropRadius: 20,
            perturbance: 0.04,
        });
    </script>
</body>
</html>

Upvotes: 0

Views: 196

Answers (1)

miga
miga

Reputation: 4055

Inside of addGuiSettings() is an external library that build the little GUI. You probably don't want to use that in your page so remove that. There will also be an error in the devtools that shows you that.

If you want to use that you have to use the external library from the codepen too.

And you have to put the <canvas> part before your script. Otherwise it will show you "canvas is null" in the error log

Upvotes: 0

Related Questions