Element translation results in the expansion of the page's width

I am in need of assistance with translating multiple divs stacked on top of each other so that each layer slides away. I have attempted to use animate.css for animation and jQuery to detect when the animation ends and add a class to hide the container to prevent an increase in page width. However, the page width continues to increase despite my efforts.

Additionally, I am interested in looping the animation.

Here is the jsfiddle link for reference: http://jsfiddle.net/8qzvhxmu/

HTML:

<div class="test animated "></div>
<div class="test1 animated  lightSpeedOut"></div>

CSS:

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

.test
{
    background-color: #323232;
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;

}

.test1
{
    background-color: #01c8c8;
    height: 100%;
    width: 100%;
    z-index: 4;
    position: absolute;

}

.hide
{
    display: none;
}

JQuery:

$(document).ready(function(){
    $('.test1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function()
    {
        document.querySelector('.test1').classList.add("hide");
    });
});

Answer №1

To create smooth animations for your elements, enclose them in a container and disable its overflow property to prevent enlargement.

Check out this demo on Fiddle: http://jsfiddle.net/e62m6hfn/

HTML Markup

<div class="container">
    <div class="test animated"></div>
    <div class="test1 animated lightSpeedOut"></div>
</div>

CSS Styling

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

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.test {
    background-color: #323232;
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
}
.test1 {
    background-color: #01c8c8;
    height: 100%;
    width: 100%;
    z-index: 4;
    position: absolute;
}
.hide {
    display: none;
}

Update

I have updated the Fiddle to include looping animations for your elements regardless of the quantity.

While the code may not be perfect, it functions as intended.

Visit the updated Fiddle with looping feature: http://jsfiddle.net/e62m6hfn/2/

Updated HTML Markup

<div class="container">
    <div class="test-animate test"></div>
    <div class="test-animate test1"></div>
</div>

Updated CSS Styling

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.test-animate {
    height: 100%;
    width: 100%;
    position: absolute;
}
.test {
    background-color: #323232;
}
.test1 {
    background-color: #01c8c8;
}
.bottom {
    z-index: -1;
}

jQuery scripting

function animate($el) {
    $el.addClass('animated lightSpeedOut');
}

var elCounter = 0;

$(document).ready(function () {
    elCounter = $('.test-animate').length;
    animate($('.test-animate').eq(elCounter - 1));

    $('.test-animate').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        elCounter = (elCounter > 1) ? elCounter-1 : $('.test-animate').length;
        $('.test-animate').removeClass('bottom');
        $(this).addClass('bottom');
        $(this).removeClass('animated lightSpeedOut');
        animate($('.test-animate').eq(elCounter - 1));
    });
});

Answer №2

To solve this issue, consider including overflow: hidden; into the html, body {} section.

