Horizontal Parallax

Horizontal Parallax

Asset Version: 2.0.0
  • Version 2.0.0
  • Version 1.0.0
Last Published: May 10, 2018 By: Kony Team
336 1 0 64
Parallax scrolling uses multiple objects at different speeds to give the impression of a 3d effect where nearby objects have a larger parallax than more distant objects when observed from different positions. If you're looking for a popular scrolling effect used by native mobile apps and amazing websites, download the horizontal parallax.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms


Features

  • Added target container support
  • Parallax scrolling effect in a horizontal manner
  • Ability to animate background and foreground at different speeds
  • Facility to customize the UI elements.

Prerequisites

  • Kony Visualizer v8

Horizontal Parallax Animation component is a 3-page animated UI with customized images for background. It provides an option to the user to create UI of own choice for foreground. It also enables the user to customize the component by using properties. The component helps you create a parallax animation effect in an application that enhances the user experience.

Here is a use case that describes the use of the Horizontal Parallax Animation component.

Component Functionality

The following screen shot describes on how the component looks.


parallaxhv2_comp.png

parallaxhv2_comp1.png

flxBackgroundOne, flxForegroundOne, flxBackgroundTwo, flxForegroundTwo, flxBackgroundThree, and flxForegroundThree are the target containers where user can drag any widget / components. For more details on Target Container click here.

Use Case

Consider a case that you are developing an app that provides information about heritage sites. You can use the Horizontal Parallax Animation component in the app and configure the component in such a manner that the app displays the images of a heritage site in the background and related information in the foreground.

The Horizontal Parallax Animation component is a ready-to-use component. You can import the Horizontal Parallax Animation component into your app (created in Kony Visualizer) and achieve the features of parallax animation in horizontal manner. The Horizontal Parallax Animation component also facilitates a set of properties that helps you customize the background images and the foreground as you require.

The following sections help you use the Horizontal Parallax Animation component in your app:

Prerequisites

Before you start using the Horizontal Parallax Animation component, ensure you have the following:

  1. Kony account
  2. Kony Visualizer Enterprise V8

Importing the Horizontal Parallax Animation Component

Before you start importing the Horizontal Parallax component to Kony Visualizer, you must download the component from the Kony Marketplace website.

To import the Horizontal Parallax Animation component, do the following:

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. The Open dialog appears.
  3. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    parallaxh_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name.
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.horizontalparallax name is displayed by default.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. Thus, after you import a component, you must add the component to your app.

Adding a Horizontal Parallax Animation Component into your App

You can add a Horizontal Parallax Animation component to the FlexForms, FlexContainer, and FlexScrollContainer widgets.

To add a Horizontal Parallax Animation component:

  1. Open your app, and then open the form to which you want to add the component.
  2. On the My Libraries tab, select the defined Marketplace library from the drop-down list in which the component exists.
    library.png
  3. From the Collections sub-tab, drag the component onto the form on the Visualizer canvas. The component is added to the form. You can also see a new element, com.konymp.horizontalparallax in the Components section on the Templates tab.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer Button Widget.

You can also see that a new tab, Component, is added on the Properties pane. The Component tab contains assorted properties relevant to the component that allow you to customize the component as required. The properties on the Component tab are categorized as General and Placeholder properties. The General properties are the default properties of individual widgets in the component.

You can also add a Horizontal Parallax Animation Component dynamically. To do so,

  1. In the Project Explorer, on the Projects tab, click Controllers section to access the respective formController. Create a method and implement the code snippet similar to the sample code mentioned below.
/* creating a component's Object */
var horizontalparallax = new com.konymp.horizontalparallax({
			"clipBounds": true,
			"height": "100%",
			"id": "horizontalparallax",
			"isVisible": true,
			"layoutType": kony.flex.FREE_FORM,
			"left": "0dp",
			"masterType": constants.MASTER_TYPE_USERWIDGET,
			"skin": "slFbox",
			"top": "0dp",
			"width": "100%"
			}, {}, {});

