Beiträge von ButterKnecht

ButterKnecht · 11. August 2021

Um das mit den Bildern zu bereinigen musst Du zunächst die feste Breite entfernen, denn die Abmessungen werden jetzt vom Script gesetzt. Und dann overflow:hidden; setzen:

Code

#ani-wrap-1 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }
#ani-wrap-2 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }

#ani-wrap-3 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }
.ani-wrap{
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
            display: flex;
            overflow: hidden;
        }

Alles anzeigen

(ab Zeile 311 in external.css)

Also meine Hauptseite funktioniert jetzt einwandfrei. Ich wollte das Skript jetzt für meine Spiele die in einem 800px mal 600px Container starten. Der Rest der Seite ist fast gleich. Aber es wird dann viel zu klein. Ich habe die Ratio natürlich angepasst. Hast du einen Tipp für mich?

ButterKnecht · 10. August 2021

Zitat von Sempervivum

Um das mit den Bildern zu bereinigen musst Du zunächst die feste Breite entfernen, denn die Abmessungen werden jetzt vom Script gesetzt. Und dann overflow:hidden; setzen:

Code

#ani-wrap-1 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }
#ani-wrap-2 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }

#ani-wrap-3 {
            
            /* Breite auf die der Einzelbilder setzen: */
            
/* width: 348px; */
        }
.ani-wrap{
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
            display: flex;
            overflow: hidden;
        }

Alles anzeigen

(ab Zeile 311 in external.css)

Ich bin begeistert. Funktioniert richtig gut. Ein bisschen feinschliff noch, aber das kriege ich selber hin

ButterKnecht · 10. August 2021

Zitat von Sempervivum

Das kannst Du erreichen, indem Du das Highscore-Logo und die beiden Überschriften in einen zusätzlich Container packst, z. B. header:

HTML

   </nav>
        <header>
            <img src="images/highscore.jpg">
            <div>
                <div>Willkommen / <span style="  color: #f70cca;">こんにちは </span> </div>
                <div>Wähle deinen Automaten und habe Spaß !!! </div>
            </div>
        </header>
        <main>
            <div id="auto-wrapper">

CSS

header {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Das sind aber solche Feinheiten und Dekosachen, die wir erst Mal zurück stellen sollten. Wichtiger ist es, die Automaten vollständig responsiv zu machen.

ja das denke ich kriege ich auch gebacken. Nur bei den Bilder habe ich keinen Ansatz

ButterKnecht · 10. August 2021

Zitat von m.scatello

Ja dann mach' das doch!

Echt schlimm, wie manche sich alles vorkauen lassen, aber solange es User gibt, die das auch noch servieren ....

Mir ging es vor allem um die Bilder, da ich da überhaupt keinen Ansatz habe...

ButterKnecht · 10. August 2021

und hier noch die CSS

Code

html {
  
 min-height: 100%;
    color: white;
     font-family: 'Quicksand';
    font-family: url("fonts/Quicksand-VariableFont_wght.ttf");
    
    
}

body {
    
    background: linear-gradient(180deg, rgba(42,34,34,1) 0%, rgba(65,7,91,1) 53%, rgba(120,06,99,47) 100%);
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 0.2em;
    display: flex;
  
}

.container {
    margin-top:2%;
}    
    
.webgl-content {
   
    margin-top: 3%;
   
 
} 
nav {
    
    display: flex;
    
    
    
}

nav, ul {
    /* Elemente darin zentrieren: */
    text-align: center;
    justify-content: center;
}

ul {
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}


nav ul {
    
    display: flex;
    
   
    
}

nav ul slash {
   margin:18px; 
    color:#dd00e6;
    
} 


nav ul li a {
    height: 20px;
    width:150px;
    align-items: center;
    padding: 0.6rem;
    
    
    
 
    
    
    margin:7px;
    text-decoration: none;
    color: white;

}

  li {
            display: grid;
        }
  li .german,
        li .japanese {
            text-align: center;
            grid-area: 1 / 1;
            transition: opacity 1s;
        }

li .german {
    text-align: center;
            opacity: 1;
        }

 li .japanese {
     text-align: center;
            opacity: 0;
        }
  li:hover .german {
            opacity: 0;
      
        }
  li:hover .japanese {
            opacity: 1;
     
      color: #dd00e6;
      
        }





.sideTitle {
  
    flex:0 0 aitp;
    writing-mode: vertical-lr;
    font-weight: 700;
  font-size: 120px;
  color: #f70cca;
  text-align: center;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #dd00e6, 0 0 40px #dd00e6, 0 0 50px #dd00e6, 0 0 60px #dd00e6, 0 0 70px #dd00e6;
  
 
}
.Main{
   
    
    text-align: center;
    color:aliceblue;
    margin-top:5%;
    font-size: 25px;
        display: flex;
    vertical-align: middle;
    flex-direction: column;
    align-items: center;
    line-height:200%;
}
.Main:hover{
    filter: contrast(150%);
}
.Main h1{
   font-size: 30px;
    border: 4px solid #dd00e6;
    padding: 0.8rem;
    border-radius: 10px;
     box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #dd00e6, 0 0 20px #dd00e6, 0 0 25px #dd00e6, 0 0 30px #dd00e6, 0 0 35px #dd00e6;
    clear: both;

    
}

.Highscore {
   
    grid-row-end: span 3;
    text-align: center;
     color: #fff;
    
    font-size: 70px;
    margin-top: 3%;
    display: flex;
    
    flex-direction: column;
    align-items: center;
    line-height:200%;
}

.Game{
   
    
    text-align: center;
    color:aliceblue;
    letter-spacing: 0.1em;
    font-size: 20px;
    margin-top: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    line-height:200%;
}
.gameBox{
    box-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #05E2FF, 0 0 10px #05E2FF, 0 0 12px #05E2FF, 0 0 15px #05E2FF, 0 0 17px #05E2FF;
}
.impressum{
     margin-top: 4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.kontakt {
    font-family: 'Quicksand';
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 4rem;
     color: white;
    background-position: center;
    
    
    
}

.kontakt h1{
  
    text-align: center;
     color: #02E1FF;
    letter-spacing: 0.2em;
    font-size: 70px;
    display: flex; 
    flex-direction: column;
    align-items: center;
    line-height:200%;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #05E2FF, 0 0 40px #05E2FF, 0 0 50px #05E2FF, 0 0 60px #05E2FF, 0 0 70px #05E2FF;
    clear: both;
}

.kontakt form {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.kontakt form tag {
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: white;
}
.kontakt form input {
    width: 20rem;
    height: 3rem;
}
.kontakt form button {
    font-family: 'Quicksand', sans-serif;
width: 20rem;
    padding: 15px;
}


.kontakt h2 {
    
    font-size: 20px;
    margin-bottom: 0rem;
    
}

.kontakt p {
    font-size: 20px;
    margin: 5px 0;
    margin-bottom: 5rem;
    color:white;
}

.kontakt input {
    
    background: none;
    color: white;
    border: none;
    border: 3px solid rgba(255, 255, 255, 0);
    transition: 0.5s ease-in-out;
}

.kontakt input:hover {
    border: 3px  solid #ff00ee;
   
}

.arcadeMachine{
   position: relative;
    z-index: 1;
   height:628px;
  width:348px;
  background: url("images/I_Asteroids_1.png");
    background-size: contain;
}
.arcadeMachine1{
   z-index: 5;

}


.arcadeMachine img{
    position:absolute;
  left:0;
  -transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.arcadeMachine:hover{
     
 /* filter: brightness(1.2) ;*/
    height:628px;
  width:348px;
  background-image: url("images/I_Asteroids_2.png");
    filter:contrast(120%);
}
table{
  width:100%;
  table-layout: fixed;
}
h2{
font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;

}
.highscoreSign:hover{
     filter: contrast(150%);
}
#ani-wrap-1 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }
#ani-wrap-2 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }

#ani-wrap-3 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }
.ani-wrap{
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
             display: flex;
            overflow: hidden;
        }
        .ani-wrap img {
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
            pointer-events: none;
        }


.ani-wrap:hover {
         filter: contrast(150%);
        }

#left-wrapper {
    /* soll den gesamten freien Raum ausfÃ¼llen: */
    flex: 1;
    /* Dass die Elemente darin untereinander angeordnet werden 
    ist Standard, da es sich um Blockelemente handelt */
}

#auto-wrapper {
    /* Die Elemente darin sollen nebeneinander angeordnet werden: */
    display: flex;
    justify-content: center;
}

/* *** Animation responsiv machen *** */

/* Konstanten fÃ¼r HÃ¶he und Breite definieren,
damit sie leicht von Javascript gesetzt werden kÃ¶nnen: */

:root {
    --ani-width: 0px;
    --ani-height: 0px;
}

#auto-wrapper img, .ani-wrap {
    width: var(--ani-width);
    height: var(--ani-height);
}

Alles anzeigen

ButterKnecht · 10. August 2021

Zitat von ButterKnecht

Hmm wie hast du die Bilder eingebunden. Kannst du deinen ganze Code schicken?

Ok jetzt haut es schon besser hin. Aber er zerstückelt die Bilder und der Side Title soll höher sein und die Navbar und Higscore links.

HTML: HTML

<!doctype html>

<html> 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="external.css"/>
     <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css"/>
    
    <title>
    Arcade
    </title>
    
</head>

    
<body>
   <div id="left-wrapper">
   <nav>
        <ul>
            <li>
                <a  class="german" href="index.html">HOME</a>
                <a class="japanese" href="index.html">ホームホーム</a>
                
            </li>
            
            
            <li>
                <a class="german" href="about.html">ÜBER UNS</a>
                <a class="japanese"href="about.html">私について</a>
            </li>
            
            <li>
                <a class="german" href="kontakt.html">KONTAKT</a>
                <a class="japanese"href="kontakt.html">連絡先の詳細</a>
            </li>
            
             <li>
                 <a class="german" href="impressum.html">IMPRESSUM</a>
        <a class="japanese"href="impressum.html">インプリント</a>
    </li>
        </ul>
    </nav> 

            <div class="Main">
                 <div class="Main">
         <a href="HighScoreSite.html" ><img src="images/I_Highscore.png" alt="Highscore"></a>
         
        <div>Willkommen  </div>
       <div>Wähle deinen Automaten und habe Spaß !!!   </div></div>
                </div>
        
<div id="auto-wrapper">
        <div id="ani-wrap-1" class ="ani-wrap">
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_3.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_2.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_1.png" alt="Game3"></a>
    </div>
       


            <div id="ani-wrap-2" class ="ani-wrap">
                 <a href="racer.html" ><img width="348" height="628,5" src="images/I_Racer_1.png" alt="Game3"></a>
        <a href="racer.html" ><img width="348" height="628,5" src="images/I_Racer_2.png" alt="Game3"></a>
     
        
    </div>
          
        <div id="ani-wrap-3" class ="ani-wrap">
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_3.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_2.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_1.png" alt="Game3"></a>
    </div>
     </div>
       
       
       </div>     
        <div class="sideTitle">
       アーケード
       </div>
    
    <script>
        // Die drei Bilder/Animationen von der Größe her in den Container einpassen:
        function adjustSizes() {
            const
                aspectRatio = 348 / 628.5,
                // Breite des Browserfensters:
                wWindow = window.innerWidth,
                // Breite der Sidebar rechs:
                wSidebar = document.querySelector('.sideTitle').offsetWidth,
                // Breite eines Elementes in #ani-wrap
                calcWidth = (wWindow - wSidebar) / 3,
                calcHeight = calcWidth / aspectRatio;
            // CSS-Konstante für die Breite auf diesen Wert setzen:
            document.documentElement.style.setProperty('--ani-width', calcWidth + 'px');
            document.documentElement.style.setProperty('--ani-height', calcHeight + 'px');
        }
        window.addEventListener('resize', adjustSizes);
        adjustSizes();
    </script>
<script src="scripts/Animation-wrapper.js"></script>

    </body>

</html>

Alles anzeigen

ButterKnecht · 10. August 2021

Zitat von Sempervivum

Bei mir ist überhaupt nichts übereinander, siehe hier:
https://webentwicklung.ulrichb…ayout-butterknecht-4.html
Nur das Bild mit dem Heighscore ist bei mir nicht drin.
Bei sehr breitem Browserfenster, z. B. FullHD, tauchen noch Scrollbars auf, da muss ich noch dran arbeiten.

Hmm wie hast du die Bilder eingebunden. Kannst du deinen ganze Code schicken?

ButterKnecht · 10. August 2021

Das haut leider überhaupt nicht hin. Die Automaten sind alle untereinander. Hier mal die aktuellsten Einträge da sich wieder einiges getan hat und ein Foto wie es jetzt aussieht und auch am ende am jeden Monitor ungefähr aussehen soll

Code: CSS

html {
  
 min-height: 100%;
    color: white;
     font-family: 'Quicksand';
    font-family: url("fonts/Quicksand-VariableFont_wght.ttf");
    src: url("fonts/Quicksand.ttf");
    
}

body {
    
    background: linear-gradient(180deg, rgba(42,34,34,1) 0%, rgba(65,7,91,1) 53%, rgba(120,06,99,47) 100%);
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 0.2em;
  
}

.container {
    margin-top:2%;
}    
    
.webgl-content {
   
    margin-top: 3%;
   
    
   
} 
nav {
    
    display: flex;
    
    
    
}




nav ul {
    
    display: flex;
    
   
    
}

nav ul slash {
   margin:18px; 
    color:#dd00e6;
    
} 


nav ul li a {
    height: 20px;
    width:150px;
    align-items: center;
    padding: 0.6rem;
    
    
    
 
    
    
    margin:7px;
    text-decoration: none;
    color: white;

}

  li {
            display: grid;
        }
  li .german,
        li .japanese {
            text-align: center;
            grid-area: 1 / 1;
            transition: opacity 1s;
        }

li .german {
    text-align: center;
            opacity: 1;
        }

 li .japanese {
     text-align: center;
            opacity: 0;
        }
  li:hover .german {
            opacity: 0;
      
        }
  li:hover .japanese {
            opacity: 1;
     
      color: #dd00e6;
      
        }





.sideTitle {
  
    float:right;
    writing-mode: vertical-lr;
    font-weight: 700;
  font-size: 120px;
  color: #f70cca;
  text-align: center;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #dd00e6, 0 0 40px #dd00e6, 0 0 50px #dd00e6, 0 0 60px #dd00e6, 0 0 70px #dd00e6;
  
 
}
.Main{
   
    
    text-align: center;
    color:aliceblue;
    margin-top:5%;
    font-size: 25px;
        display: flex;
    vertical-align: middle;
    flex-direction: column;
    align-items: center;
    line-height:200%;
}
.Main:hover{
    filter: contrast(150%);
}
.Main h1{
   font-size: 30px;
    border: 4px solid #dd00e6;
    padding: 0.8rem;
    border-radius: 10px;
     box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #dd00e6, 0 0 20px #dd00e6, 0 0 25px #dd00e6, 0 0 30px #dd00e6, 0 0 35px #dd00e6;
    clear: both;

    
}

.Highscore {
   
    grid-row-end: span 3;
    text-align: center;
     color: #fff;
    
    font-size: 70px;
    margin-top: 3%;
    display: flex;
    
    flex-direction: column;
    align-items: center;
    line-height:200%;
}

.Game{
   
    
    text-align: center;
    color:aliceblue;
    letter-spacing: 0.1em;
    font-size: 20px;
    margin-top: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    line-height:200%;
}
.impressum{
     margin-top: 4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.kontakt {
    font-family: 'Quicksand';
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 4rem;
     color: white;
    background-position: center;
    
    
    
}

.kontakt h1{
  
    text-align: center;
     color: #02E1FF;
    letter-spacing: 0.2em;
    font-size: 70px;
    display: flex; 
    flex-direction: column;
    align-items: center;
    line-height:200%;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #02E1FF, 0 0 40px #02E1FF, 0 0 50px #02E1FF, 0 0 60px #02E1FF, 0 0 70px #02E1FF;
    clear: both;
}
.webgl-content{
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #02E1FF, 0 0 40px #02E1FF, 0 0 50px #02E1FF, 0 0 60px #02E1FF, 0 0 70px #02E1FF;
    
}
.kontakt form {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.kontakt form tag {
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: white;
}
.kontakt form input {
    width: 20rem;
    height: 3rem;
}
.kontakt form button {
    font-family: 'Quicksand', sans-serif;
width: 20rem;
    padding: 15px;
}


.kontakt h2 {
    
    font-size: 20px;
    margin-bottom: 0rem;
    
}

.kontakt p {
    font-size: 20px;
    margin: 5px 0;
    margin-bottom: 5rem;
    color:white;
}

.kontakt input {
    
    background: none;
    color: white;
    border: none;
    border: 3px solid rgba(255, 255, 255, 0);
    transition: 0.5s ease-in-out;
}

.kontakt input:hover {
    border: 3px  solid #ff00ee;
   
}

.arcadeMachine{
   position: relative;
    z-index: 1;
   height:628px;
  width:348px;
  background: url("images/I_Asteroids_1.png");
    background-size: contain;
}
.arcadeMachine1{
   z-index: 5;

}


.arcadeMachine img{
    position:absolute;
  left:0;
  -transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.arcadeMachine:hover{
     
 /* filter: brightness(1.2) ;*/
    height:628px;
  width:348px;
  background-image: url("images/I_Asteroids_2.png");
    filter:contrast(120%);
}
table{
  width:100%;
  table-layout: fixed;
}
h2{
font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;

}
.highscoreSign:hover{
     filter: contrast(150%);
}
#ani-wrap-1 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }
#ani-wrap-2 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }

#ani-wrap-3 {
            
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            
        }
.ani-wrap{
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
             display: flex;
            overflow: hidden;
        }
        .ani-wrap img {
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
            pointer-events: none;
        }


.ani-wrap:hover {
         filter: contrast(150%);
        }

Alles anzeigen

HTML: HTML

<!doctype html>

<html> 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="external.css"/>
     <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css"/>
    
    <title>
    Arcade
    </title>
    
</head>

    
<body>
   
   <nav>
        <ul>
            <li>
                <a  class="german" href="index.html">HOME</a>
                <a class="japanese" href="index.html">ホームホーム</a>
                
            </li>
            
            
            <li>
                <a class="german" href="about.html">ÜBER UNS</a>
                <a class="japanese"href="about.html">私について</a>
            </li>
            
            <li>
                <a class="german" href="kontakt.html">KONTAKT</a>
                <a class="japanese"href="kontakt.html">連絡先の詳細</a>
            </li>
            
             <li>
                 <a class="german" href="impressum.html">IMPRESSUM</a>
        <a class="japanese"href="impressum.html">インプリント</a>
    </li>
        </ul>
    </nav> 
       
   <div class="sideTitle">
       アーケード
       </div>
    
    
   
    <div class="row">
        
        <div class="col-2">
            <div class="Main">
         <a href="HighScoreSite.html" ><img src="images/I_Highscore.png" alt="Highscore"></a>
         </div>
            </div>
        
        <div class="col-8">
            <div class="Main">
        <div>Willkommen  </div>
       <div>Wähle deinen Automaten und habe Spaß !!!   </div></div>
        </div>
        
        
        
    </div>
    
    
    
    <div class= "container">
  <div class="row">
    
    <div class="col">
       
        <div id="ani-wrap-1" class ="ani-wrap">
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_3.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_2.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_1.png" alt="Game3"></a>
    </div>
        </div>


<div class="col">
            <div id="ani-wrap-2" class ="ani-wrap">
                 <a href="racer.html" ><img width="348" height="628,5" src="images/I_Racer_1.png" alt="Game3"></a>
        <a href="racer.html" ><img width="348" height="628,5" src="images/I_Racer_2.png" alt="Game3"></a>
     
        
    </div>
          
      
      </div>

  <div class="col">
       
        <div id="ani-wrap-3" class ="ani-wrap">
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_3.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_2.png" alt="Game3"></a>
        <a href="Asteroids.html" ><img width="348" height="628,5" src="images/I_Asteroids_1.png" alt="Game3"></a>
    </div>
        </div>
        </div>
        </div>
     
            
       
<script src="scripts/Animation-wrapper.js"></script>
    
    
    </body>
    
    
    
    




</html>

Alles anzeigen

ButterKnecht · 9. August 2021

Zitat von Sempervivum

Solange man sich auf Monitore beschränkt, ist das sicher machbar. Wenn man Handys einbezieht, wird es allerdings schwierig.

Wie stelle ich das am dümmsten an?

ButterKnecht · 9. August 2021

Zitat von Sempervivum

Warum deine Version mit den "R" dahinter nicht funktioniert. Habe ich inzwischen getan und sie läuft einwandfrei.

Du bist ein Fuchs! Dein Skript geht. Meins nicht...

ButterKnecht · 9. August 2021

Danke ich werde es gleich testen. Was möchtest du austesten?

ButterKnecht · 9. August 2021

Code

const fps = 3,
            aniWrapperR = document.getElementById('ani-wrapR');
        // Gibt an, ob die Animation läuft:
        let aniRunningR = false;
        function animateItR() {
            if (aniRunningR) {
                // Wir nehmen das letzte Bild und stellen es an den Anfang:
                aniWrapperR.prepend(aniWrapperR.lastElementChild);
            }
        }
        // Funktion zyklisch ausführen:
        setInterval(animateItR, 1000 / fps);
        // Animation starten und stoppen mit Eventhandler
        // fuer Mouseover und Mouseout:
        aniWrapperR.addEventListener('mouseover', event => {
            aniRunningR = true;
        });
        aniWrapperR.addEventListener('mouseout', event => {
            aniRunningR = false;
        });

Alles anzeigen

So sieht es bis jetzt bei mir aus. Und das alles in einem separatem Skript.

Das andere sieht aus wie zuvor

ButterKnecht · 9. August 2021

Zitat von Sempervivum

Solange man sich auf Monitore beschränkt, ist das sicher machbar. Wenn man Handys einbezieht, wird es allerdings schwierig.

Ne. Für Smartphones muss es nicht sein. Da die Spiele auch schon nicht für Smartphones ausgelegt sind.

ButterKnecht · 9. August 2021

Zitat von Sempervivum

Also das Layout kann ruhig fest sein, OK. Soll diese Seite denn überhaupt scrollbar sein? Im Moment ist ja nur wenig Content drin.

Also mein Grundidee war schon das jede Seite so aufgeräumt ist, das man nicht scrollen muss. Weiß nur nicht ob das bei allen Monitoren möglich ist. Ich habe noch eine Seite mit Highscore die von den Spielen über einen mySQL Connector übertragen werden. Und da wird es eng. (Ist aber auf 10 Einträge beschränkt)

ButterKnecht · 9. August 2021

Zitat von Sempervivum

Das ist nicht verwunderlich, weil ich den Fall, dass es mehrere Automaten gibt, nicht berücksichtigt habe. Dürfte aber kein Problem sein, das zu erweitern, ich sehe es mir an ...

Also es soll 3 geben. Aber warum stört ihn das auch wenn ich unterschiedliche Variablen nutze!? Danke schon mal

ButterKnecht · 9. August 2021

Jetzt ist mir doch noch ein Fehler aufgefallen. Für einen Automaten funktioniert das ganze. Wenn ich jetzt einen weiteren hinzufüge mit anderen Bildern für die Animation funktioniert nur der erste. Auch wenn ich alle Variablen für das Skript anpasse und nach einem anderen ElementID suche.

ButterKnecht · 9. August 2021

Zitat von Sempervivum

Möchtest Du, dass "sideTitle" und die Navigation fixiert sind, d. h. dass sie beim vertikalen Scrollen immer sichtbar bleiben?

Achso. Nein das nicht.

ButterKnecht · 8. August 2021

Zitat von Sempervivum

Ich auch nicht und zunächst war es auch nicht plausibel für mich: Wenn man den Farbverlauf auf body anwendet sollte man erwarten, dass die 100% sich auch auf body beziehen. Es ist jedoch so, dass sich eine Breiten- oder Höhenangabe fast immer auf das Elternelement bezieht und das ist in diesem Fall html. Und der Farbverlauf läuft ja auch unter background-image, wird also wie ein Bild behandelt. Damit ist es dann doch wieder plausibel.

Da ihr gefragt ob ich noch hilfe brauche. Die brauche ich tatsächlich.

Am rechten Rand soll ja immer in japanischen Schriftzeichen vertikal Arcade angeheftet werden.

<div class="sideTitle">
アーケード
</div>

Da klappt bei mir auch ganz gut. Nur bei kleineren Monitoren kann es passieren das andere Elemente unter mein "sideTitle" rutschen. Ich hätte aber gerne das der immer rechts bleibt, komme was wolle. Das gleiche ist mit der oberen Nav Zeile.

Ich weiß das ich da mit Grids und Container arbeiten müsste. Aber ich kriege das mit dem side Title irgendwie nicht gebacken.

ButterKnecht · 5. August 2021

Zitat von basti1012
Möchtest du noch paar Hinweise zu dein HTML / CSS haben?
In der CSS steht das, überlege dir mal was daran falsch/ unnutz ist
CSS
nav ul slash {
   margin:18px; 
    color:#dd00e6;
}
------
.kontakt form tag {
    display: flex;
    flex-direction: column;
    padding: 10px;
}
------
.arcadeMachine img{
    position:absolute;
  left:0;
  -transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
------
Alles anzeigen
Im HTML
type="text/css" Kannst du löschen , ist veraltet
style=" color: #f70cca;" Auf Inline Styles sollte man verzichten, dafür gibt es die CSS

Mehr konnte ich jetzt nicht finden.
Alles anzeigen

Klar immer gerne. Ja die Klassen von der CSS habe ich mal gebraucht und bin mir noch nicht ganz sicher ob das bleiben soll.

Wie gesagt ich experementiere noch viel.

Wo ich mir noch nicht ganz sicher bin ist Bootstrap. Das nutze ich erst seit ein paar tagen. Mir gefällt es zum Beispiel nicht das ich den unteren Teil noch über URL ziehe. Die kann man doch sicher auch herunterladen und lokal laden oder? Und wäre es auch nicht schicker alle meine Skripte in eine externe Datei zu packen?

ButterKnecht · 5. August 2021

Zitat von Sempervivum
Da musste ich Stackoverflow um Rat fragen und habe dort die Lösung gefunden: Man muss für html min-height auf 100% setzen statt height:
Code
html {
    /* height: 100%; */
    min-height: 100%;
    color: white;
    font-family: 'Quicksand';
    font-family: url("fonts/Quicksand.ttf");
    src: url("fonts/Quicksand.ttf");
    font-family: 'Quicksand',
}
https://stackoverflow.com/ques…retch-but-instead-repeats
(die Lösung von Ricardo Zea)

Danke. Hat geklappt. Davon habe ich noch nie gehört.

Beiträge von ButterKnecht

Background linear gradiant

Background linear gradiant

Background linear gradiant

Background linear gradiant

Background linear gradiant

Background linear gradiant

Background linear gradiant

Background linear gradiant

Background linear gradiant

Kleine Animation mit mehreren Bildern

Kleine Animation mit mehreren Bildern

Kleine Animation mit mehreren Bildern

Background linear gradiant

Background linear gradiant

Kleine Animation mit mehreren Bildern

Kleine Animation mit mehreren Bildern

Background linear gradiant

Background linear gradiant

Background linear gradiant

Background linear gradiant