EPISODE:
8

  

FRAME TOOLS PRO GUIDE: EFFECTS

 
One of the most recent additions to MOBLE is the introduction of effects into the Visual Page Editor. Historically, applying effects and animations has been isolated to the realm of the Frontend Developer and it is perhaps true to say, for the most part, that's where it will stay. So what has MOBLE been up to, by bringing effects into the Editor, can people really design effects on a web page without code?

As CSS, JS and internet speeds continue to advance, the web will continue to become more interactive and websites will no doubt become more and more animated. Love it or hate it, we have just been through a trend of parallax design; where designers could play with layers of images or animations, to move them over top of each other at different speeds, to create beautiful motion effects.

We have also seen the frequency of 'reveal' on scroll where elements of the web page would fade into the viewport as the user scrolled down the page.

There has also been a trend of 'breaking the grid'. For years websites were laid out in evenly aligned grids which we easy to code and uniform to the eye. Though, arguably, perhaps more important content could not be made prominent and might easily get lost in the crowd. Breaking the grid has seen content be laid out in beautiful ways, almost like a scrap book style, which has given rise to shift effects. A shift effect is where an element or block could be shifted from its true default position to sit on top of another element. This is often characterised by text that appears to sit half way over an image and hangs off the other side. The shift effect has been galvanised. A new trend in website design, though critically, it has also been important in giving more emphasis to specific content, improving conversion rates as website visitors typically will only have one action to consider in every viewport, increasing the chance of them taking the desired action.

Given such frequent use of these effects, MOBLE decided to have a play and see if there was a simple way we could introduce these into the Editor. We have recently released these tools and in this article, we will cover each effect by sampling some of the features of the Dynamic Layout of the Month for September 2017.

Shift Effect

Shift Effect as seen in a recent MOBLE website design. The Form has been shifted outside of its parent Frame (the image). This gives great emphasis to the Form. A slight upwards parallax was also placed on the form, so it moves upwards as you as you scroll to grab focus and demand attention.

Given such frequent use of these effects, MOBLE decided to have a play and see if there could be a simple way these effects could be managed in the Editor, without code. We have recently released these tools to MOBLE, and in this Episode, we will sample each effect. To see the effects in action also visit https://inspire.moble.com and check out the Dynamic Layout of the Month for September 2017.


Parallax

You can see in the sample below that Parallax scrolling the movements of the background element (e.g. an image) and the foreground element over the top of each other at different speeds.

Any Frame on MOBLE can be moved either up and down at 7 different speeds and you can edit the speeds easily with a slider bar. The advantage of controlling the Frame is that you can put any element inside a frame, be it an image, text, or even a code block, delivering significant time saving for Frontend developers and an easy to use user interface for beginners. 

MOBLE is currently considering adding left, right and diagonal movements to the parallax tools and we would love to hear your feedback.

 


Reveal on Scroll

You can set any Frame to reveal when you first scroll down towards it.

As standard, you have three types of action to play with on MOBLE and all three can be used in conjunction with each other for slightly different experiences.

SLOW
Perhaps the move popular slow with smoothly fade in as you scroll.

DELAYED
Delay will add a 2 seconds delay before the Frame appears. This can be used nicely with either Slow or Down.

DOWN
Down will give the effect of the Frame being dropped on the page as you scroll. This is less popular but can work well in certain instances.

The effect below shows the 'Slow' Reveal effect. To reset the preview of the effect refresh your page and scroll down again.

REVEAL

Each block of content has Reveal set to 'Slow' and 'Delayed' allowing it to gently reveal on scroll.


Shift

By definition, 'the shift effect uses CSS transformation to alter the positioning of the element on the page outside its default position within their parent frame or block'.

Put simply, on MOBLE you can shift any frame Up, Down, Left or Right, by a distance of either 25%, 50% or 75% of the Parent Frame (i.e. the one outside of it).

In the example below the Right Image is set to a 25% Left shift.

Shift Left 25

Filter

FInally, while we were at it, we thought we'd introduce some of the common CSS filters that are often applied to images. Though, on MOBLE you can apply filters to the entire contents of a Frame an not just an image.

We will introduce more filters in time. At the time of writing the MOBLE filters are:

FILTER
Applies the current Frame and all child Frames inside it.

BACKDROP FILTER
Applies only to the current Frame and not the child Frames inside it.


For both Filter and Backdrop filter there are the following effects:

BLACK AND WHITE
Makes the content inside a Frame black and white, or more accurately, greyscale.

BLUR
Blurs the content inside a Frame.

SATURATE
Saturates the content inside a Frame

BLACK & WHITE 
BLUR 
SATURATE 
MOBLE-Effects

Image showing the MOBLE Effects User Interface, located within every Frame. The open Frame is identified with a red dot. Here you can see Parallax applied to the Frame in an upward direction at a speed of 3.