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 %}
Top comments (6)
Nice :-)
Your Work
Thanks :), but in your attached link smoke video is not working which is the main part of smoke animation.
:-)
Could you give me the link of the videos ?
okay
drive.google.com/file/d/1ncI67cgjR...
For the music , you can search on google.
You may want to place your code in a code element so it can be viewed easier!
If you want the code and files kindly visit my github page. I already uploaded all the files for this project. Next time i will put the code in better way.