Slideshow Effects

NodeFire includes a unique element type that helps simplify the slideshow design process. Slideshow animations and interactive behavior options are limitless and completely up to the developer. This help document outlines how to work with slideshow templates or drag create your own from scratch.

Basic Template

The following illustrates how to quickly customize the basic slideshow template to fit your design requirements. This template features individual frames that animate on a delay timer from right to left.  | tip: templates are accessible from the 'templates' link in the upper right corner of the interface. |

In this template each frame consists of a single background image that fills the frame. Frames are standard stage elements which can be further customized with interactive content, animations, nested elements, etc...

Specify Frame Images: To specify the background image for a frame first select the frame with the mouse. Next, edit the 'URL' style prperty in the 'Background' section within the left tree.  | tip: images can also be manually applied with HTML image tags as element content (right click the frame and choose 'edit' --> 'content') |

Tip: With the online version of the software specify an absolute path to your hosted image (e.g. Encoded base64 strings are also supported.

Slideshow Viewport: The viewport is the default overflow container for the slideshow frames. When the viewport is selected special editing buttons are made available on the bottom-right design bar. Select the viewport using the right reference tree.

Tip: Because the frames and frames slider fill 100% of the viewport window in this template its easiest to select the viewport in the reference tree. However the viewport can be selected from the stage by rapidly clicking 3 times on a frame, each rapid click bubbles the selection up the parent hierarchy if done quickly.

Frames Slider: The frames slider elment is a container for the individual slideshow frames. The slider may be animated left, right, up, down, or in a custom way of your choosing. This template moves the slider container from left to right with a brief delay between movements.

Frame Items: By default frame items fit the width and height of the slider container and viewport. Selecting a frame reveals specific editing options on the bottom right design bar.

Tip: Select multiple frame elements by holding down the CTRL key while clicking stage frames or reference tree frames.

Slide Animation: A custom 'preloadall' timeline attached to the root stage element defines the animation effect and delay. Click the stage elements 'preloadall' timeline in the reference tree to edit the timeline.

Ease Options: Easing is applied to tween frames (frames between two keys) and changes the animation rate. To change the ease setting for the slide animation first click the ease toggle button, then click the tween.

CSS Rules: Various predefined CSS rules are available in the 'Global CSS Rule' options apply to menu. Use the rules to quickly apply similar styles to all your slideshow frames. Custom rules targeting frames or frame child elements can be specified in the custom rules dialog.

Tip: When a CSS rule is active and a stage element is selected the apply box will automatically switch to inline styles. To edit the last CSS rules styles click the 'Global CSS Rule' text in the apply box, or select the desired CSS rule at the top of the right reference tree.

Publish To HTML: Publish your stage by choosing "Publish [Get Code]" from the main control menu. The code required to run a stage is in two simple blocks. Paste the stage JavaScript to the head and the stage content to the body of your document. Multipe stages can be published to a single page, the NodeFire JavaScript code does not need to be duplicated.

Tip: At the bottom of the "Get Code" dialog are options which allow the stage to run in all browsers or just the modern browsers. You can also enable SEO content.

Drag Creating New Slideshows

New slideshows can be drag created directly onto the stage. By default the size of the slide container and individual frames is set to fit the width and height of the root slideshow overflow container.

The bottom right design bar contains slideshow editing buttons specific to the type of element selected. There are different button options for the root slideshow overflow container, slide container, and individual frames.

Slideshow animations and interactivity is up to the developer. To get ideas on different ways to animate your slideshow view the templates.

NodeFire Animator
Create interactive HTML5 animation effects and widgets (banners, slideshows, drop down menus, text effects, 3D animations, layouts, and more).
Latest release - v5.2
8/8/2017 - Includes new device, preview, and file interfaces! (more...)
Other Products
Web Effects
Easy to edit effects
for your website.
Follow us:
Copyright (c) 2016 - NodeFire Inc., All Right Reserved.