1

Hola amigos de Stack Overflow estoy realizando una página web con html y css y tengo que ponerle un pequeño slider que solo lleve texto, estuve investigando y vi que se puede hacer solo con css y su librería animation junto con @keyframes pero al ejecutarla me hace más grande mi página y muestra un scrollbar muy enorme tanto horizontal como vertical, como si el área de trabajo se expandiera, además encima los textos si lo ves de manera movil. Ojala puedan ayudarme a resolverlo, les comparto mi página y también el código. https://pruebasurologyq.000webhostapp.com/

body {
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  background-size: cover;
  background-color: black;
}


#video-background { 
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}

article {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

h1 {
  position: absolute;
  top: 30%;
  width: 100%;
  font-size: 3.0rem;
  letter-spacing: 1px;
  color: #fff;
  font-family: Raleway, sans serif;
 
  text-align: center;
}

button {
  position: relative;
  border-radius: 5px;
  border: 0;
  font-size: 1.5rem;
  font-family: Raleway, sans serif;
  color: #fff;
  background-color: #2980b9;
  padding: .4em;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

button:hover {
  background-color: #3498db;
}

input {
  display: none;
}

img {
  width: 200px;
  position: fixed;
  top: 20px;
  left: 30px;

}

.open {
  right: 30px;
  background-color: #ffffff;
  width: 40px;
  height: 5px;
  display: block;
  display: 
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  top: 40px;
}

.open:before {
  content: "";
  background-color: #ffffff;
  width: 40px;
  height: 5px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: -8px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.open:after {
  content: "";
  background-color: #ffffff;
  width: 40px;
  height: 5px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: 4px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.menuOpen {
  width: 24px;
  height: 20px;
  display: block;
  padding: 15px;
  cursor: pointer;
  float: right;
}

.menuOpen:hover .open:before {
  top: -9px;
}

.menuOpen:hover .open:after {
  top: 5px;
}

.menu {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgb(76 62 95 / 90%);
}

.menu label {
  width: 30px;
  height: 30px;
  position: fixed;
  right: 20px;
  top: 20px;
  background-size: 100%;
  cursor: pointer;
}

.menu .menuContent {
  position: relative;
  top: 50%;
  font-size: 60px;
  text-align: center;
  padding-bottom: 20px;
  margin-top: -260px;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.menu ul li a {
  display: block;
  color: white;
  text-decoration: none;
  transition: color 0.2s;
  font-family: Trebuchet MS;
  text-transform: uppercase;
  padding: 25px 0;
}

.menu ul li a:hover {
  color: #000000;
}

.menu ul li:hover {
  background: white;
}

.menuEffects {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.menuEffects ul {
  transform: translateY(0%);
  transition: all 0.5s;
}

#menuToggle:checked ~ .menuEffects {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;
}

#menuToggle:checked ~ .menuEffects ul {
  opacity: 1;
}

#menuToggle:checked ~ .menuOpen .open {
  background-color: transparent;
}

#menuToggle:checked ~ .menuOpen .open:before {
  content: "";
  background-color: white;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:checked ~ .menuOpen .open:after {
  content: "";
  background-color: white;
  transform: rotate(-45deg);
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:not(:checked) ~ .menuEffects ul {
  transform: translateY(-30%);
}

.slider {
    width: 95%;
    margin: auto;
    overflow: hidden;
}

.slider ul {
    display: flex;
    padding: 0;
    width: 400%;
    animation: cambio 30s infinite alternate linear;
}

.slider li {
    width: 100%;
    list-style: none;
}

.slider img {
    width: 100%;
}

@keyframes cambio {
    0% {margin-left: 0;}
    20% {margin-left: 0;}
    
    25% {margin-left: -100%;}
    45% {margin-left: -100%;}
    
    50% {margin-left: -200%;}
    70% {margin-left: -200%;}
    
    75% {margin-left: -300%;}
    100% {margin-left: -300%;}
}
<!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="images/favicon.ico" />
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/background.css">
        <link rel="stylesheet" type="text/css" href="css/navbar.css">
        <link rel="stylesheet" type="text/css" href="css/slider.css">
        <title>UrologyQ</title>
    </head>

    <body>  
        <video autoplay loop id="video-background" muted>
            <source src="videos/background_video_1.mp4" type="video/mp4">
        </video>


        <div id="menuArea">
            <img src="images/logo.png" id="logo">
            <input type="checkbox" id="menuToggle"></input>

            <label for="menuToggle" class="menuOpen">
              <div class="open"></div>
            </label>

                <div class="menu menuEffects">
                    <label for="menuToggle"></label>

                        <div class="menuContent">
                            <ul>
                              <li><a href="#">Sección 1</a></li>
                              <li><a href="#">Sección 2</a></li>
                              <li><a href="#">Sección 3</a></li>
                              <li><a href="#">Sección 4</a></li>
                            </ul>
                        </div>
                </div>
        </div>

        <div class="slider">
            <ul>
                <li>
                    <h1>Tu urólogo de confianza</h1>
                 </li>
                <li>
                    <h1>Los tratamientos deben satisfacer tus necesidades</h1>
                </li>
                <li>
                    <h1>¿Cirugía?, Solo si es estrictamente necesario</h1>
                </li>
                <li>
                    <h1>Mi principal objetivo: Tu salud</h1>
                </li>
            </ul>
        </div>

    </body>

    </html>
  

3
  • body {overflow:hidden} ocultará el scroll. Commented el 31 ene. 2021 a las 23:33
  • Ya lo intenté amigo pero al ejecutarlo en móvil se ve cómo se expande la página Commented el 31 ene. 2021 a las 23:35
  • Para eso existen las reglas css @media y los frameworks como Bootstrap. Commented el 1 feb. 2021 a las 0:33

1 respuesta 1

1

para evitar el scroll debes de quitar el min-height y el min-width y solo poner el width y height y poner el position en absolute

#video-background { 
 position: absolute;
 width: auto; 
 height: auto;
}

tambien tienes que cambiar el h1

h1{
    position: relative;
    width: 1000px;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.