Webleb - Code-Snippets -

1962 Andev.web

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

17 December 2024

Unity WebGL Loader aus Zip mit CrazyGames SDK Shim

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="carousel-wrapper">
  <div class="carousel">
    <div class="item"><img src="https://logo.clearbit.com/apple.com" alt="apple"></div>
    <div class="item"><img src="https://logo.clearbit.com/google.com" alt="Google"></div>
    <div class="item"><img src="https://logo.clearbit.com/amazon.com" alt="Amazon"></div>
    <div class="item"><img src="https://logo.clearbit.com/microsoft.com" alt="Microsoft"></div>
    <div class="item"><img src="https://logo.clearbit.com/facebook.com" alt="Facebook"></div>
    <div class="item"><img src="https://logo.clearbit.com/netflix.com" alt="Netflix"></div>
    <div class="item"><img src="https://logo.clearbit.com/tesla.com" alt="Testla"></div>
    <div class="item"><img src="https://logo.clearbit.com/nike.com" alt="Nike"></div>
    <div class="item"><img src="https://logo.clearbit.com/adidas.com" alt="Addidas"></div>
    <div class="item"><img src="https://logo.clearbit.com/coca-cola.com" alt="Coca-Cola"></div>
    <div class="item"><img src="https://logo.clearbit.com/apple.com" alt="apple"></div>
    <div class="item"><img src="https://logo.clearbit.com/google.com" alt="Google"></div>
    <div class="item"><img src="https://logo.clearbit.com/amazon.com" alt="Amazon"></div>
    <div class="item"><img src="https://logo.clearbit.com/microsoft.com" alt="Microsoft"></div>
    
  </div>
</div>  
</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root{
  --bg-clr: #000000;
}
body {
  min-height: 100svh;
  display: grid;
  place-content: center;
  background-color: var(--bg-clr);
}

.carousel-wrapper {
  --width: 100px;
  --gap: 0;
  --num-items: 10;
  --ani-offset: calc(var(--width) * var(--num-items) * -1);
  --ani-speed: 10s;
  
  width: 400px;
  overflow: hidden;
  position: relative;
}
.carousel-wrapper::before,
.carousel-wrapper::after{
  content: '';
  position: absolute;
  width: 20%;
  height: 100%;
  z-index: 1;
  top: 0;
}
.carousel-wrapper::before{
  left: 0;
  background-image: linear-gradient(to right,var(--bg-clr) 0%,transparent 50%);
}
.carousel-wrapper::after{
  right: 0;
  background-image: linear-gradient(to left,var(--bg-clr) 0%,transparent 50%);
}

.carousel {
  display: flex;
  align-items: center;
  animation: slide var(--ani-speed) linear infinite;
}
.item{
  flex: 1 0 var(--width);
  text-align: center;
  padding:1rem;
}
.item:last-child{
}
.item > img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

@keyframes slide {
  100% {
    transform: translateX(var(--ani-offset));
  }
}

Empfohlen

Adresse der Anmeldeseiten

Super Smash Bros

Unity WebGL Loader aus Zip mit CrazyGames SDK Shim

HTML

CSS

JS

Empfohlen

Adresse der Anmeldeseiten

Super Smash Bros

Unity WebGL Loader aus Zip mit CrazyGames SDK Shim

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS