MooFxGenerator – MooFx for PHP Developers
MooFX is a small javascript library for creating amazing effects on webpages. This library is extremely small in size and developed over prototype, the most popular javascript framework developed by sam stephenson. MooFxGenerator is a helper class for PHP5 developers to auto generate javascript code which will create these amazing effects using MooFX.
Effects
There are six type of effects available in MooFxGenerator. There are as follows
1. fxHeight
2. fxWidth
3. fxOpacity
4. fxText
5. fxCombo
6. fxScroll
7. fxAccordion
fxHeight
-------------------------------------------------------------------------------------------------------------------
fxHeight is a small class which creates the fx.Height object and changes the size of any <div> element in webpages. Lets see fxHeight in action
constructor : new fxHeight(object_to_click_over, object_to_effect, duration)
<div id=”stretcher”>
<h3>Hello</h3>
</div>
<div id=”stretched”>
some content
</div>
Use:
<?
Include(“mooFxGenerator.class.php”);
mooFxGenerator::initiate(); //include the scripts
$fh = new fxHeight(“stretcher”,”stretched”, 500);
$fh->generate();
?>
so what will this code output to browser? Lets take a look below
Output:
<script src="scripts/prototype.lite.js"></script>
<script src="scripts/moo.fx.js"></script>
<script src="scripts/moo.fx.pack.js"></script>
<script>
function mt_1146137815()
{
m_1146359250.toggle();
}
m_1146359250 = new fx.Height("stretched", {duration: 500})
m_stretcher = $("stretcher");
m_stretcher.onclick=mt_1146137815;
</script>
fxWidth
-------------------------------------------------------------------------------------------------------------------
alike fxHeight, this object changes width of any <div> element in web pages. Lets see fxWidth in action
constructor : new fxWidth(object_to_click_over, object_to_effect, duration)
Use:
<?
Include(“mooFxGenerator.class.php”);
mooFxGenerator::initiate(); //include the scripts
$fw = new fxWidth(“stretcher”,”stretched”, 500);
$fw->generate();
?>
Output:
<script>
function mt_1146078858()
{
m_1145568435.toggle();
}
m_1145568435 = new fx.Width("stretched", {duration: 500})
m_stretcher = $("stretcher");
m_stretcher.onclick=mt_1146078858;
</script>
fxOpacity
-------------------------------------------------------------------------------------------------------------------
this object changes the transparency level of any element in webpages.
constructor : new fxOpacity(object_to_click_over, object_to_effect, duration)
Use:
<?
Include(“mooFxGenerator.class.php”);
mooFxGenerator::initiate(); //include the scripts
$fo = new fxOpacity(“stretcher”,”stretched”, 500);
$fo->generate();
?>
Output:
<script>
function mt_1146413960()
{
m_1145990541.toggle();
}
m_1145990541 = new fx.Opacity("stretched", {duration: 500})
m_stretcher = $("stretcher");
m_stretcher.onclick=mt_1146413960;
</script>
fxCombo
-------------------------------------------------------------------------------------------------------------------
fxCombo is an object which helps you to apply combined effect (height+width+opacity) over any element in web pages.
Constructor:
new fxCombo(object_to_click_over, object_to_effect, duration, opacity, height, width)
you can specify opacity = true/false, height = true/false and width = true/false. All these parameters are optional.
Use:
<?
Include(“mooFxGenerator.class.php”);
mooFxGenerator::initiate(); //include the scripts
$fc = new fxCombo("stretcher","stretched",500, true,true,true);
$fc->generate();
?>
Output:
<script>
function mt_1146311878()
{
m_1146216836.toggle();
}
m_1146216836 = new fx.Combo("stretched", {duration: 500, height: true, width: true, opacity: true})
m_stretcher = $("stretcher");
m_stretcher.onclick=mt_1146311878;
</script>
fxScroll
-------------------------------------------------------------------------------------------------------------------
this object helps to animate scrolling when someone clicks over any link which redirects to any bookmark inside that page.
Constructor : new fxScroll(object_to_click_over, object_to_effect, duration, transition)
There are several transition available in MooFx. They are as follows
transition::FX_CIRCULAR ;
transition::FX_CUBIC ;
transition::FX_LINEAR ;
transition::FX_SINEIN ;
transition::FX_SINEINOUT ;
transition::FX_SINEOUT ;
transition::FX_SINOIDAL ;
default transition is transition::FX_SINEOUT.
Use:
<?
Include(“mooFxGenerator.class.php”);
mooFxGenerator::initiate(); //include the scripts
$fs = new fxScroll("stretcher","stretched",500,transition::FX_CUBIC )
$fs->generate();
?>
Output
<script>
function mt_1145787051()
{
m_1145678247.scrollTo("stretched");
}
m_1145678247 = new fx.Scroll({duration: 500, transition: fx.cubic})
m_stretcher = $("stretcher");
m_stretcher.onclick=mt_1145787051;
</script>
fxText
-------------------------------------------------------------------------------------------------------------------
this object helps to increase the fontsize of any element inside webpage.
Conctructor : new fxText(object_to_click_over, object_to_effect, unit_to_increase_size)
Use:
<?
Include(“mooFxGenerator.class.php”);
mooFxGenerator::initiate(); //include the scripts
$ft = new fxText("stretcher","stretched",2)
$ft->generate();
?>
Output:
<script>
function mt_1145896650()
{
m_1146122619.increase();
}
m_1146122619 = new fx.Text("stretched", {unit:2})
m_stretcher = $("stretcher");
m_stretcher.onclick=mt_1145896650;
</script>
fxAccordion
-------------------------------------------------------------------------------------------------------------------
fxAccordion creates the combined accordion effect (available in MooFxPack).
Constructor : new fxAccordion("objects_class_name", "objects_class_name",duration, opacity, heitgh, width, transition);
Sample HTML:
<div class=”stretchers”>
<h3>Hello</h3>
</div>
<div class=”stretched”>
some content
</div>
<div class=”stretchers”>
<h3>Hello</h3>
</div>
<div class=”stretched”>
some content
</div>
Use:
<?
Include(“mooFxGenerator.class.php”);
mooFxGenerator::initiate(); //include the scripts
$fa = new fxAccordion("stretchers","stretched",600, true, true, false, transition::FX_SINEIN);
$fa->generate();
?>
Output:
<script>
m_stretchers = document.getElementsByClassName("stretchers");
m_stretched = document.getElementsByClassName("stretched");
m_1145700380 = new fx.Accordion(m_stretchers, m_stretched ,{duration: 600, height: true, opacity: true, transition: fx.sineIn});
</script>
|
Download
