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'); }