{"id":1432,"date":"2021-01-15T07:24:08","date_gmt":"2021-01-15T07:24:08","guid":{"rendered":"http:\/\/docs.cmsmasters.net\/?p=1432"},"modified":"2021-02-06T10:58:45","modified_gmt":"2021-02-06T10:58:45","slug":"effects","status":"publish","type":"post","link":"https:\/\/docs.cmsmasters.net\/effects\/","title":{"rendered":"Effects"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Effects<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Effects can be found at the Advanced tab of a widget\u2019s settings.<\/p>

Use them to add transitions and animations to your design.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Choose the Effect Type<\/strong> from the dropdown. The choice is between Transform, Scrolling, Mouse Track and Floating<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Transform Effect Type<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

You can apply Translate, Rotate, Scale and Skew effects<\/strong> both for Normal and Hover modes.<\/p>

Translate effect<\/strong> allows to move the element up and down and from left to right using Translate X and Translate Y scales.<\/p>

Rotate effect<\/strong> allows to rotate the element, i.e. to move the element around a fixed point without deforming it. The movement is determined by the given angle. A positive angle means clockwise rotation, and a negative angle means counterclockwise.<\/p>

You can simply add a desired rotation angle or use Advanced settings and set Rotate Z, Rotate X and Rotate Y scales\u2019 values.<\/p>

Scale effect<\/strong> lets you grow and shrink elements. You can either add a Simple effect value or use Advanced settings and set Scale X and Scale Y values.<\/p>

Skew effect<\/strong> defines a transformation that skews an element on the 2D plane. It is a shear mapping that distorts each point within an element by a certain angle in the horizontal and vertical directions. The effect is as if you grabbed each corner of the element and pulled them along a certain angle.<\/p>

The coordinates of each point are modified by a value proportionate to the specified angle and the distance to the origin. Thus, the farther from the origin a point is, the greater the value added to it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Scrolling Effect Type<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Scrolling type<\/strong> allows you to choose the desired Effect. The choice is between Translate X, Translate Y, Rotate, Scale, Opacity, Blur, Grayscale, Sepia, Saturate, Brightness, Contrast and Hue Rotate.<\/p>

You can use several effects simultaneously and set them in accordance to your needs.<\/p>

Effects Viewport:<\/strong> A dual-slider control lets you define viewport starting and ending points for scrolling effects.\u00a0<\/p>

Effects relative to:<\/strong> Choose whether the effect should be relative to a Viewport or an Entire page.<\/p>

Apply effects on:<\/strong> Select to apply the effects on Desktop, Tablet, and\/or Mobile devices.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Mouse Track Effect<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Set an element to move in relation to the visitor\u2019s mouse movement.<\/p>

Max Tilt Angle:<\/strong> Set the maximum tilt angle here.<\/p>

Axis:<\/strong> Choose the axis the element should be transformed. You can set it to be transformed on both axis or on X axis or Y axis only.<\/p>

Event Area:<\/strong> Choose the event area between Element and Window.<\/p>

Shift Multiplier:<\/strong>\u00a0 Set the shift.<\/p>

Scale:<\/strong> Grow or shrink the element in a desired way.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Floating Effect<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Translate effect<\/strong> is used to create a bouncing animation. Allows to move the element up and down and from left to right using Translate X and Translate Y scales.<\/p>

Rotate effect<\/strong> allows to rotate the element, i.e. to move the element around a fixed point without deforming it. The movement is determined by the given angle. A positive angle means clockwise rotation, and a negative angle means counterclockwise.<\/p>

You can simply add a desired rotation angle or use Advanced settings and set Rotate Z, Rotate X and Rotate Y scales\u2019 values.<\/p>

Scale effect<\/strong> lets you grow and shrink elements. You can either add a Simple effect value or use Advanced settings and set Scale X and Scale Y values.<\/p>

For every effect you can also set a desired Delay time and Floating duration, i.e. set the amount of time to float from one setting to the other.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Clip-Path<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Slide to ON to enable the Clip-path.<\/strong><\/p>

The clip-path allows you to specify a specific region of an element to display, with the rest being hidden (or \u201cclipped\u201d) away.<\/p>

You can make complex shapes by clipping an element to a basic shape (circle, ellipse, inset or polygon).<\/p>

Circle<\/strong><\/span><\/p>

Set desired Radius (for desktop, tablet and mobile) and Position (center or custom) for Normal and Hover modes.<\/p>

For Hover mode Animation Duration can also be set, i.e.the amount of time animation should continue.<\/p>

Ellipse<\/strong><\/span><\/p>

Set Horizontal Radius and Vertical Radius (for desktop, tablet and mobile) and Position (center or custom) for Normal and Hover modes.<\/p>

For Hover mode Animation Duration can be set also.<\/p>

Inset<\/strong><\/span><\/p>

Set Edges gap and Border Radius for desktop, tablet and mobile both for Normal and Hover modes.<\/p>

Polygon<\/strong><\/span><\/p>

Type:<\/strong> Choose between Predefined and Custom types for Normal and Hover modes.<\/p>

Using the Custom type you can create your custom clip-path polygon. To do this, please go to clip-path maker website and insert only values from the generated field. https:\/\/bennettfeely.com\/clippy\/<\/a><\/p>

Shapes:<\/strong> Choose desired shape from a dropdown.<\/p>

For Hover mode you can set a desired Animation Duration.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Effects can be found at the Advanced tab of a widget\u2019s settings. Use them to add transitions and animations to your design. Choose the Effect Type from the dropdown. The choice is between Transform, Scrolling, Mouse Track and Floating. Transform Effect Type You can apply Translate, Rotate, Scale and Skew effects both for Normal and…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[134],"tags":[100,97],"class_list":["post-1432","post","type-post","status-publish","format-standard","hentry","category-modules","tag-advanced","tag-effects"],"_links":{"self":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/posts\/1432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/comments?post=1432"}],"version-history":[{"count":0,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/posts\/1432\/revisions"}],"wp:attachment":[{"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/media?parent=1432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/categories?post=1432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.cmsmasters.net\/wp-json\/wp\/v2\/tags?post=1432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}