move the container without appearing scrool

Question

move the container without appearing scrool

Asked 6 years ago

Viewed 63 times

-1

good morning,

I’m having a problem when I move a div in mine, I make her walk 50% the size of the screen, until then everything ok, more when she goes to the side opens the scroll option to see me to where this div. I wish when she moved that scroll wouldn’t appear.

    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>

1

Friend without your HTML and the complete CSS does not answer you, only with these fragments of code there is no way to simulate the problem you are having there... But if you want a TOSCA solution just put overflow-x: Hidden; no body

– hugocsl

2018/12/10 at 14:25
The div that was moved a part out of the screen size is to stay off the screen even?

– Sam

2018/12/10 at 14:34
yes and to stay out even, juxtaposed to appear the content that is below it.

– Roney Berti

2018/12/10 at 15:49
I made the change of the question showing the whole code... I think so gives to better intender.

– Roney Berti

2018/12/10 at 16:03

1 answer

Browser other questions tagged html jquery css3

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-12-10T16:32:54+00:00

Your code guy got a little confused, I mean the effect you want to give... So I don’t know if I got it right, but one option is putting positio:relative in the body and include that line in your jQuery $('body').animate({"left": "-50%"},"slow");

OBS: If you want the bar to scroll it doesn’t seem ever you can put overflow: hidden; in the body, right during the transition the bar of the scroll won’t show up

Here on the site Snippet will not work very well because you have to make the responsive treatment for small screens.

Follow the code referring to the image model above:

$(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>