public static function lazy_load_effect($atts = null, $content)
{
global $is_IE;
if (wp_is_mobile() || $is_IE && preg_match('/MSIE [56789]/', $_SERVER['HTTP_USER_AGENT'])) {
return do_shortcode($content);
}
$atts = shortcode_atts(array('start_position' => false, 'rotation' => false, 'flip_x' => false, 'flip_y' => false, 'pivot' => false, 'scale' => 1, 'opacity' => 1, 'easing' => 'linear', 'speed' => 1, 'delay' => 0, 'custom_class' => ''), $atts, 'lazy_load_effect');
extract($atts);
$style = Cherry_Shortcodes_Tools::add_css_prefix('animation-duration: ' . $speed . 's');
$style .= $delay != 0 ? Cherry_Shortcodes_Tools::add_css_prefix('animation-delay: ' . $delay . 's') : '';
//test css property
//$style .= Cherry_Shortcodes_Tools::add_css_prefix('backface-visibility: hidden;');
switch ($easing) {
case 'ease-in-cubic':
$easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
break;
case 'ease-out-cubic':
$easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
break;
case 'ease-in-out-cubic':
$easing = 'cubic-bezier(0.645, 0.045, 0.355, 1)';
break;
case 'ease-in-quart':
$easing = 'cubic-bezier(0.895, 0.03, 0.685, 0.22)';
break;
case 'ease-out-quart':
$easing = 'cubic-bezier(0.165, 0.84, 0.44, 1)';
break;
case 'ease-in-out-quart':
$easing = 'cubic-bezier(0.77, 0, 0.175, 1)';
break;
case 'ease-in-expo':
$easing = 'cubic-bezier(0.95, 0.05, 0.795, 0.035)';
break;
case 'ease-out-expo':
$easing = 'cubic-bezier(0.19, 1, 0.22, 1)';
break;
case 'ease-in-out-expo':
$easing = 'cubic-bezier(1, 0, 0, 1)';
break;
case 'ease-in-back':
$easing = 'cubic-bezier(0.6, -0.28, 0.735, 0.045)';
break;
case 'ease-out-back':
$easing = 'cubic-bezier(0.175, 0.885, 0.32, 1.275)';
break;
case 'ease-in-out-back':
$easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';
break;
default:
$easing = 'linear';
break;
}
$style .= Cherry_Shortcodes_Tools::add_css_prefix('animation-timing-function: ' . $easing);
if ($start_position || $rotation || $flip_x || $flip_y || $pivot || $scale != 1) {
$transform = '';
switch ($start_position) {
case 'top':
$transform .= 'translateY(-500px) ';
break;
case 'bottom':
$transform .= 'translateY(500px) ';
break;
case 'left':
$transform .= 'translateX(-2000px) ';
break;
case 'right':
$transform .= 'translateX(2000px) ';
break;
default:
$transform .= '';
break;
}
//transform rotation
$transform .= $rotation ? 'rotate(' . $rotation . 'deg) ' : '';
//transform flip_x
$transform .= $flip_x ? 'rotateX(' . $flip_x . 'deg) ' : '';
//transform flip_y
$transform .= $flip_y ? 'rotateY(' . $flip_y . 'deg) ' : '';
//transform scale
$transform .= $scale != 1 ? 'scale(' . $scale . ') ' : '';
//transform origin
$pivot = $pivot ? str_replace('_', ' ', $pivot) : 'center';
$style .= Cherry_Shortcodes_Tools::add_css_prefix('transform-origin: ' . $pivot);
$style .= Cherry_Shortcodes_Tools::add_css_prefix('transform:' . $transform);
}
$style .= $opacity != 1 ? 'opacity:' . $opacity . '; ' : '';
$output = '<div class="lazy-load-effect"><div class="lazy-load-effect-child' . $custom_class . '" style="' . $style . '">' . do_shortcode($content) . '</div></div>';
cherry_query_asset('js', 'cherry-lazy-load-effect');
return apply_filters('cherry_shortcodes_output', $output, $atts, 'lazy_load_effect');
}
