YAWK\WIDGETS\CONTENTANIMATOR\ANIMATE\contentAnimator Class Reference

Add a pre-defined effect to any of your content elements. More...

Public Member Functions
	__construct ($db)
	Load all widget settings from database and fill object. More...
	init ()
	Initialize: prepare proerties and load javascript. More...
	printObject ()
	Print all object data. More...

Public Attributes
	$contentAnimatorClass = 'slideUp'
	$contentAnimatorScrollValue = '620'
	$widget = ''

Detailed Description

Add a pre-defined effect to any of your content elements.

Add modern fx and motion to any elements of your website.

The content animator widget lets you animate any kind of content. Simply add class="animate" to any html object in your DOM and the effect will be applied to the affected element. You can setup, which effect you wish to be drawn, as well as the scroll distance to the object. Be careful to use a not too big value, otherwise your users will think, that there is no more content before it got faded in. (or whichever effect you have activated)

Author

Daniel Retzl danie.nosp@m.lret.nosp@m.zl@gm.nosp@m.ail..nosp@m.com

Copyright

2018 Daniel Retzl

Version

1.0.0

Definition at line 18 of file contentAnimator.php.

Constructor & Destructor Documentation

__construct()

YAWK\WIDGETS\CONTENTANIMATOR\ANIMATE\contentAnimator::__construct

(

$db

)

Load all widget settings from database and fill object.

Parameters

object

$db

Database Object

Load all widget settings on object init.

Definition at line 36 of file contentAnimator.php.

        {
            // load this widget settings from db
            $this->widget = new \YAWK\widget();
            $settings = $this->widget->getWidgetSettingsArray($db);
            foreach ($settings as $property => $value) {
                $this->$property = $value;
            }

References $db, $settings, $value, and YAWK\widget\getWidgetSettingsArray().

Member Function Documentation

init()

YAWK\WIDGETS\CONTENTANIMATOR\ANIMATE\contentAnimator::init

(

)

Initialize: prepare proerties and load javascript.

use this method to run the clock

Definition at line 61 of file contentAnimator.php.

        {
            // check if class is empty
            if (!isset($this->contentAnimatorClass) || (empty($this->contentAnimatorClass)))
            {   // default behavior:
                $this->contentAnimatorClass = "fadeIn";
            }
            // check if scroll value is empty
            if (!isset($this->contentAnimatorScrollValue) || (empty($this->contentAnimatorScrollValue)))
            {   // default value
                $this->contentAnimatorScrollValue = 600;
            }
            // check if infinite is set
            if (!isset($this->contentAnimatorInfinite) || (empty($this->contentAnimatorInfinite)))
            {   // default css value
                $this->contentAnimatorInfinite = "";
            }
            else
            {   // infinite is set to true
                if ($this->contentAnimatorInfinite === "true")
                {   // set the correct value
                    $this->contentAnimatorInfinite = "infinite";
                }
                else
                {   // don't loop animation: leave infinite empty
                    $this->contentAnimatorInfinite = "";
                }
            }
            // load velocity.js
            // echo "<script src=\"system/engines/velocityJS/velocity.min.js\"></script>";
            // echo "<script src=\"system/engines/velocityJS/velocity-ui.min.js\"></script>";
 
            // load css with animation definitions
            echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"system/widgets/contentAnimator/animate.css\">";
            // echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"system/engines/animateCSS/animate.min.css\">";
            // echo "<style type=\"text/css\">.animate {visibility:hidden;}</style>";
 
            // output JS
            echo"<script>
            $(document).ready(function(){
            // Slide in elements on scroll
            $(window).scroll(function() {
                // on each element that go animate class
                $('.animate').each(function()
                {
                    // get position
                    var pos = $(this).offset().top;
                    // get window top position
                    var winTop = $(window).scrollTop();
                    
                    // user-defined params for every element
                    // if they are not filled, default widget settings will be used
                    var fx = $(this).attr(\"data-fx\");     // animation fx for this element
                    var px = $(this).attr(\"data-px\");     // px value from top for this element
 
                    // check if custom px value is defined
                    if (px !== undefined) {
                        // set custom px value
                        contentAnimatorScrollValue = px;
                    }
                    else {
                        // set default px value from widget settings
                        contentAnimatorScrollValue = $this->contentAnimatorScrollValue;
                    }
               
                    // animate when position is in visible area
                    if (pos < winTop + contentAnimatorScrollValue) {
                        // $(this).velocity(\"transition.fadeIn\", {duration:1000, loop:false});
                    
                    // element got custom FX values
                    if (fx !== undefined) {
                        // set animated custom fx
                        $(this).addClass('animated '+fx);
                        // remove animate class to avoid hide after animation
                        $(this).removeClass('animate');
                    }
                    else
                        {   // add default fx from widget settings
                            $(this).addClass(\"$this->contentAnimatorClass\");
                        }
                    }
                });
            });
          });
</script>";

printObject()

YAWK\WIDGETS\CONTENTANIMATOR\ANIMATE\contentAnimator::printObject

(

)

Print all object data.

(for development and testing purpose)

Definition at line 50 of file contentAnimator.php.

        {
            echo "<pre>";
            print_r($this);
            echo "</pre>";

Member Data Documentation

$contentAnimatorClass

YAWK\WIDGETS\CONTENTANIMATOR\ANIMATE\contentAnimator::$contentAnimatorClass = 'slideUp'

Parameters

string

Which effect should be drawn on class="animated" At the time of writing this, following effects were available: slideUp, slideDown, slideLeft, slideRight, fade, fadeMedium, fadeSlow

Definition at line 29 of file contentAnimator.php.

$contentAnimatorScrollValue

YAWK\WIDGETS\CONTENTANIMATOR\ANIMATE\contentAnimator::$contentAnimatorScrollValue = '620'

Parameters

string

Scroll distance to target which should be effected

Definition at line 24 of file contentAnimator.php.

$widget

YAWK\WIDGETS\CONTENTANIMATOR\ANIMATE\contentAnimator::$widget = ''

Parameters

object

global widget object data

Definition at line 21 of file contentAnimator.php.

---

The documentation for this class was generated from the following file:

• /var/www/htdocs/yawk.io/system/widgets/contentAnimator/classes/contentAnimator.php