Bollate

HTML

[ANSWERED] javascript – How to move an image when scrolling?

By

Nov 20, 2022 , , ,

Solution 1 :

Would be very happy to help you, if you provide more insight about the problem.

From the Problem statement I assume, you want to move a small image which is on top of a large image when you mouseover on it, without scrolling the body/window viewport.

Please check this helps you 

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>

Problem :

I have the problem, that I want to create a page and there is one image over another and I want to make it go to different places on the second, larger image while you are scrolling.

So if you scroll down, the website should not go down, but on the second picture ( id="maps"
the first picture id="train" should move.

<!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>

And the 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%;
}

Thanks for any help and sorry for my english.

Comments

Comment posted by goto

What have you done so far?

Comment posted by Leon

Because I have no clou how to the thing with the scrolling and the 4 other Websites I went weren’t helpful I tried it with css animatiions, but I don’t know to do it with the scrolling.

Comment posted by goto

Break it down: figure out how to listen for scrolling events, then figure out how to use

Comment posted by Leon

First of all: Thank you! The thing I really want to do is to move the train to predetermined points by scrolling down the website, but the map should not scroll down. I don’t know, my english isn’t the best cause i’m a pupil from germany, sorry.

Comment posted by prasana kannan

I’m still not clear with the requirement here. is it like when scrolling over the larger image small image should move ?

Comment posted by Leon

Yes, kind of… If you scroll down on the page, than the small image should move on the big image.

Comment posted by prasana kannan

is it possible for you to use large image as background-image ?

Comment posted by Leon

Yes, the only important thing is, that it should be a map of europe / the world

By

Related Post

HTML

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022
HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022