Forem: daivi

water drop:sketch

daivi — Tue, 12 Sep 2023 13:44:28 +0000

Blobby: It appears, wobbles, changes its shape and disappears again.

daivi — Mon, 11 Sep 2023 04:18:38 +0000

Upload File

daivi — Sat, 02 Sep 2023 16:03:23 +0000

Byciclopter

daivi — Thu, 31 Aug 2023 05:59:11 +0000

User Gallery

daivi — Tue, 29 Aug 2023 10:39:00 +0000

Tooltip

daivi — Mon, 28 Aug 2023 16:24:12 +0000

Analog Clock

daivi — Fri, 25 Aug 2023 10:00:16 +0000

Walking Boot

daivi — Tue, 22 Aug 2023 06:05:49 +0000

Watch

daivi — Sun, 20 Aug 2023 14:32:31 +0000

Smoke Animation(color with background music)

daivi — Sat, 19 Aug 2023 11:06:28 +0000

Go to my github page for the live project preview

//Html, css:
<html>
    <head>
        <title>Smoke Animation</title>
        <style type="text/css">
            body{
                background: linear-gradient(45deg, #2B124C 20%, #854f6c 50%, #522b5b 90%);
                width:fit-content;
                height: fit-content;
            }
            section {
                height:90vh;  
            }
            section:before {
                content: '';
                position: absolute;
                top:0;
                left:0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to right, #e8bce8, #F39F5A, #AE445A, #662549, #451952, #1d1a39);
                pointer-events: none;
                mix-blend-mode: color;
                animation: animate 5s linear infinite;
            }
            video {
                background: linear-gradient(45deg, #2B124C 20%, #854f6c 50%, #522b5b 90%);
                object-fit: cover;
                margin-left: 5px;
                top:40%;
            }
            h1 {
                position:absolute;
                top:50%;
                width:100%;
                transform: translateY(-50%);
                text-align:center;
                font-family: sans-serif;
                color:#fff;
                font-size: 5em;
                letter-spacing: 0.1em;
            }
            h1 span {
                opacity:0;
                display:inline-block;
                animation:animate 1s linear forwards;
            }
            audio {
                display: none;
            }
            @keyframes animate {
                0% {
                    opacity:0;
                    transform: rotateY(90deg);
                    filter:blur(10px);
                }
                100% {
                    opacity:1;
                    transform: rotateY(0deg);
                    filter:blur(0);
                }
            }
            h1 span:nth-child(1){
                animation-delay:1s;
            }
            h1 span:nth-child(2){
                animation-delay: 2s;
            }
            h1 span:nth-child(3){
                animation-delay: 2.5s;
            }
            h1 span:nth-child(4){
                animation-delay: 3s;
            }
            h1 span:nth-child(5){
                animation-delay: 3.5s;
            }
            h1 span:nth-child(6){
                animation-delay: 3.75s;
            }
            h1 span:nth-child(7){
                animation-delay: 4s;
            }
            h1 span:nth-child(8){
                animation-delay: 4.5s;
            }
            h1 span:nth-child(9){
                animation-delay: 4.75s;
            }
            h1 span:nth-child(10){
                animation-delay: 5s;
            }
        </style>
    </head>
    <body>
        <section>
                <video src="smoke.mp4" autoplay loop muted></video>
            <h1>
                <span>D</span>
                <span>I</span>
                <span>M</span>
                <span>P</span>
                <span>L</span>
                <span>E</span>
                <span>W</span>
                <span>O</span>
                <span>R</span>
                <span>K</span>
            </h1>
            <audio id="background-music" autoplay loop>
                <source src="Killa - Retro Love.mp3.mp3" type="audio/mp3">
            </audio>
        </section>
        <script src="script.js"></script>
    </body>
</html>

Javascript code:
document.addEventListener("DOMContentLoaded", function() {
    const audioElement = document.getElementById("background-music");

    // Wait for the audio to be loaded
    audioElement.addEventListener("loadedmetadata", function() {
      // Check if audio duration is at least 20 seconds
      if (audioElement.duration >= 20) {
        // Set the starting time to 21 seconds
        audioElement.currentTime = 20;
        // Play the audio
        audioElement.play();
      }
    });
  });{% embed  %}

Smoke Animation(Colorful)

daivi — Sat, 19 Aug 2023 09:59:01 +0000

(http://127.0.0.1:5500/index.html)

<html>
    <head>
        <title>Smoke Animation</title>
        <style type="text/css">
            body{
                background: linear-gradient(45deg, #2B124C 20%, #854f6c 50%, #522b5b 90%);
            }
            section {
                height:90vh;  
            }
            section:before {
                content: '';
                position: absolute;
                top:0;
                left:0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to right, #e8bce8, #F39F5A, #AE445A, #662549, #451952, #1d1a39);
                pointer-events: none;
                mix-blend-mode: color;
            }
            video {
                background: linear-gradient(45deg, #2B124C 20%, #854f6c 50%, #522b5b 90%);
                object-fit: cover;
                margin-left: 5px;
                top:40%;
            }
            h1 {
                position:absolute;
                top:50%;
                width:100%;
                transform: translateY(-50%);
                text-align:center;
                font-family: sans-serif;
                color:#fff;
                font-size: 5em;
                letter-spacing: 0.1em;
            }
            h1 span {
                opacity:0;
                display:inline-block;
                animation:animate 1s linear forwards;
            }
            @keyframes animate {
                0% {
                    opacity:0;
                    transform: rotateY(90deg);
                    filter:blur(10px);
                }
                100% {
                    opacity:1;
                    transform: rotateY(0deg);
                    filter:blur(0);
                }
            }
            h1 span:nth-child(1){
                animation-delay:1s;
            }
            h1 span:nth-child(2){
                animation-delay: 2s;
            }
            h1 span:nth-child(3){
                animation-delay: 2.5s;
            }
            h1 span:nth-child(4){
                animation-delay: 3s;
            }
            h1 span:nth-child(5){
                animation-delay: 3.5s;
            }
            h1 span:nth-child(6){
                animation-delay: 3.75s;
            }
            h1 span:nth-child(7){
                animation-delay: 4s;
            }
            h1 span:nth-child(8){
                animation-delay: 4.5s;
            }
            h1 span:nth-child(9){
                animation-delay: 4.75s;
            }
            h1 span:nth-child(10){
                animation-delay: 5s;
            }
        </style>
    </head>
    <body>
        <section>
            <video src="smoke.mp4" autoplay muted></video>
            <h1>
                <span>D</span>
                <span>I</span>
                <span>M</span>
                <span>P</span>
                <span>L</span>
                <span>E</span>
                <span>W</span>
                <span>O</span>
                <span>R</span>
                <span>K</span>
            </h1>
        </section>

    </body>
</html>

Smoke Animation(Black)

daivi — Sat, 19 Aug 2023 09:25:11 +0000

http://127.0.0.1:5500/index.html

Smoke Animation

<br>
body{<br>
background:#000;<br>
}<br>
section {<br>
height:90vh;</p>
<div class="highlight"><pre class="highlight plaintext"><code> }
video {
object-fit: cover;
margin-left: 5px;
top:40%;
}
h1 {
position:absolute;
top:50%;
width:100%;
transform: translateY(-50%);
text-align:center;
font-family: sans-serif;
color:#ddd;
font-size: 5em;
letter-spacing: 0.1em;
}
h1 span {
opacity:0;
display:inline-block;
animation:animate 1s linear forwards;
}
@keyframes animate {
0% {
opacity:0;
transform: rotateY(90deg);
filter:blur(10px);
}
100% {
opacity:1;
transform: rotateY(0deg);
filter:blur(0);
}
}
h1 span:nth-child(1){
animation-delay:1s;
}
h1 span:nth-child(2){
animation-delay: 2s;
}
h1 span:nth-child(3){
animation-delay: 2.5s;
}
h1 span:nth-child(4){
animation-delay: 3s;
}
h1 span:nth-child(5){
animation-delay: 3.5s;
}
h1 span:nth-child(6){
animation-delay: 3.75s;
}
h1 span:nth-child(7){
animation-delay: 4s;
}
h1 span:nth-child(8){
animation-delay: 4.5s;
}
h1 span:nth-child(9){
animation-delay: 4.75s;
}
h1 span:nth-child(10){
animation-delay: 5s;
}
</style>
</head>
<body>
<section>
<video src="smoke.mp4" autoplay muted></video>
<h1>
<span>D</span>
<span>I</span>
<span>M</span>
<span>P</span>
<span>L</span>
<span>E</span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>K</span>
</h1>
</section>
</body>
</code></pre></div>
<p></html><strong>``</strong></p>