Jervi-sir/jervi-site

Jervi - portfolio

| Demo |

in process

• Reveal

• Animate Jeriv

• about me modal

• my skills modal

• turn moto pic into gif

• Responsive

• make form mailing system

• Logo

• Jervi pic

• moto pic

• font modern

• sliding band (marquee)

• 2KingsWebsites logo

• Contanct me modal

Resources

Reveal Content Animation
Cyberpunk Button
Parallax
news tape marquee
background split

Socials

youtube
facebook
instagram

Tips

To frame animate pictures do :

<ul id="scene">
        <img src="/img/jervi6.png" id="jervi">
</ul>

var jervi = document.getElementById("jervi");

jervi.classList.add("jervi-frames");

setTimeout(() => {
    setTimeout(() => {
        jervi.src = "/img/jervi5.png";
        setTimeout(() => {
            jervi.src = "/img/jervi4.png";
        }, 166);
    }, 166);
}, 0);

#jervi.jervi-frames {
    animation-name: jerviAnimation;
    animation-duration: 1s;
    transition: 1s;
}
@keyframes jerviAnimation {
    16.66% {
        background-image: url(/img/jervi6.png);
    }
    33.33% {
        background-image: url(/img/jervi5.png);
    }
    50% {
        background-image: url(/img/jervi4.png);
    }
    66.66% {
        background-image: url(/img/jervi3.png);
    }
    83.33% {
        background-image: url(/img/jervi2.png);
    }
    100% {
        background-image: url(/img/jervi1.png);
    }
}

to get element by tag

var menu = document.getElementsByClassName("menu")[0];