05
Июл
2022

как оживить кнопки на скрине?

введите сюда описание изображения

Здраствуйте, хочу сделать, чтобы при нажатие на скрин, включалась определенная песня, также чтобы можно на паузу поставить и громкость регулировать, каким образом лучше всего будет сделать подобное?

/* стили гугл */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected];400&family=Staatliches&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected];700&display=swap');


* {
    padding: 0;
    margin: 0;

}

/* начало - менюшки */
/* header img{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    

    position: absolute;
    width: 50px;
    height: 50px;
    left: 20px;
    top: 40px;
} */
/* конец - менюшки */


/* начало левый бар с ссылками */

/* начало кнопки - музыка */

.music_platina{
    position: absolute;
    top: -80px;
    
}

.music_platina a{
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    line-height: 1.2;
}


/* конец кнопки - музыка */

.left_bar_social{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;

    position: absolute;
    left: 20px;
    top: 120px;
}

.left_bar_social img{
    width: 30px;
    height: 30px;
    padding-bottom: 70px;
}

/* начало концерты */

.concert_artist a{
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.2;
    color: black;

    padding-top: 0px;
}
/* конец концерты  */

/* конец - левый бар с ссылками */



.wrapper {
    width: 100%;
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #9e9e9e 0%, #ffffff 30%, #6a6a6a 100%);
}

/* надпись - имя, дата */
.info_artist {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;

    position: absolute;
    width: 812px;
    height: 258px;
    left: 160px;
    top: 100px;
}

.name_artist {
    width: 394px;
    height: 65px;

    /* font-family: 'Circular Std';  */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 65px;
    text-transform: uppercase;
}

/* .date_concert_artist {
    width: 334px;
    height: 91px;

    font-family: 'Circular Std';
    font-style: normal;
    font-weight: 400;
    font-size: 35px;
    line-height: 40px;
} */

/* конец - надпись имя, дата */


/* начало - скрины треков */
.cards {
    position: absolute;
    width: 135%;
    text-align: center;
    transform: translateX(29%) translateY(-25%) rotateX(50deg) rotateZ(330deg) skewX(19deg) skewY(350deg);
}

.cards .track_platina {
    display: inline-block;
    width: 100%;
    border-radius: 30px;

}

.cards>* {
    display: inline-block;
    width: 23%;
    aspect-ratio: 1 / 2;
    margin-right: 10px;
    margin-bottom: 5px;
}

/* .cards>*:nth-child(1) {
    background: linear-gradient(0deg, #000000 0%, #000000 40%, #708d73 100%);
 }
 
 .cards>*:nth-child(2) {
    background: linear-gradient(0deg, #000000 0%, #000000 40%, #611c1c 100%);
 }
 
 .cards>*:nth-child(3) {
    background: linear-gradient(0deg, #000000 0%, #000000 40%, #3f2722 100%);
 }
 
 .cards>*:nth-child(4) {
    background: linear-gradient(0deg, #000000 0%, #000000 40%, #bf805b 100%);
 }
 
 .cards>*:nth-child(5) {
    background: linear-gradient(0deg, #000000 0%, #000000 40%, #3f2722 100%);
 }
 
 .cards>*:nth-child(6) {
    background: linear-gradient(0deg, #000000 0%, #000000 40%, #3f2722 100%);
 }

 .cards img>*:nth-child(7) {
    background: linear-gradient(0deg, #000000 0%, #000000 40%, #3f2722 100%);
 }

 .cards img>*:nth-child(8) {
    background: linear-gradient(0deg, #000000 0%, #000000 40%, #3f2722 100%);
 } */

 /* конец - скрины треков */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <!-- <header>
            <img src="img/b/b_bedolaga.png" alt="">
        </header> -->


        <div class="left_bar_social">
            <div class="music_platina">
                <a href="#">МУЗЫКА</a>
            </div>

            <a href="https://vk.com/platinarnbklub" target="_blank"><img src="img/social/vk.png" alt="vk"></a>
            <a href="https://www.instagram.com/platina300/?hl=ru" target="_blank"><img src="img/social/insta.png" alt="insta"></a>
            <a href="https://www.youtube.com/c/%D0%9F%D0%BB%D0%B0%D1%82%D0%B8%D0%BD%D0%B0300" target="_blank"><img src="img/social/youtube.png" alt="youtube"></a>
            <a href="https://t.me/sosamuzik300" target="_blank"><img src="img/social/telegram.png" alt="telegram"></a>
            <a href="https://music.apple.com/ru/artist/%D0%BF%D0%BB%D0%B0%D1%82%D0%B8%D0%BD%D0%B0/1309211809" target="_blank"><img src="img/social/apple_music.png" alt="apple music"></a>

            <div class="concert_artist">
                <a href="">КОНЦЕРТЫ</a>
            </div>
        </div>

        <div class="info_artist">
                <div class="name_artist">
                    <p>ПЛАТИНА</p>
                </div>

                <!-- <div class="date_concert_artist">
                    <p>16.10.2022 MOSCOW</p>
                </div> -->
        </div>
        <!-- скрины треков -->
        <div class="cards">
            <div>
                <img class="track_platina" src="img/track_list/gruppy.jpg" alt="">
            </div>
            <div>
                <img class="track_platina" src="img/track_list/kak_v_perviy_raz.jpg" alt="">
            </div>
            <div>
                <img class="track_platina" src="img/track_list/lambo.jpg" alt="">
            </div>
            <div>
                <img class="track_platina" src="img/track_list/valentina.jpg" alt="">
            </div>
            <div>
                <img class="track_platina" src="img/track_list/navsegda.jpg" alt="">
            </div>
            <div>
                <img class="track_platina" src="img/track_list/big_boy.jpg" alt="">
            </div>
            <div>
                <img class="track_platina" src="img/track_list/diana.jpg" alt="">
            </div>
            <div>
                <img class="track_platina" src="img/track_list/salam_jpg.jpg" alt="">
            </div> 

        </div>

        <!-- второй блок -->

    </div>
    
<script src="js/three/three.js"></script>
<script src="js/app.js"></script>
</body>
</html>

Источник: https://ru.stackoverflow.com/questions/1426797/%D0%BA%D0%B0%D0%BA-%D0%BE%D0%B6%D0%B8%D0%B2%D0%B8%D1%82%D1%8C-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B8-%D0%BD%D0%B0-%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D0%B5

Тебе может это понравится...

Добавить комментарий