Is there a way to make a DVD screensaver-like HTML element without the marquee tag?

user_11036339 0
Viewed 2116

My code is as such:

<div style="border: 2px solid black">
    <marquee behavior="alternate" direction="down" width="100%" height="100%">
        <marquee behavior="alternate" width="100%">
            <button onClick="addPoints(1)">+1</button>
        </marquee>
    </marquee>
</div>

This makes it bounce around perfectly within a box container (border). However, the Marquee tag is depreciated and it doesn't give me enough control of the box. Is there an alternate solution, using jquery, javascript, CSS, or HTML? I need to be able to control the speed, detect when it hits a side, and find the X and Y of the button.

I had a working solution before, but it wouldn't let me stop and resume the animation at the same point (I need to be able to). I've seen other alternatives for Marquee but none seem to work the way I want them to, because they use the regular use of marquee rather than the behavior="alternate" setting. I'm experienced in javascript but jquery is new to me so any explanation is appreciated. Thanks!

css-animations jquery-animate html jquery javascript
2 Answers

You can also use CSS animations. I'm not familiar with CSS, so I can't make it not exceed the bounds of the container, but this should give you a starting point.

.bounds {
  border: 5px red solid;
  width: 200px;
  height: 300px;
}

@keyframes hor-movement {
  from {
    margin-left: 0%;
  }
  to {
    margin-left: 100%;
  }
}

@keyframes ver-movement {
  from {
    margin-top: 0%;
  }
  to {
    margin-top: 100%;
  }
}

.image {
  animation-name: hor-movement, ver-movement;
  animation-duration: 3.141s, 1.414s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}
<div class="bounds">
  <img class="image" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/279/thinking-face_1f914.png"> </img>
</div>
</div>

user_59361870

After few minutes of research I've found an open-source repo on github: https://github.com/AlessioMaddaluno/bouncing-dvd-logo. It is a bouncing DVD logo written in vanilla JS. You can control speed and it kinda detects (I'm not really sure if it's the kind of detection you meant). Hovewer, it works only for images.

user_126319780
Related