EFFECTOR

---

Kimera CSS is approaching its peak. We will build the last parts and prepare the work for major changes and new projects steps. These steps towards the future will necessarily drastic changes of this repo. We invite everyone to download and update the packs used to avoid finding themselves with no references on their sites and apps, ex: don't rely on cdn! They will probably be lost. Thank you all.

---

If you like this project, you would like to click on the ★ above the github page and follow us on the official fanpage: kimera framework

---

 

EFFECTOR MANUAL

Create a custom fx or active a built-in preset.

---

 

PREMISE

The effector is a small but powerful system built to generate basic actions / reactions on the layout elements and the ui. The basic concept is to instruct, through a string class similar to a js object, the framework on which css animation will have to activate, when and where.

The effectors are of 3 types:

• integrated effects
• built-in effects
• custom constructs

The integrated effects are native interactions of the framework which, however, can be deactivated via the .nofx resetter.

For exemple...

   <button class="nofx">
      // native action is now deactive
   </button>

They are simply all user interactions known in the framework, from the click to the swipe, which can be deactivated to build new ones at your convenience.

Instead, there are several built-in and custom, which are a topic in the next section of this page.

NOTE:
1) The nofx attribute is not yet fully supported
2) The system is very useful and light, however, although you can create custom effects it is inadvisable to use the effector for simple "hover" effects when, of course, just the simple css.

 

FX CUSTOM

░░ .fx-[ params ]

The custom effects are customizable constructs in many ways.
In its simplest use here is an example of a fadein css of an element activated to load the page:

    <div class="fx-[on:loadDoc; in:myanimationclass;]">
          //this content get animation on load of doc (and after loader)
    </div>

However, as mentioned, the effector can become useful for complex systems thanks to the amount of information it can assimilate:

    fx-[ 
        on: typeofaction;
        in: cssclass, animationtime, delay;
        out: cssclass, animationtime, delay;
        trigger: classname;
        target: classname;
        toggle: true/false;
        reset: true/false;
        hide: true/false;
       ]

some small explanation:

in: and out: are the two classes from which the css animations start. This means that starting the first you can connect all the parts connected to each other (also because, at the start of an animation, the object becomes .active, at the end .off).

animationtime and delay are respectively "how long must wait to go to the out, and how much to disable the whole" or "how much I have to wait in general before activating (delay)" and, in the simplest use there is often no need for use them.

toggle makes the element reclickable;
reset stops and deletes the animation class at the end of its execution;
hide starts the element as invisible;

target and trigger must be combined with the appropriate attributes:

    <a class="fx-[on:click; toggle:true; in:fadeIn; out:fadeOut; target:MYNAME;]">
     FOO
    </a>

    <div class="[target-MYNAME]">
     BAR
    </div>

    or...

    <div class="fx-[action:click; in:fadeIn; target:NAME1; trigger:NAME2;]"></div>

    <a class="[trigger-NAME1]">
      FOO
    </a>

    <div class="[target-NAME2]">
      BAR
    </div>

If the target or trigger are not declared, the system will refer to the element fx itself.

on: is the type of event that triggers the effect and accepts different states of the document, including:

• on:loadDoc;
• on:resizeDoc; [under costruction]
• on:changeView; [under construction]
• on:click;
• on:pointermove; [under costruction]
• on:devicemove; [under costruction]
• on:hover;
• on:scroll;

 

FX BUILT-IN

░░ .fx-parallax-[ params ]

The parallax effect is now a standard of many graphical interfaces.

In the framework, in fact, it is a pre-constructed effect.

Here's how you activate and use:

    <div class="fx-xParallax-[15-1.5-mask]"> // remember to give it a height (exemple="height:250px;")
      <div>
         Content...
      </div>
      <div>
         Content...
      </div>
      <div>
         Content...
      </div>

      ...

    </div>
    or:

    <div class="fx-yParallax-[15-1.5-mask]"> // vertical parallax
        ...
    </div>

Understanding its parameters is very simple (we recommend leaving them like this)

fx-parallax-[SCROLLSENSIBILITY-ZOOM-OVERFLOWTYPE]

The beauty of this pre-built effect is that it is relative to where you apply it. There is no need to use it as a carrier of a layout ... just apply it to any div within a viewport.

Just pay attention to this: that it doesn't know if it will be at the top or bottom of the page. For now It's centered relative of the page (it is waiting for updates in progress)

Note: inside parallax you do not necessarily need the autocrop to create background images

 

░░ .fx-lookat-[ params ]

   fx under costruction

 

░░ .fx-slopeat-[ params ]

   fx under costruction

---

 

Step by step from start

Install the files and set up the document. The topic: [from start to...]

Back: All Ui

List and use of all buttons of the framework. The topic: [Ui Assets]

Next: The theme

How make a theme for the framework. The topic: [Theme]