Jump to content
gilbertjuniors

Como montar este layout

Recommended Posts

Pessoal, boa tarde.

 

Fiquei um tempo sem desenvolver nenhum website, estou cursando banco de dados e, resolvi reciclar meus conhecimentos de webdesign.

Me deparei com um tipo de layout onde os textos e imagens se movem em função da movimentação da barra de rolagem e, uma um background continua estático. (exemplo este site: http://www.devicelab.com.br).

Como eu crio este efeito dentro dos padrões W3C?

 

 

Share this post


Link to post
Share on other sites

O nome desse efeito se chama Parallax, existem vários tutoriais na internet de como fazer, irei postar um aqui que me parece estar bem explicado:

https://tableless.com.br/parallax-simples-com-jquery-e-css/

 

Qualquer dúvida estamos aí.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By jcvlanova
      Galera, dei uma olhada no Site https://www.fastly.com/ e percebi que a página é estruturada em tópicos circundados, divididos por uma espécie de caixas, boxes formados por linhas e curvas, alguém saberia me dizer como é possível fazer essas linhas curvas uma página html ???
    • By ViniciusRamoa
      Eu peguei um site já pronto em laravel, minha ideia era só pegar o site que o cara distribuiu e mudar layout aos poucos para se adaptar para mim, eu sei, digamos, o intermediário de css e básico de Php e html, e o que eu quero alterar é só o básico como: cores, background e etc, mas mesmo eu alterando os arquivos css ou até mesmo apagando todos os arquivos css, NADA muda no site, como se fosse inútil os arquivos css, mudar a aparência no laravel é diferente? Qual o método?
      Vale lembrar que possui vários arquivos .blade (index.blade, footer.blade etc), isso tem algo a ver? Obrigado
    • By ramonjba
      Olá pessoal. Estou desenvolvendo uma especie de monitoramento, estou utilizando o MATERIALIZE, desta forma, optei por não trabalhar com responsividade, pois preciso do máximo de informações possíveis na tela, seja desktop ou mobile, fazendo o ajuste de zoom se preciso. Fiquei cerca de dois anos sem programar, eu havia feito esse projeto para meu TCC, porém após finalizar, deixei parado e acabei perdendo. Com o tempo, algumas ideias em relação ao projeto também mudaram, e para apresentar a informações das `Torres de Internet`, utilizei o collapsible-header conforme imagem `projeto_monitor`, pois, ao clicar em cima do `equipamento`, ele apresenta informações relacionadas a ele. Estou tendo problemas para alinhar estes `collapsible-header ` pois preciso preencher toda a tela, sem deixar espaçamentos. Para isso, fiz uma classe CSS contendo: 
       
      .row .col.quadroTorre1 { margin-top: -10%; margin-bottom: 10%; } .row .col.quadroTorre2 { margin-top: -7.3%; margin-bottom: 10%; } .row .col.quadroTorre3 { margin-top: -30%; margin-bottom: 10%; } .row .col.quadroTorre4 { margin-top: -1.7%; margin-bottom: 10%; }  
      E fiz uma verificação no código, para ver qual o numero de equipamentos que a `Torre` que está acima tem. Porém, como podemos observar, na segunda linha funcionou preenchendo os espaços, mas pulando para a terceira linha, já possui uma lacuna em branco, onde deveria estar situado o elemento. Além disso, os elementos da segunda linha, acabam se sobrepondo, conforme imagem `projeto_sobrepor`. Como fiquei cerca de 2 anos sem programar, estou encontrando algumas dificuldades e empacando nelas. A parte de front-end é a que gera maior dificuldade. Se alguém puder me auxiliar, agradeço. 
       
      Edit: Se alguém tiver dicas de como posso melhorar o preenchimento das lacunas em branco. 
       


    • By ianluis
      Layout Responsivo Desalinhado: Estou criando um site de filmes e a cada momento que incluo algo o layout se estica para a direita ficando impossível de concertar sou novato e não sei onde estou errando me ajudem.
       
      Estou tentando criar um site de filmes responsivo mais o layout estar completamente desalinhado estirando a todo momento que incluo alguma  imagem para a direita me ajudem por favor.
       
       
      Codigo CSS abaixo:
       
      *{
          
        padding: 0px;
        margin: 0px;
      }
      a{
          text-decoration:none;
          color:#999;
      }
      body{
          font-family: arial;
          color:#eaeeef;
          background-color: #36454f; /*Fundo Escur0*/ 
          margin-left: -100px;
          margin-top: -16px;

      }
      .font400{
      font-size: 4em;

      }
      .font350{
      font-size: 3.5em;
      }     

      .font300 {
      font-size: 3em;
      }
      .font200 {
      font-size: 2em;
      }
      .font180 {
      font-size: 1.8em;
      }
      .font12{
          font-size:12px;
      }

      .font10{
          font-size:10px;
      }
      .font18{
          font-stretch: 18px;
      }
      .branca{
          color:#FFFFFF
      }

      .cinza {
          color: #CBCCCD;
      }
      .vermelho_1{
          color:#ff0000;
      }
      ul{
          list-style:none;
      }
      /*Imagem do Menu*/
      img{
          width:35px;
          margin-left: 100px;
          margin-top: 10px;
          
      }
      input[type="checkbox"]
          
      {
          display:none;
      }
      nav
      {
          background-color: rgba(16,16,16,.5);
          width:150px;
          height:100%;
          left: -150px;
          position: absolute;
          transition: all .5s;
          
          
      }
      input[type="checkbox"]:checked ~ nav
      {
          transform: translateX(150px);
      }
      ul{
          top:80px;
          position:absolute;
          width: 100%;
      }
      a{
          
          background: block;
          padding:10px 5px;
          color: white;
      }
      a:hover{
           background-color: rgba();
           color: black;
      }
      label{
          padding: 15px;
          position: absolute;
          z-index:1;
          /*icone*/
      }

      /* Formatação de chamada principal da imagem em destaque*/
      .chamada{
          background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://img.youtube.com/vi/NOEQ7wVKIew/maxresdefault.jpg);
          background-position: center center; /* Centraliza a imagem no centro da tela*/
          background-repeat: no-repeat;/* Não repete a imagem*/
          background-size: cover; /* Ocupa toda a tela sem distorcer a imagem*/
          background-attachment: fixed;
          height: 100vh; /*100% do view height*/
          display: flex; 
      }   
      .area_chamada {
          margin: auto;
          margin-bottom:150px;
          text-align: center;
      }
      h2 {
          margin: 0px;
      }
      .titulo{
           font-family: 'Open Sans', sans-serif;
           text-transform: uppercase;
           line-height: 1.1em;
           font-weight: 400;
           text-shadow: 2px 3px 0px rgba(0,0,0,.8);
           color: #CBCCCD;
           
           
      }
      .subtitulo{
          font-family: 'Open Sans', sans-serif;
          text-transform: uppercase;
          line-height: 1.1em;
          font-weight: 400;
          text-shadow: 2px 3px 0px rgba(0,0,0,.8);
          height: 80px;
      }
      .parte_superior{
          /*banner de 280px na largura e 120px*/
          width: 100vw;
          height: 0px;
          display: flex;
          align-items: center;
          margin-top: 17px;
          margin-left: 50px;

      }
      /*imagem do logo*/
      .logo> img {
           width:250px;
           margin-top: 0px ;
                margin: 160px;
           
      }
      .pesquisa {
       width:500px;
       height:40px;
       margin:200px auto;
       display: flex;
       margin-top: 80px;
       margin-left: 40px;
       border-bottom-width: 2px;
      }
      #texto {
       width:520px;
       height:50px;
       float:left;
       font-family:Arial, Helvetica, sans-serif ;
       font-size:18px;
       background: #151515;
       border: #151515;
       border-radius: 6px 0px 0px 6px;
       display: flex;
       color: white;
       justify-content: space-around;
       
      }
      #texto:focus {
       border: solid 2px #1f1f1f;

      }
      .btn {
       height:34px;
       width:17px;
       background:#ff0000;
       padding:6px 8px;
       cursor:pointer;
       display: flex;
       margin-top: -10px;
       border: solid 0px #ff0000;
       border-radius: 0px ;
       margin-left: 0px;
       
      }
      button{
          padding: 12px;
          border-width: 0px;
          border-radius: 0px 6px 6px 0px;
          height: 50px;
          background: #ff0000;
          width: 60px;
      }
         
         /*Move todo o Slide*/
      .miniaturas{
          
           height: 290px;
               width: 180px;
               display: flex;
               padding: 0px 2%;
               margin-top: -250px;
               margin-left: 90px;
               margin-top: -100px;
      }
      /*Move todo o menu do slide*/
      .horizontal{
             display: flex;
             justify-content: center ;
              margin-left: 70px;
             justify-content: space-around;
             width: 200px;
             color: dimgrey;
             margin-top: 450px;
              
      }
      .ativo{
          margin:0px;
          color:white;
      }
           
         .black_clover> img{
               
               height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;
               }
      .black_clover > img:hover{
          opacity: 0.2;
      }

      .one_punch_man> img{
               height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;
        }     
          .one_punch_man > img:hover{
          opacity: 0.2;
      }
      .Dororo> img{
          height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;
        }     
          .Dororo > img:hover{
          opacity: 0.2;
      }
      .shingek_3>img{
            height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;

        }     
          .shingek_3 > img:hover{
          opacity: 0.2;
      }
      .Mob>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;

        }     
          .Mob > img:hover{
          opacity: 0.2;

      }
      .kimetsu_no_yaiba>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Kimetsu_no_yaiba > img:hover{
          opacity: 0.2;  
      }
      .figuras {
          display: flex;
          margin-left: 50px;
          justify-content: space-between;
          padding: 4%;
          height: 290px;
          width: 180px;

          
          }
              figure {
                    margin: 0px;
                    display: flex;

      }
      figcaption{
          width: 180px;
          height: 290px;
          background-color: black;
          display: flex;
          min-height:290px;
          margin: 10px;
          margin-top: -300px;
          
      }

      .grana{
          display: flex;
      }
      .baner{
          padding-top:   100px;
          display: flex;
          
      }
      /*move o banner e a primeira coluna de animes*/
      .bittube>a>img{
          display: flex;
          width: 400px;
          margin: 0px 580px; 
          margin-top: 20px;

      }
      .posts{
          margin-top:  100px;
          padding: 0px -400px;
          display: flex;
          margin-left: 180px;
          

      }
      .primeira{
          display: flex;
      }

      .primeira > ul > li{
          display:inline-block;
          margin-top: 1220px;
          margin-left: 20px;
      }

      .One_Piece>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .One_Piece> img:hover{
          opacity: 0.2;  
      }
      .tate_no_yusha>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .tate_no_yusha> img:hover{
          opacity: 0.2;  

      }
      .naruto_shippuden>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .naruto_shippuden> img:hover{
          opacity: 0.2;  

      }
      .Nanatsu_no_taizai>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Nanatsu_no_taizai> img:hover{
          opacity: 0.2;  

      }
      .dragon_ball_super>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .dragon_ball_super> img:hover{
          opacity: 0.2;  

      }
      .boku_no_hero_academia>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .boku_no_hero_academia> img:hover{
          opacity: 0.2;  
      }
       /*Move toda a segunda coluna de animes*/
      .coluna{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda{
          display: flex;

      }

      .boruto>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .boruto> img:hover{
          opacity: 0.2;  

      }

      .isekai_maou>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .isekai_maou> img:hover{
          opacity: 0.2;  

      }

      .bleach>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .bleach> img:hover{
          opacity: 0.2;  

      }

      .fairy_tail>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .fairy_tail> img:hover{
          opacity: 0.2;  
      }

      .tensei_shitara>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .tensei_shitara> img:hover{
          opacity: 0.2;  
      }

      .Tokyo_Ghoul>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Tokyo_Ghoul> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_series{
          margin-top:   120px ;
          margin-left: 180px;
          display: flex;
      }
      .primeira_series{
          display: flex;

      }

      .primeira_series > ul > li{
          display:inline-block;
          margin-top: 2020px;
          margin-left: 20px;
      }

      .Atirador>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Atirador> img:hover{
          opacity: 0.2;  
      }

      .Game_of_thrones>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Game_of_thrones> img:hover{
          opacity: 0.2;  
      }

      .La_casa_de_papel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .La_casa_de_papel> img:hover{
          opacity: 0.2;  
      }

      .lucifer>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .lucifer> img:hover{
          opacity: 0.2;  
      }

      .sons_of_anarchy>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .sons_of_anarchy> img:hover{
          opacity: 0.2;  
      }

      .vikings>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .vikings> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_series2{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_series2{
          display: flex;

      }

      .segunda_series2 > ul > li{
          display:inline-block;
          margin-top: 2020px;
          margin-left: 20px;
      }

      .The_purge>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .The_purge> img:hover{
          opacity: 0.2;  
          }

      .titans>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .titans> img:hover{
          opacity: 0.2;  
          }

      .the_big_bang_theory>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .the_big_bang_theory> img:hover{
          opacity: 0.2;  
          }

      .o_último_guardião>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .o_último_guardião> img:hover{
          opacity: 0.2;  
          }

      .legends_of_tomorrow>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .legends_of_tomorrow> img:hover{
          opacity: 0.2;  
          }

      .chernobyl>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .chernobyl> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_fimes{
          margin-top:   120px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_filmes{
          display: flex;

      }

      .segunda_filmes > ul > li{
          display:inline-block;
          margin-top: 2820px;
          margin-left: 20px;
      }

      .avangers_Age>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .avangers_Age> img:hover{
          opacity: 0.2;  
          }

      .capitan_marvel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .capitan_marvel> img:hover{
          opacity: 0.2;  
      }

      .capitao_america>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .capitao_america> img:hover{
          opacity: 0.2;  
          }

      .guerra_civil>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .guerra_civil> img:hover{
          opacity: 0.2;  
          }
      .doutor_estranho>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .doutor_estranho> img:hover{
          opacity: 0.2;  
          }

      .hulk_o_inacreditavel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .hulk_o_inacreditavel> img:hover{
          opacity: 0.2;  
          }
      .coluna_fimes1{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_filmes1{
          display: flex;

      }

      .segunda_filmes1> ul > li{
          display:inline-block;
          margin-top: 2820px;
          margin-left: 20px;
      }
      .iron_man>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .iron_man> img:hover{
          opacity: 0.2;  
          }
          .thor>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .thor> img:hover{
          opacity: 0.2;  
          }
          .a_lenda_do_golem>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .a_lenda_do_golem> img:hover{
          opacity: 0.2;  
          }
          .maligno>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .maligno> img:hover{
          opacity: 0.2;  
          }
          .as_trapaceiras>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .as_trapaceiras> img:hover{
          opacity: 0.2;  
          }
          .homem_de_ferro2>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .homem_de_ferro2> img:hover{
          opacity: 0.2;  
          }

          .rodape{
              padding: 25px;
              color: white
              font-size:1.5em;
              display: flex;
              padding-top:   3600px;
              padding-left: 350px;

          }
          .rodape li{
              margin-right:20px;
              padding-top: 50px;
              
          }
          .parceria{
              display: flex;
              padding-top:   3600px;
              padding-left: 350px;
              }
          .parceria li{
              margin:-20px 10px;
              display:flex;
       
       
       
      <<<<<<<<Codigo Html abaixo>>>>>>>>
    • By lukaizh
      Olá Galera,
       
      Estou iniciando um e-commerce pela Tray,e não entendo muito bem de css 
      eu gostaria de saber se tem como eu mudar o menu lateral esquerdo, para deixar ele na horizontal.
       
      e teria mais uma dúvida, se há alguma maneira de importar o site para o photoshop e depois pegar o css das camadas.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.