Webkitマーキーを前後にドラッグすることは可能ですか？

Question

私はティッカーテープを持っていますが、テキストが極端に長くなることがあります。私はオリジナルのWebkitコードを変更して、ユーザーがマウスを動かすと一時停止することができるようにしましたが、私が望むのは、ユーザーがティッカーテキストを前後にドラッグできるようにすることです。

私はjQueryで熟達しているわけではないので、JavaScript/CSSを使用する方法はありますか？

.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; 
 
} 
 

 
.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)} 
 
}

<p class="marquee"><span>Just some dummy text</span></p>

Answer 1

ライブラリを使用してに開放している場合は、jQuery UIはあなたが使用することができ、ドラッグ機能が組み込まれています。

カスタマイズされたバージョン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>

Answer 2

I am Addting @-webkit-keyframes safari and chrome browser compatible /* Safari 4.0 - 8.0 */ 

    .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; 
    } 

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




    /* Standard syntax */ 
    @keyframes marquee { 
     0% {transform: translate(0, 0)} 
     100% {transform: translate(-100%, 0)} 
    } 


    /* Safari 4.0 - 8.0 */ 
    @-webkit-keyframes marquee { 
     0% {transform: translate(0, 0)} 
     100% {transform: translate(-100%, 0)} 
    } 


    <p class="marquee"><span>css marquee code with webkit browser compatible</span></p>