Compatibility:

WebSite X5 Evo and Pro

If you think that static pages are boring, you will be happy to add a bit of interactivity on your own website by animating some elements on mouseover, making them tilt or bigger. Of course, you don't need to code to get this result: just use the Tilt Box Optional Object.


You can use it to animate simple colored boxes, but also recreate this effect for your images, complete with titles, descriptions and links. You can find some examples on the Preview. 


How to add textual elements

  • Double-click the Tilt Box Object you added on the page to open its settings window.
  • Stay in the Content section and start defining the textual contents.
  • Add a Title, a Description and a Description on mouseover. If you don't write anything for one or more of these entries, the corresponding field won't simply be displayed. 
  • Format each text by defining font, size and color: as you see, each text has its own options you can work with. 
  • If you want to, you can add a Link on the whole Object: click on the  button and select the action you want to perform from the specific window.


How to define the effects for the animation

  • Open the Settings window so to define the effect you want to display on mouseover. 
  • To define the effect that makes the box tilt, you need to:
    • Choose the kind of Movement: you can make the box tilt on the X Axis, on the Y Axis, or on both. 
    • Define the initial tilt factor on the Axes taken into consideration: if you set 0, the box won't initially be tilted.
    • Set the Maximum Rotation, namely how much the box should tilt on the X and/or Y Axis on mouseover. For this parameter, you can set a positive as well as a negative value: in the former case, the box will tilt "getting closer" to the mouse; in the latter, the box will tilt in the opposite direction. 
  • Apart from making it tilt on the Axes, you can also apply a zoom effect to the box to be displayed, again, on mouseover. A zoom factor above 100 will make the box bigger, one below 100 will make it smaller.
  • If you don't want to keep the box in the position it reached after the effect, you can use the Restore position option.
  • In order for the effect to take place not only on mouseover, but generally within the page, activate the Intercept mouse movement over the entire page option.


How to set up the style

  • Open the Style section to define some graphic settings.
  • Start by defining the box overall size and margins, which affect the space between the Title and the Description. 
  • You can activate a shadow effect to create more depth for the box.
  • You can also activate a glow effect, so to make it more clear that something happens when hovering the mouse on the element. 
  • Finally, you can set up the Object background, choosing among Color, Linear Gradient, Radial Gradient or Image. According to the element you choose, you will find the specific options to configure it. 


#tip - As you may imagine, if you choose a color or a gradient plus description, you create simple but effective animation. On the other hand, if you set a background image, you will be able to animate your photos.



Are you curious to use this Object on your website pages? Install Tilt Box now


You don't have enough Credits to buy this Object? Check out our Credit Packs