Vertical Parallax

Vertical Parallax

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Jul 6, 2017 By: Kony Team
122 0 0 35
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 vertical parallax.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

 

Features

  • Parallax scrolling effect in a vertical manner
  • Ability to animate background and foreground at different speeds
  • Facility to customize the UI elements.

Prerequisites

  • Kony Visualizer v8

The Vertical Parallax Animation component is a single-page animated UI with a background image and a foreground flex. The component helps you create a parallax animation effect in an application that improves the user experience.

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

Use Case

Consider a case that you are developing an app that provides information about monuments. You can add the Vertical Parallax Animation in the app and configure the component in such a manner that the app displays the image of a monument in the background and related information in the foreground.

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

The following sections help you use the Vertical Parallax Animation component in your app.

Prerequisites

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

  1. Kony account
  2. Kony Visualizer Enterprise V8

Importing the Vertical Parallax Animation Component

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

To import the Vertical 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.
    parallaxv_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.verticalparallax name is displayed by default. If you want, you can rename it.

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 Vertical Parallax Animation Component to your App

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

To add a Vertical 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.verticalparallax in the Components section on the Templates tab.
Note:

Ensure that the component is set to occupy 100 percent width of the device. You can achieve this by setting the width of the parent widget to 100 percent.

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.

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

  1. In the Project Explorer, on the Projects tab, click the context menu arrow of Modules, and then click New JS module. A new JavaScript file opens in the Code Editor.
  2. Copy and paste the following code snippet in the JavaScript file.
    /* creating a component's Object */
    var verticalparallax = new com.konymp.verticalparallax({
                    "clipBounds": true,
                    "height": "100%",
                    "id": "verticalparallax",
                    "isVisible": true,
                    "left": "0dp",
                    "skin": "slFbox",
                    "top": "0dp",
                    "width": "100%",
                    "zIndex": 1
                }, {}, {});
    /* Setting the component's properties */
          verticalparallax.bgImageSrc ="konymp_vp_bigben.png”;
          verticalparallax.isTitleVisible = true;
          verticalparallax.titleText = ”Big Ben”;
          verticalparallax.foregroundHeight ="100%";
          verticalparallax. subjectText= “The image provided above gives the information of Big Ben ……”;
          
    /*Adding the Vertical Parallax component to a Form*/
                this.view.add(verticalparallax); 

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

  3. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the Vertical 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

Background Image Src
Description: Specifies the file name of the image to be set as background for the flex.
Syntax: bgImageSrc
Type: String
Read/Write: Read + Write
Remarks Before setting the property, do the following:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.Component_Name.bgImageSrc = “konymp_vp_bigben.png”;
Text
Description: Specifies the description for the background image.
Syntax: subjectText
Type: String
Read/Write: Read + Write
Example:
this.view.Component_Name.subjectText= "Description for Image is given below";
Foreground Flex Height
Description: Specifies the height of the foreground flex. The height is measured along the Y-axis.
Syntax: foregroundHeight
Type: String
Read/Write: Read + Write
Remarks The default value of the property is "100%".
Example:
this.view.Component_Name.foregroundHeight = "100%";
Title Visibility
Description: Controls the visibility of the title.
Syntax: isTitleVisible
Type: Boolean
Read/Write: Read + Write
Remarks The default value of the property is set to true.
Example:
this.view.Component_Name.isTitleVisible = true;
Title Property
Description: Specifies the text to be displayed as the title.
Syntax: titleText
Type: String
Read/Write: Read + Write
Remarks The default value of the property is “Title".
Example:
this.view.Component_Name.titleText = "Big Ben";

Known Issues

  • No support for adding widgets to the foreground flexes.
  • No support for Background Flex animation when a user scrolls down the Foreground. The Android and Windows platforms have the issue.