Animation Box for WordPress - Creates tiles with never-duplicating, stacking image animations using OOP PHP and CSS only

functions.php

<?php

class Animation_Box {

  public $assets;
  public $used_assets;

  public function __construct( $frank_assets ){
    $this->assets = $frank_assets;
    $this->Animation_Box_shortcodes();
    $this->styles();
  }

  public function value_select( $array ){
    $selected = array_rand( $array );
    $value = $array[$selected];
    return array( $selected, $value );
  }

  public function Animation_Box_shortcodes(){
    add_shortcode('animate', array( $this, 'animation_callback'));
  }

  public function animation_callback(){

    $a = shortcode_atts( array(
      'text'    => '',
      'subtext' => '',
    ), $atts );

    if( isset( $this->used_assets )):
      foreach( $this->used_assets as $remove_assets ):
        foreach( $remove_assets as $key => $val ):
          unset($this->assets->$key[$val]);
        endforeach;
      endforeach;
    endif;

    $bg = $this->value_select( $this->assets->bgs );
    $this->used_assets[] = array( 'bgs' => $bg[0] );

    $frank = $this->value_select( $this->assets->franks );
    $this->used_assets[] = array( 'franks' => $frank[0] );

    $gear = $this->value_select( $this->assets->gears );
    $this->used_assets[] = array( 'gears' => $gear[0] );

    // shorthands
    $path = '/wp-content/themes/frank/images/square-frank/';
    $ext = '.png';

    ob_start(); ?>

    <div class="animate-container">
      <div class="animate-inner">
        <div class="animate-back" style="background-image: url(<?php echo $path.'bgs/bg-'.$bg['1'].$ext; ?>);"></div>
        <div class="animate-frank" style="background-image: url(<?php echo $path.'franks/frank-'.$frank['1'].$ext; ?>);"></div>
        <div class="animate-gear" style="background-image: url(<?php echo $path.'gears/gear-'.$gear['1'].$ext; ?>);"></div>
        <div class="animate-text"><span><?php echo $a['text']; ?></span> <span><?php echo $a['subtext']; ?></span></div>
      </div>
    </div>

    <?php return ob_get_clean(); ?>
    <?php
  }

  private function styles() {
    ob_start();
    ?>
    @keyframes fiftyrise {
      0% {top: 50%;}
      100% {top: 0;}
    }
    @keyframes hundredrise {
      0% {top: 100%;}
      100% {top: 0;}
    }

    .animate-container,
    .animate-inner {
      display: block;
      position: relative;
    }
    .animate-container {
      margin: auto;
      height: calc( 100vw / 2 );
    }
    .animate-inner{
      overflow: hidden;
      height: 100%;
    }

    .animate-back,
    .animate-frank,
    .animate-gear {
      position: absolute;
      height: 100%;
      margin-top: 0;
      margin-bottom: 0;
      margin-right: auto;
      margin-left: auto;
      top: 0;
      left: 0;
      right: 0;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    .animate-frank {
      top: 50%;
      animation-name: fiftyrise;
      animation-fill-mode: forwards;
      animation-duration: 2s;
      animation-delay: 1.5s;
    }

    .animate-gear {
      top: 100%;
      animation-name: hundredrise;
      animation-fill-mode: forwards;
      animation-duration: 3s;
      animation-delay: 3.5s;
    }

    .animate-text {
      width: 85vh;
      margin-top: 2rem;
      margin-bottom: 0;
      margin-right: auto;
      margin-left: auto;
      text-align: center;
    }

    .animate-text span {
      font-family: var(--font-headings);
      color: var(--charcoal);
      text-shadow: 2px 2px 2px #fff;
    }
    .animate-text span:first-child{
      display: block;
      line-height: 0.8em;
      font-size: 6rem;
    }
    .animate-text span:last-child{
      display: block;
      line-height: 0.8em;
      font-size: 2rem;
    }

    @media only screen and (min-width: 482px) {
      .animate-container{
        margin: 0 auto 4rem;
        height: calc( 100vw / 4 );
      }
    }

    <?php if(is_front_page()): ?>
    @media only screen and (min-width: 482px) {
        .site-header { padding: 0rem; position: relative; }
        .site-branding { display:none; }
        .primary-navigation { display:none; }
        .site-main { padding-top: 0px; }
    }
    @media only screen and (min-width: 822px) {
        .site-header { padding: 0rem; position: relative; }
        .site-branding { display:none; }
        .primary-navigation { display:none; }
        .site-main { padding-top: 0px; }
    }
    <?php endif; ?>

    <?php
    $Animation_Box__Styles = ob_get_clean();
    if ( ! wp_style_is( 'bpm-module-styles', 'enqueued' ) ) {
      wp_register_style( 'bpm-module-styles', FALSE );
      wp_enqueue_style( 'bpm-module-styles' );
    }
    wp_add_inline_style( 'bpm-module-styles', $Animation_Box__Styles );
  }

}

class Animation_Box_Asset_Gather extends Animation_Box {

  public $bgs;
  public $franks;
  public $gears;

  public function make_array_of_names( $array ){
    $name_and_extention = explode('.', $array);
    $name = explode('-', $name_and_extention[0]);
    return $name[1];
  }

  public function __construct(){

    // get fule for the functions
    $getbgs = scandir( dirname( __FILE__ ).'/images/square-frank/bgs');
    unset($getbgs[0]);
    unset($getbgs[1]);
    $this->bgs = array_map( array( $this, 'make_array_of_names'), $getbgs );

    $franks = scandir( dirname( __FILE__ ).'/images/square-frank/franks');
    unset($franks[0]);
    unset($franks[1]);
    $this->franks = array_map( array( $this, 'make_array_of_names'), $franks );

    $gears = scandir( dirname( __FILE__ ).'/images/square-frank/gears');
    unset($gears[0]);
    unset($gears[1]);
    $this->gears = array_map( array( $this, 'make_array_of_names'), $gears );

    unset($this->assets);
    unset($this->used_assets);

  }
}

add_action('wp_head', 'activate__Animation_Box');
function activate__Animation_Box(){

  $frank_assets = new Animation_Box_Asset_Gather();
  new Animation_Box( $frank_assets );

}

?>