Particle effect in the header

Webdesign Help
1

Hi, I am trying to include a particle effect that appears only in the header image. I’ve managed to get it to show, but the particle effect is going out of the image. How can I make the particle effect match exactly above the header image? Can someone give me a hand?

My web: https://creotuweb.net

2

I see no particle effect when I view your website

3

obviously it’s not there because I don’t know how to put it, that’s why I’m asking it here.

4

What is the “it” in “it to show”? What did you get to show? The way your post reads, it sounds like you’re saying you got something working, but it’s not working the way you’d like (going out of the image?)

I don’t see any “particle effect” on your page at all. Also the term “particle effect” is overly vague. It can mean countless different things. Here is a whole page of examples of different “particle effects.”

It’s impossible to advise you on how to add any kind of effect to your website if we can’t see an example of what you’re trying to achieve.

5

I have managed to get the particle effect to appear but it goes out from under the rocket image. How can I make it not to go out of the image? obviously in desktop and mobile mode.

6

@Languedok

In your masthead class add:

position: relative;

in your particles-js id change

height: 100vh;

to

height: 100%;
7

In your PoliticaCookies.js you have jQuery code but you don’t load jQuery
You can change the code in PoliticaCookies.js to this and you don’t need jQuesry

function getCookie(name) {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim();
        if (cookie.startsWith(name + '=')) {
            return cookie.substring(name.length + 1);
        }
    }
    return null;
}

function setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

function eraseCookie(name) {
    document.cookie = name + '=; Max-Age=-99999999;';
}

function cookieConsent() {
    if (!getCookie('allowCookies')) {
        document.getElementById('cookies').style.display = 'block';
    } else {
        document.getElementById('cookies').style.display = 'none';
    }
    document.getElementById('cookies').classList.add('show');
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('btnDeny').addEventListener('click', function(e) {
        e.preventDefault();
        eraseCookie('allowCookies');
        document.getElementById('cookies').style.display = 'none';
    });

    document.getElementById('btnAccept').addEventListener('click', function(e) {
        e.preventDefault();
        setCookie('allowCookies', '1', 7);
        document.getElementById('cookies').style.display = 'none';
    });

    cookieConsent();
});
1 Like
8

thanks, it seems to be working perfectly :slight_smile:

1 Like