Sticky Div Position mit CSS

Ich versuche, ein digitales Schlagzeug zu erstellen. Ich habe ein Bild von einem Drumset und ich möchte runde Schlagpolster auf jeder Trommel platzieren. Ich habe Probleme, die Trefferfelder an Ort und Stelle zu halten, wenn ich die Ansichtsgröße ändere. Ich habe versucht, Bootstrap zu verwenden, um die Divs an Ort und Stelle zu halten, aber ich fand heraus, dass das nicht funktioniert, weil die Größenänderung nur die Hitpads auf der linken Seite stapelt. Gibt es eine Möglichkeit, die Hitpads mit CSS oberhalb des Hintergrundbildes des Drumsets zu fixieren, wenn sich die Ansichtsgröße ändert? Unten ist mein aktuelles HTML und ein Bild des Schlagzeugs, auf dem ich versuche, die Hitpads anzubringen. Vielen Dank im Voraus für jede Hilfe!Sticky Div Position mit CSS

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12 col-sm-12"> 
      <img id="playboard" src="drums.png" alt=""> 
       <div class="row" style="height: 100px"> 
       </div> 
      <div class="row" style="height: 50px"> 
      </div> 
      <div class="row" style="height: 50px"> 
      </div> 
      <div class="row" style="height: 50px"> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit hihathit animated pulse infinite" ng-audio="hihat.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit crashhit animated pulse infinite" ng-audio="crash.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit ridehit animated pulse infinite" ng-audio="ride.mp3" start="0.1"></button> 
       </div> 
      </div> 
      <div class="row" style="height: 50px"> 
       <div class="col-md-6 col-sm-6"> 
        <button class="hit tomonehit animated pulse infinite" ng-audio="tomone.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-6 col-sm-6"> 
        <button class="hit tomtwohit animated pulse infinite" ng-audio="tomtwo.mp3" start="0.1"></button> 
       </div> 
      </div> 
      <div class="row" style="height: 50px"> 
      </div> 
      <div class="row" style="height: 50px"> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit snarehit animated pulse infinite" ng-audio="snare.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit kickhit animated pulse infinite" ng-audio="kickdrum.mp3" start="0.1"></button> 
       </div> 
       <div class="col-md-4 col-sm-4"> 
        <button class="hit floortomhit animated pulse infinite" ng-audio="floortom.mp3" start="0.1"></button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Quelle

2016-08-13 Lindy Leigh

Hi hast du versucht, mit html5 canvas element herumspielen - könnte besser sein als mit divs - sehr cooles Projekt übrigens –

habe ich nicht! Ich werde es mir ansehen. Danke :) –

Ich schaute auf Leinwand und es sieht so aus, als würde ich auf das gleiche Problem stoßen. Ich kann sie mit Javascript zeichnen, muss sie aber mit css positionieren. Danke für den Vorschlag. –

Sie können eine HTML-Tabelle oder Flex-Box versuchen mit Hilfe der "Hit-Pads" enthalten. Wenn Sie Prozentsätze für Größenwerte verwenden, können Sie Ihre Hit-Pads in Übereinstimmung mit Ihrem Hintergrundbild skalieren.

Quelle

2016-08-13 00:19:34

Wird sich flexbox genauso verhalten wie Bootstrap, indem die Boxen gestapelt werden, wenn die Größe der Ansicht geändert wird? Ich habe Prozentsätze innerhalb eines Containers verwendet und ich kann die Hit-Pads dazu bringen, sich nach links und rechts zu bewegen, aber nicht auf und ab. Ich bin noch ziemlich neu in diesem Bereich, also bin ich immer noch dabei herauszufinden, wie man Dinge positioniert. –

Ich fand es heraus. Setzen Sie einen Container auf relativ. Kleben Sie ein Bild mit der Breite 100% und der Höhe automatisch hinein. Stellen Sie dann die Schaltfläche divs auf absolut und verwenden Sie oben, rechts, links, unten, um zu positionieren.

Quelle

2016-08-13 01:47:01

Sticky Div Position mit CSS

Antwort

Verwandte Themen