I'm developing a New Year greeting card and I would like to make an image appear from below after pressing the button that also starts the music.
How can I do it using jquery?
$(document).ready(function() {
$(".btn_music .fa-play-circle").on('click', function() {
$(this).hide();
$('.fa-pause-circle').fadeIn();
$('#myMusic')[0].play();
$("#container").fireworks({
sound: true, // sound effects
opacity: 0.55,
width: '90%',
height: '10%'
}).play();
$('#champagne').hide();
$('#champagne').slideToggle(1000);
});
$(".btn_music .fa-pause-circle").on('click', function() {
$(this).hide();
$('.fa-play-circle').fadeIn();
$('#myMusic')[0].pause();
});
});
body {
background: linear-gradient(#000, #01f);
font: 10.5em Arial;
}
html,
body {
height: 100%;
}
.stroke {
stroke: goldenrod;
stroke-width: 0.5px;
stroke-dasharray: 0 250;
stroke-opacity: 1;
fill: none;
animation: stroke_offset 8s infinite;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes stroke_offset {
25% {
stroke-dasharray: 0 250;
stroke-opacity: 1;
}
50% {
stroke-dasharray: 250 0;
stroke-opacity: 0.75;
}
55% {
stroke-dasharray: 250 0;
stroke-opacity: 0;
}
70% {
stroke-dasharray: 250 0;
stroke-opacity: 0;
}
75% {
stroke-dasharray: 250 0;
stroke-opacity: 0.75;
}
100% {
stroke-dasharray: 0 250;
stroke-opacity: 1;
}
}
.fill {
fill: gold;
fill-opacity: 0;
animation: fill_offset 8s infinite;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes fill_offset {
25% {
fill-opacity: 0;
}
35% {
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
70% {
fill-opacity: 1;
}
90% {
fill-opacity: 0;
}
100% {
fill-opacity: 0;
}
}
#fade-text {
font-family: 'Dancing Script', cursive;
font-size: 0.6em;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
.music {
position: absolute;
top: 22%;
left: 0;
right: 0;
margin: 0 auto;
}
.btn_music {
background-color: transparent;
color: #fff;
font-size: 85px;
border: none;
display: block;
margin: 0 auto;
opacity: .1;
transition: all linear .2s;
cursor: pointer;
outline: none;
}
.btn_music:hover {
opacity: 1;
}
.fa-pause-circle {
display: none;
}
#champagne {
display: none;
width: 300px;
height: 250px;
margin: 22% 43% auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="container"></div>
<div class="music">
<audio volume="1" id="myMusic" src="/public/music/Pepe-pepe-pepe-Disco-Samba-HQ.mp3" loop=""></audio>
<button class="btn_music">
<i class="far fa-play-circle"></i>
<i class="far fa-pause-circle"></i>
</button>
</div>
<svg version="1.1" viewBox="0 0 800 600">
<symbol id="fade-text">
<text x="50%" y="30%" text-anchor="middle">Happy New Year !</text>
<text x="48%" y="50%" text-anchor="middle">2021</text>
</symbol>
<g>
<use class="stroke" xlink:href="#fade-text"/>
<use class="fill" xlink:href="#fade-text"/>
</g>
</svg>
<br/>
<img src="public/img/cin_cin.gif" id="champagne">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="public/js/jquery.fireworks.js"></script>
<script src="/public/js/index.js"></script>
</body>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
