-1

bom dia,

estou tendo um problema quando movo uma div na minha, faço ela andar 50% do tamanho da tela, ate ai tudo ok, mais quando ela vai para o lado abre a opção de scroll para mo ver ate onde esta essa div. gostaria que quando ela movesse nao aparecesse esse scroll.

    class div:
    html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*display invisivel*/
.container-2{
    position: absolute;
    top: 0px;
    display: none;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
/*display que se move*/
.container-3{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



.left {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.right {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}



.box {
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-1 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-servico{
    background-image: url(img/servico.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}

@media screen and (max-width:768px) {
    .container, .container-2 {
        flex-direction: column;
    }

    .left, .right {
        width: 100%;
    }
    .left{
        height: 40%;
    }
    .right{
        height: 60%;
    }
}


/*ZoomIn Hover Effect*/
.hover-zoomin a {
    /*display: block;*/
    position: relative;
    overflow: hidden;
}
.hover-zoomin img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.hover-zoomin:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.titulo{
    position: absolute;
}

.pos-titulo{
    color: white;
    font-size: 3rem;
    margin-right: 10px;
    margin-top: 10px;
}

.pos-icone{
    color: white;
    font-size: 4rem;
    margin-left: 50px;
    margin-bottom: -10px;
}

html:

<div class="container">
        <div class="left" id="content2"><img src="img/logo.png" class=""></div>
        <div class="right" id="content">
            <!-- BOX SERVIÇOS -->
            <div class="box hover-zoomin">
                <a id="animate" value="Animate" class="box-1">
                    <img src="img/servico.jpg" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
            <!-- BOX PORTIFOLIO -->
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="img/portifolio.png" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
            <!-- BOX CONTATOS -->
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="img/contato.jpg" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
            <!-- BOX SOBRE -->
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="img/sobre.jpg" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- conteudo embaixo -->
    <div class="container-2" id="container2">
        <div class="left"><img src="img/logo.png" class=""></div>
        <div class="right">
            <!-- BOX SERVIÇOS -->
            <div class="box hover-zoomin">
                <a id="animate" value="Animate" class="box-1">
                    <img src="img/servico.jpg" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">teste</h1>   
                    </div>
                </a>
            </div>
            <!-- BOX PORTIFOLIO -->
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="img/portifolio.png" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
            <!-- BOX CONTATOS -->
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="img/contato.jpg" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
            <!-- BOX SOBRE -->
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="img/sobre.jpg" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
        </div>
    </div>

Jquery:

<script>
$(document).ready(function() {
    $("#animate").click(function() {
        $('#content').animate({"left": "50%"},"slow");
        $('#content2').animate({"right": "50%"},"slow");
        $('#container2').removeClass("container-2");
        $('#container2').addClass("container-3");

    });
});
</script>
4
  • 1
    Amigo sem seu HTML e o CSS completo não da para te responder, só com esses fragmentos de código não tem como simular o problema que vc está tendo ai... Mas se vc quiser uma solução TOSCA basta colocar overflow-x: hidden; no body
    – hugocsl
    Commented 10/12/2018 às 14:25
  • A div que foi movida uma parte para fora do tamanho da tela é para ficar fora da tela mesmo?
    – Sam
    Commented 10/12/2018 às 14:34
  • sim e para ficar fora mesmo, justamaente para aparecer o conteudo que esta abaixo dele. Commented 10/12/2018 às 15:49
  • fiz a alteração da pergunta mostrando o código todo... acho que assim da para intender melhor. Commented 10/12/2018 às 16:03

1 Resposta 1

1

Cara seu código, ficou um pouco confuso, me refiro ao efeito que vc quer dar... Então não sei se entendi bem, mas uma opção é colocando positio:relative no body e incluir essa linha no seu jQuery $('body').animate({"left": "-50%"},"slow");

inserir a descrição da imagem aqui



OBS: Se vc quiser que a barra de scroll não parece nunca vc pode colocar overflow: hidden; no body, ai mesmo durante a transição a barra do scroll não vai aparecer



Aqui no Snippet do site não vai funcionar muito bem pq vc tem que fazer o tratamento responsivo para telas pequenas.

Segue o código referente ao modelo da imagem acima:

$(document).ready(function() {
    $("#animate").click(function() {
        $('#content').animate({"left": "50%"},"slow");
        $('#content2').animate({"right": "50%"},"slow");
        $('body').animate({"left": "-50%"},"slow");
        $('#container2').removeClass("container-2");
        $('#container2').addClass("container-3");

    });
});
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    position: relative;
}
.container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*display invisivel*/
.container-2{
    position: absolute;
    top: 0px;
    display: none;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
/*display que se move*/
.container-3{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



.left {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.right {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}



.box {
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-1 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-servico{
    background-image: url(https://placecage.com/100/102);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}

@media screen and (max-width:768px) {
    .container, .container-2 {
        flex-direction: column;
    }

    .left, .right {
        width: 100%;
    }
    .left{
        height: 40%;
    }
    .right{
        height: 60%;
    }
}


/*ZoomIn Hover Effect*/
.hover-zoomin a {
    /*display: block;*/
    position: relative;
    overflow: hidden;
}
.hover-zoomin img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.hover-zoomin:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.titulo{
    position: absolute;
}

.pos-titulo{
    color: white;
    font-size: 3rem;
    margin-right: 10px;
    margin-top: 10px;
}

.pos-icone{
    color: white;
    font-size: 4rem;
    margin-left: 50px;
    margin-bottom: -10px;
}


      
            
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


<div class="container">
        <div class="left" id="content2"><img src="https://placecage.com/100/100" class=""></div>
        <div class="right" id="content">
            <div class="box hover-zoomin">
                <a id="animate" value="Animate" class="box-1">
                    <img src="https://placecage.com/100/100" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="https://placecage.com/100/100" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="https://placecage.com/100/100" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="https://placecage.com/100/100" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- conteudo embaixo -->
    <div class="container-2" id="container2">
        <div class="left"><img src="https://placecage.com/100/100" class=""></div>
        <div class="right">
            <!-- BOX SERVIÇOS -->
            <div class="box hover-zoomin">
                <a id="animate" value="Animate" class="box-1">
                    <img src="https://placecage.com/100/100" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">teste</h1>   
                    </div>
                </a>
            </div>
            <!-- BOX PORTIFOLIO -->
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="https://placecage.com/100/100" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
            <!-- BOX CONTATOS -->
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="https://placecage.com/100/100" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
            <!-- BOX SOBRE -->
            <div class="box hover-zoomin">
                <a href="" class="box-1">
                    <img src="https://placecage.com/100/100" class="box-1">
                    <div class="titulo">
                        <i class="fas fa-briefcase pos-icone"></i>
                        <h1 class="pos-titulo">Serviços</h1>    
                    </div>
                </a>
            </div>
        </div>
    </div>

2
  • blz apenas com o overflow:hidden ja funcionou ... muito obrigado. Commented 10/12/2018 às 17:54
  • @RoneyBerti legal que deu certo! Se a minha resposta te ajudou de alguma forma considere marca-la como Aceita, nesse ícone abaixo das setinhas no lado esquerdo da minha resposta :) assim o site não fica com perguntas abertas pendentes sem resposta aceita. Abs
    – hugocsl
    Commented 10/12/2018 às 18:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .