Animación Css HOME

Club para webmasters Foros Creación de páginas web Animación Css HOME

Viendo 4 entradas - de la 1 a la 4 (de un total de 4)
  • Autor
    Entradas
  • #10930 Karma: 0
    Usuario-Chorri
    Participante
    100
    ChorriPuntos 36
    Nuevo

    Hola, estoy intentando crear una animación CSS para la home de una pagina web.
    Utilizo Generate press premium y he creado un element. Si pongo un color o una foto ningún problema todo encaja.
    Pero con la animación que estoy creando, a la vez que se mueven las nubes, se me va ampliando la página web hacia la derecha.
    Alguien sabría en que estoy fallando??
    Gracias de antemano!
    El código original es este: https://codepen.io/agoodwin/pen/NMJoER
    El código CSS que estoy poniendo es:

    @keyframes move-background {
    	overflow: hidden;
    	 from {
    		 -webkit-transform: translate3d(0px, 0px, 0px);
    		 overflow: hidden;
    	}
    	 to {
    		 -webkit-transform: translate3d(2000px, 0px, 0px);
    		 overflow: hidden;
    	}
    	overflow: hidden;
    }
    
     @-webkit-keyframes move-background {
    	 from {
    		 -webkit-transform: translate3d(0px, 0px, 0px);
    	}
    	 to {
    		 -webkit-transform: translate3d(0px, 0px, 0px);
    	}
    	 overflow: hidden;
    }
    
     @-moz-keyframes move-background {
    	 from {
    		 -webkit-transform: translate3d(0px, 0px, 0px);
    		 overflow: hidden;
    	}
    	 to {
    		 -webkit-transform: translate3d(2000px, 0px, 0px);
    		 overflow: hidden;
    	}
    	 overflow: hidden;
    }
    
     @-webkit-keyframes move-background {
    	 
    	 from {
    		 -webkit-transform: translate3d(0px, 0px, px);
    		 
    	}
    	 to {
    		 -webkit-transform: translate3d(0px, 0px, 0px);
    		 
    	}
    }
    
     .background-container {
    	background-size: 100px 100px;
      position: center;
    	padding-top: 350px;
      padding-bottom: 400px;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    	overflow: hidden;
    }
    
    .stars {
      background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
    		padding-top: 350px;
      padding-bottom: 40px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: block;
      z-index: 0;
    }
    
    .twinkling {
      width: 100px;
      height: ;
    		padding-top: 350px;
      padding-bottom: 40px;
      background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
      background-size: 100px 100px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 2;
      -moz-animation: move-background 70s linear infinite;
      -ms-animation: move-background 70s linear infinite;
      -o-animation: move-background 70s linear infinite;
      -webkit-animation: move-background 70s linear infinite;
      animation: move-background 70s linear infinite;
    	overflow: hidden;
    }
    
    .clouds {
    	overflow: hidden;
      width: 4200px;
      height: ;
    		padding-top:px;
      padding-bottom: px;
      background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;
      background-size: 480px 480px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 3;
      -moz-animation: move-background 150s linear infinite;
      -ms-animation: move-background 150s linear infinite;
      -o-animation: move-background 150s linear infinite;
      -webkit-animation: move-background 150s linear infinite;
      animation: move-background 150s linear infinite;
    	
    }
    img {
      right: ;
      top: 65px;
      bottom: 65px;
      height: 250px;
      width: 250px;
      position: absolute;
      z-index: 4;
      right: 20px;
    	overflow: hidden;
    }
    • Este debate fue modificado hace 10 meses, 4 semanas por Usuario-Chorri.
    #10940 Karma: 0
    David Cuesta
    Superadministrador
    162
    ChorriPuntos 7.809
    Curso SEO
    ChorriCuesta

    Creo que debe ser algún css genérico que se aplica a todas las imágenes o todos los divs, seguramente con algo como aplicarle a ese div en concreto un display: block o un overflow:hidden… me suena que puede ser algo así.

    Si lo deseas pásame por ticket la web donde está dando el error par poder darte la solución para tu caso.

    Un saludo!

    #10944 Karma: 0
    David Cuesta
    Superadministrador
    162
    ChorriPuntos 7.809
    Curso SEO
    ChorriCuesta

    Arreglado poniendo al CSS general de la web:
    body {
    overflow-x: hidden;
    }

    Un saludo!

    #10945 Karma: 0
    Usuario-Chorri
    Participante
    100
    ChorriPuntos 36
    Nuevo

    Mil gracias! Solucionado

    Un saludo!

Viendo 4 entradas - de la 1 a la 4 (de un total de 4)
  • Debes estar registrado para responder a este debate.