Skip to content

Instantly share code, notes, and snippets.

@JRyven
Created Dec 29, 2021
Embed
What would you like to do?
Animation Box for WordPress - Creates tiles with never-duplicating, stacking image animations using OOP PHP and CSS only
<?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 );
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment