Как переместить изображение при прокрутке? - PullRequest
Новая
       1

Как переместить изображение при прокрутке?

0 голосов
/ 12 февраля 2020

У меня проблема в том, что я хочу создать страницу, и одно изображение поверх другого, и я хочу сделать ее go в разных местах второго, большего изображения во время прокрутки.

Таким образом, если вы прокрутите вниз, веб-сайт должен не go вниз, а на втором изображении (id="maps" первое изображение id="train" должно переместиться. 

<!DOCTYPE html>
<html lang="de">

    <head>
        <title>Vorstellung meiner Herausforderung</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <img src = "images/maps.png" alt = "Maps" id="maps">
        <img src="images/zug.png" alt= "Zug" id="train">
        <h1>Meine Herausforderung</h1>
    </body>
</html>

И css: 

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f2f2f2
}

h1 {
    font-family: sans-serif;
    font-size: 32px;
    text-align: center;
}

#maps {
    width: 100%;
    position: absolute;
}

#train {
    position: absolute;
    margin-left: 55%;
    margin-top: 10%;
    width: 3%;
}

Спасибо за любую помощь и извините за мой английский sh.

1 Ответ

0 голосов
/ 12 февраля 2020

Буду очень рад помочь вам, если вы предоставите более подробную информацию о проблеме.

Предполагается, что из постановки задачи вы хотите переместить маленькое изображение поверх большого изображения при наведении на него курсора без прокрутки окна просмотра тела / окна.

Проверьте это вам поможет 

const $train = $('#train')
document.addEventListener('scroll', function (event) {
   $train.css({left: window.pageYOffset*10});
}, true /*Capture event*/);
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #f2f2f2
        overscroll: scroll;
    }

    h1 {
        font-family: sans-serif;
        font-size: 32px;
        text-align: center;
    }

    #map-container {
      width: 100%;
      height: 100vh;
      position: relative;
      background: url(https://upload.wikimedia.org/wikipedia/commons/9/95/World_map_green.png);
      background-attachment: fixed;
      background-size: cover;
    }
    
    #map, .inner-container {
      width: 100%;
      height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow:scroll;
    }
    
    .inner-container { 
      background: transparent;
      z-index: 2;
    }

    #train {
        width:50px;
        height:50px;
        top: 20%;
        position: absolute;
    }
<!DOCTYPE html>
    <html lang="de">

        <head>
            <title>Vorstellung meiner Herausforderung</title>
            <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>

        <body>
            <div id="map-container">
            <!-- <img src = "" id="maps"> -->
            <div class="inner-container">
             <img src="https://png2.cleanpng.com/sh/0f45ce863aeba0805894dc22bf651040/L0KzQYm3UsAzN5Dqj5H0aYP2gLBuTgRzaZpzRdVqcoTyf7A0kvFqdF55itN3c4DygsW0kvVlNaV3edt3LUXkR4WCWcdiQGpmfNcBLkC3RIq6UMg3OWY2T6cEMEmzRoa9U8kveJ9s/kisspng-train-cartoon-rail-transport-red-train-5a74997a89ade6.0449308615175909065639.png" alt= "Zug" id="train">
             </div>
  </div>
            <h1>Meine Herausforderung</h1>
            
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </body>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...