html,body
{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When extracting information from a table within a Vue.js and Vuetify.js function

When trying to display a table, only one row is being printed. How can I resolve this issue? I have attempted various solutions (Vanilla JS worked). This project is for educational purposes and I am relatively new to JS and Vue.js. <template> < ...

Struggling to find a solution for altering font color with jQuery while creating a straightforward menu

I'm having trouble changing the color of the active button pressed to "color:white;"... Here is the link to the jsfiddle: http://jsfiddle.net/wLXBR/ Apologies for the clutter in the file, my css is located at the bottom of the CSS box (Foundation cod ...

retrieving a URL with the help of $.getJSON and effectively parsing its contents

I seem to be struggling with a coding issue and I can't quite figure out what's wrong. My code fetches a URL that returns JSON, but the function is not returning the expected string: function getit() { var ws_url = 'example.com/test.js&ap ...

Revamping Tab Styles with CSS

Currently, I am working on a mat tab project. The code snippet I am using is: <mat-tab-group> <mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab> </mat-tab-group> If you want to see the liv ...

Invoking a Jquery Dialog

Every time I click on the button to display a message, I encounter an issue where one MessageBox appears as expected. However, when I open the Jquery Dialog for the second time, two MessageBoxes pop up and the same problem occurs with three MessageBoxes on ...

Creating a JSON file using the attributes and values of HTML tags

I am seeking assistance in generating a JSON file from HTML data using jQuery. The HTML structure consists of multiple departments with similar tags and classes: <div class="department_one"> <h1>Name Of Manufacturer</h1> < ...

Why isn't the ajax table showing up in my HTML?

I am facing an issue while trying to run an application that involves AngularJS, Ajax, and a Java Controller returning JSON. Despite my efforts, the table is not displaying in the HTML. I am new to working with Ajax and AngularJS, and need assistance troub ...

Transmit responses from PHP script

I am in the process of creating a signup form where, upon clicking the submit button, all form data is sent to a PHP file for validation. My goal is to display an error message next to each input field if there are multiple errors. How can I achieve this ...

Shifting an element to the right before revealing or concealing it with Jquery Show/Hide

$(document).ready(function(){ var speed = 700; var pause = 3500; function removeFirstElement(){ $('ul#newsfeed li:first').hide('slide', {direction: "up"}, speed, function() {addLastElement(thi ...

Using R for web scraping, I encountered a unique situation where the 'next page' button was only programmed to navigate to the top of the page

I am attempting to extract the headline snippets from a local newspaper's articles by utilizing rvest and RSelenium. To access pages beyond the initial one, I need to click on the 'next page' button. Strangely, when I perform this action thr ...

Tips for dynamically modifying style mode in Vue.js

I am looking to implement a feature where the style can be changed upon clicking a button. In my scenario, I am using Sass/SCSS for styling. For example, I have three different styles: default.scss, dark.scss, and system.scss. The code for dark.scss look ...

Include an icon in the header of a jumbotron

Here is the jumbotron configuration I am working with: https://i.stack.imgur.com/JQGpA.png This jumbotron was generated using the following code: <div class="col-sm-2"> <div class="jumbotron jumbotron-fluid top-space"> <div ...

Adjust the placement of image when changing the size of the window

Is there a way to prevent an image with a fixed position from covering up page content when the browser window is resized? <div > <img id="img1" class="wrapperImage"></img> </div> <style type="text/css"> .wrapperImag ...

Jquery causing Selenium to throw an error message "SCRIPT1004: Expected ';' " during execution

I am encountering an issue while trying to run jQuery in Selenium with the code below. Despite trying several different versions of jQuery min files, I continue to get the following error: Error : SCRIPT1004: Expected ';' Code : String mouseOv ...

Adding HTML to a webpage through the use of JavaScript's .innerHTML functionality

Currently in the process of creating a website template, I have made the decision to experiment with using an external JS file for inserting HTML at the top of the page to streamline navigation (eliminating the need for manual copying and pasting). My att ...

The glitch in jQuery's animate function callback

In my code to animate the sliding out of a div, I encountered an issue: var current = $('.s_text:visible'); current.animate({ right: 1014, opacity:0, },{queue: false, duration:2000}, function() { current.hide(); }); Strangely, the callbac ...

Randomly switch out the wordpress header image at designated intervals

I have a custom header image on my website that displays 6 random images each time the site is visited. I am attempting to change this group of images while the user is browsing my site. Here is the code I am using: function show_banner(){ document.ge ...

How to create expandable nodes with lazy-loaded children in Dynatree?

I have successfully implemented a tree navigation menu using Dynatree (). The tree consists of four levels: company, group, user, and computer. Each object within the tree is selectable, opening a page displaying the properties of that specific object. How ...

Is there a bug in Firefox when using the multicolumn columns property with Flexbox?

Could this be a compatibility issue with Firefox? The layout appears fine in Chrome or when I take out columns: 2, then it also displays correctly in Firefox. div { width: 500px; padding: 2rem; display: inline-flex; align-items: baseline; bor ...

Background cutting off right side of HTML website

While updating my supervisor's university website, I noticed a problem with the responsiveness. When resizing the browser window, a horizontal scroll bar would appear and the right side of the website would get covered by the background. On mobile dev ...