Animation with masking feature is malfunctioning

Struggling to create an animation that involves two images overlaid on each other – one panning from left to right at the bottom and another image with transparent regions on top, creating a masking effect.

Oddly enough, this animation doesn't display properly when the divs are nested within a container/wrapper div. However, everything works fine when they are placed outside of the predefined div structure. It seems like an issue related to the positioning of the divs...

Any help for this newbie trying to get things back on the right path?

View the jsfiddle: http://jsfiddle.net/hermanlens/BQPK5/

My HTML markup:


    <body>
    <div id="container">
      <div id="pagina">
        <div id="menu">
          ...
        </div>
        <div id="banner">
          <div id="box">
            <div id="panning"></div>
          </div>
        </div>
        <div id="inhoud">
          This is the content
        </div>
      </div>
      <div id="zijbalk">This is the sidebar</div>
      <div id="footer">This is the footer</div>
    </div>

    <div id="banner">
      <div id="box">
        <div id="panning"></div>
      </div>
    </div>
  

My CSS ...


    /* Custom CSS styles */
    ...

  

Answer №1

Here is the solution for you:

http://jsfiddle.net/johndoe/AbcDe/

You will need to physically rearrange the div elements instead of just converting the background into a carousel.

CSS Stylesheet

#header {
    width: 800px;
    overflow: hidden;
}
#content {
    background: url(http://placehold.it/200x150/000&text=Sunset-View);
    height: 120px;
}
#carousel {
    background: url(http://placehold.it/200x150/&text=Mountain-Ridge);
    height: 120px;
    /* custom z-index setting */
    z-index: 1;
    -webkit-animation: rotator 12s infinite;
    animation: rotator 12s infinite;
}
@-webkit-keyframes rotator {
    0% {
        -webkit-transform: translateY(120px);
    }
    100% {
        -webkit-transform: translateY(0px);
    }
}
@keyframes rotator {
    0% {
        transform: translateY(120px);
    }
    100% {
        transform: translateY(0px);
    }
}

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

Combining two HTML tables using jQuery/JavaScript

My table is displayed below: <table id="first" class="merge"> <tr> <td>Mick Jagger</td> <td>30</td> <td>50</td> <td>10</td> </t ...

What is the process for verifying which classes have been assigned to a specific component?

I am working with a Vue component and I would like to determine, from within the component itself, which classes have been applied to it. Is there a way to accomplish this? Currently, I am using a workaround where I pass the class as a prop: <my-comp ...

Having trouble with implementing ng-hide and ng-show functionality

I have been working on creating my very first Angular website and so far, everything has been going smoothly with the first page. However, I am facing an issue with the second page not appearing as expected when it meets the condition set with ng-show in t ...

What steps can I take to troubleshoot and fix the height of a div/span element?

Here is my HTML code: <div> <span style="display: inline-block;height:20px">20</span> <span style="display: inline-block;"><img src="img/ex.png"/></span> </div> The image I have in the second span is sized at ...

Error encountered when using Angular with HTML 5 pushstate

My Angular version is 1.2.16, and here is how my module is set up: publicApp.angularModule = angular.module('Public', [ 'ui.select2', 'infinite-scroll', 'ngSanitize', 'ui.utils']) .config(function ($loca ...

What is the best way to revert CSS modifications when leaving a component?

I have taught myself most of what I know and I realize there may be better practices out there that could help me. Right now, I am using jQuery to adjust an element's opacity when the mouse hovers over it. However, I am struggling with making sure tha ...

Guide to invoking an HTML document through PHP

I'm currently in the process of developing an administrator login page using a combination of HTML and PHP, with PHP serving various other functions as well. Once the administrator successfully logs in, I need to execute an HTML file. Below, you&apos ...

The anchor on a one-page website functions correctly solely in Chrome

After creating my online portfolio, I noticed that the anchor tags on the top menu work perfectly in Chrome, but in Explorer and Firefox, when you click the Skills tab it lands somewhere in the middle of my work. Any ideas why a simple tag might not load c ...

Alter the typography of the text that has been enhanced by Google

I am attempting to modify the default font of certain text that is processed through google-code-prettify within an angular directive. The structure of the template served by my directive appears as follows: <pre class= "prettyprint" style= "border:1p ...

Selecting a radio button using information retrieved from a JSON source

I am working with a set of radio buttons that send data to the database in the form of 0 and 1 (1=Yes, 0=No). I want to retrieve this information from the database and highlight the appropriate radio button based on the saved value. Here is my code snippet ...

How can you determine the number of times a particular digit appears around a specific position in a TypeScript array

(Utilizing Typescript for assistance) I am looking to determine the number of occurrences of the digit 2 surrounding a specific position within an array. The function takes in the position coordinates as parameters - param 1 for row and param 2 for column. ...

The arrangement and presentation of div elements on a website

I am experiencing difficulties with the order of my divs and the buttons are not functioning properly. My goal is to display a div containing extensive content, and once a user clicks the begin test button located below the lengthy text, the content should ...

The navigation bar elegantly glides behind my text, animations, and cards, seamlessly

Description: Upon scrolling down, an issue arises where the black navbar initially appears but then moves behind elements like carousels, texts, and cards on the website. This problem seems to be caused by the black navbar itself. Below is a demonstration ...

Enhance the functionality of the button by implementing AJAX with the use of data

I am currently working on implementing an update function without using forms. Instead, I am utilizing data-* attributes and ajax. My goal is to prevent the button from triggering after updating the values. However, I am facing an issue with my script as ...

placing multiple frames within a table

Is it possible to place two frames within a table without using an iframe? I need assistance in achieving this. Below is the code I am currently using: <frameset cols="100%,0" frameBorder="no" framespacing="0" border="0"> <frame name="leftDua ...

What is causing the border-bottom in these inline divs to not display when using a fractional height? (Specifically in Chrome)

Here is a jsfiddle I'd like to share with you: https://jsfiddle.net/ionescho/4d07k799/4/ The HTML code: <div class='container'> <div class="row"></div><div class="row"></div><div class="row"></div> ...

Arranging of the fetch_assoc

As a complete beginner in programming, I am excited to share that I have recently embarked on this journey and had only a few classes so far. Currently, I am working on developing a new website just for fun. It is intended for me and my colleagues at work ...

Obtaining the Date Value from an HTML5 Input Field with the type="date"

In this interface, users have the option to select a starting date (fromdate) and an ending date (todate) from the form below: <html> <form name="frmSearch" method="post" action="searchdate2.php"> <label> From date </label> ...

What are some techniques for applying CSS styling directly to a custom element?

Check out this amazing resource from HTML5 Rocks about the process of creating custom elements and styling them. To create a custom element, you can use the following code: var XFoo = document.registerElement('x-foo', { prototype: Object.crea ...

pictures arranged in a single column on compact screens

Our current code is being used to display 4 images, but it lacks responsiveness compared to this link. Specifically, the middle 2 images in the second row are stacked vertically on smaller screens. If you need the code snippet: Jsfiddle We have a similar ...