Drag a Web Kit

Is it Possible to Drag a Web kit Marquee Back and Forth?

 

If you’re open to using a library, j Query UI has a built in drag function that you can use.

You can download a customized version here.

$("#drag-me").draggable({
  axis: "x"
});
.marquee {
  width: 800px;
  max-width: 100%;
  height: 25px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #F00;
  background: GhostWhite;
  color: #000;
  font-size: 20px;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
  cursor: default;
}

.marquee span:hover {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}


/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(0, 0)
  }
  100% {
    transform: translate(-100%, 0)
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<p class="marquee"><span id="drag-me">Just some dummy text</span></p>

LEAVE A REPLY

Please enter your comment!
Please enter your name here