In your WordPress Admin area, look down the left-hand column for “Scroll Magic > Settings”
Options:
A Scene is an object include animation, you can apply scene to all elements via CSS class name
In your WordPress Admin area, look down the left-hand column for “Scroll Magic > Add Scene”
And with this Scene Builder (Live preview) you can see any thing you change just now.
General Settings:
Before Scrolling:
For relatively positioned elements, the top property sets the top edge of an element to a unit above/below its normal position.
Note: If "position:static", the top property has no effect.
Note: If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note: A "positioned" element is one whose position is anything except static.
For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position.
Note: If "position:static", the left property has no effect.
If position: absolute; or position: fixed; - the bottom property specifies the distance between the element's bottom edge and the bottom edge of its containing block.
If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
If position: sticky; - the bottom property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
If position: static; - the bottom property has no effect.
For relatively positioned elements, the right property sets the right edge of an element to a unit to the left/right to its normal position.
Note: If "position:static", the right property has no effect.
The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.
Note: The overflow property only works for block elements with a specified height.
After Scrolling:
In your WordPress Admin area, look down the left-hand column for “Scroll Magic > All Scenes” and see comlumn CSS Class
In Page or Post editor you can use ScrollMagic shortcode
[scrollmagic scenes="your-scene"] your content [scrollmagic]
or
[scrollmagic scenes="your-scene-1, your-scene-2"] your content [scrollmagic]
You can upload images and get ids of images
In Page or Post editor you can use Image Sequence shortcode
[scrollmagic_sequence scenes="your-scene" align="center" images="01,02,03"][scrollmagic_sequence]
or
[scrollmagic_sequence scenes="your-scene-1, your-scene-2" align="center" images="01,02,03"][scrollmagic_sequence]
This plugin uses the jQuery built-in animation engine to transition the stroke on every <path>
inside the selected <svg>
element, using stroke-dasharray and stroke-dashoffset properties.
The first, you need to install SVG Support plugin to upload svg file.
Then you can upload SVG file and get id of SVG.
In Page or Post editor you can use SVG shortcode
By the way, you can use this tool to create SVG file: http://vectorpaint.yaks.co.nz/
[scrollmagic_image scenes="your-scene" images="01"][scrollmagic_image]
or
[scrollmagic_image scenes="your-scene-1, your-scene-2" images="01"][scrollmagic_image]