/* Setting the component's properties */
		horizontalparallax.parallaxSpeed = 5;
		horizontalparallax.isPagingEnabled = true;
		horizontalparallax.isPagingIndicatorEnabled = true;            
		horizontalparallax.activeImage = “konymp_hp_dot_selected.png”;
		horizontalparallax.inactiveImage = “konymp_hp_dot_disable.png”;
		horizontalparallax.isBgOneVisible = true;
		horizontalparallax.isFgOneVisible = true;   
		horizontalparallax.isBgTwoVisible = true;
		horizontalparallax.isFgTwoVisible = true;      
		horizontalparallax.isBgThreeVisible = true;
		horizontalparallax.isFgThreeVisible = true;   

/*Adding the Horizontal Parallax component to a Form*/
       this.view.add(horizontalparallax); 

In the code snippet, you can edit the properties of the component as per your requirement. For more information, see Properties.

Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the Horizontal Parallax Animation component. You can set the properties directly on the Component tab or by writing a JavaScript. This section provides information about how to set the properties by writing a JavaScript.

General

Parallax Speed
Description: Specifies the parallax speed from 1 to 9.
Syntax: parallaxSpeed
Type: Integer
Read/Write: Read + Write
Remarks: This property takes values from 1-9. If value for this property is set to more than 9 or less than 1, it will pick default value, which is 5.
Example:
this.view.componentID.parallaxSpeed = 7;
Paging
Description: Specifies whether the paging is enabled for the scroll container. If this property is set to true, the scroll view stops on multiples of the scroll view’s bounds when the user scrolls.
Syntax: isPagingEnabled
Type: Boolean
Read/Write: Read + Write
Remarks: If the property is set to true, the scroll view stops on multiples of the scroll view's bounds when the user scrolls.
Example:
this.view.componentID.isPagingEnabled = true;
Paging Indicator
Description: Specifies visibility for paging indicator.
Syntax: isPagingIndicatorEnabled
Type: Boolean
Read/Write: Read + Write
Remarks: If the property is set to true, the scroll view stops on multiples of the scroll view's bounds when the user scrolls.
Example:
this.view.componentID.isPagingIndicatorEnabled = true;
Active Page Icon
Description: Specifies image for enable / active paging indicator.
Syntax: activeImage
Type: String
Read/Write: Read + Write
Remarks: The default value is "konymp_hp_dot_selected.png".
Example:
this.view.componentID.activeImage = "konymp_hp_dot_selected.png";
Inactive Page Icon
Description: Specifies image for disable / Inactive paging indicator.
Syntax: inactiveImage
Type: String
Read/Write: Read + Write
Remarks: The default value is "konymp_hp_dot_disable.png".
Example:
this.view.componentID.inactiveImage = "konymp_hp_dot_disable.png";

Placeholder Properties

Background One
Description: Specifies the visibility of Background Image Screen One.
Syntax: isBgOneVisible
Type: Boolean
Read/Write: Read + Write
Remarks: The default value of the property is true.
Example:
this.view.componentID.isBgOneVisible = true;
Foreground One
Description: Specifies the visibility of Foreground Flex Screen One.
Syntax: isFgOneVisible
Type: Boolean
Read/Write: Read + Write
Remarks: The default value of the property is true.
Example:
this.view.componentID.isFgOneVisible = true;
Background Two
Description: Specifies the visibility of Background Image Screen Two.
Syntax: isBgTwoVisible
Type: Boolean
Read/Write: Read + Write
Remarks: The default value of the property is true.
Example:
this.view.componentID.isBgTwoVisible = true;
Foreground Two
Description: Specifies the visibility of Foreground Flex Screen Two.
Syntax: isFgTwoVisible
Type: Boolean
Read/Write: Read + Write
Remarks: The default value of the property is true.
Example:
this.view.componentID.isFgTwoVisible = true;
Background Three
Description: Specifies the visibility of Background Image Screen Three.
Syntax: isBgThreeVisible
Type: Boolean
Read/Write: Read + Write
Remarks: The default value of the property is true.
Example:
this.view.componentID.isBgThreeVisible = true;
Foreground Three
Description: Specifies the visibility of Foreground Flex Screen Three.
Syntax: isFgThreeVisible
Type: Boolean
Read/Write: Read + Write
Remarks: The default value of the property is true.
Example:
this.view.componentID.isFgThreeVisible = true;

Limitations

Landscape mode is not supported in this version.

Known Issues

Following are the known issues in the Horizontal Parallax component:

  • No support for adding extra pages.