Finnegan Forever Mechanical Theatre

[zhammer]

Mechanical Theater Mockup

I'd like to implement something like this with moving waves and clouds for finneganforever.com.

Implementation

Positioning could be done easily with something like:

.theater {
  display: grid;
  grid-template-rows: 25% 1fr 25%;
  grid-template-areas: "clouds"
                       "passage" /* (or more likely, "child"/"content") */
                       "waves";
}

This is a nice codepen of a back and forth css animation, which I could do to a few of the wave layers and the clouds: https://codepen.io/frankDraws/pen/rxaPzQ. (Though this is getting a bit out of my comfort zone.)

It would be great to wrap this all into a component like:

<MechanicalTheatre>
    <Passage />
</MechanicalTheatre>

And I want to make sure the component is responsive so it works on mobile.

Inspired by VA Museum Opera Exhibit

https://youtu.be/CbhLBP78CTA?t=2m24s

[zhammer]

Having an issue keeping waves.png bound to the bottom of the waves grid cell.

If I do something like position: absolute; bottom 0px, the wave and cloud images no longer stay contained in their grid cells.

Current implementation

import React, { Component } from 'react';
import clouds from './assets/clouds.png';
import waves from './assets/waves.png';
import './MechanicalTheatre.css';

class MechanicalTheatre extends Component {
    render() {
        return (
            <div className="stage">
              <div className="clouds">
                <img className="picture" src={clouds} alt=""/>
              </div>
              <div className="content">
                {this.props.children}
              </div>
              <div className="waves">
                <img className="picture" src={waves} alt=""/>
              </div>
            </div>
        );
    }
}

export default MechanicalTheatre;

.stage {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 25% 1fr 25%;
    grid-template-columns: 1fr;
    grid-template-areas: "clouds"
                         "content"
                         "waves";
}

.clouds {
    grid-area: clouds;
    max-height: 100%;
}

.content {
    grid-area: content;
}

.waves {
    /* display: flex;
    align-items: bottom; */

    grid-area: waves;
    max-height: 100%;
}

.picture {
    width: 100%;
    max-height: 100%;
}

[zhammer]

May not be the cleanest solution but making .waves a grid itself seems to work.

.waves {
    grid-area: waves;
    display: grid;
    align-content: end;
    max-height: 100%;
}

[zhammer]

Done