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 with CSS, JS, AR and VR. 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 the 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, benefitting page load speeds and the overall visual effect.

There has also been a trend of 'breaking the grid'. For years websites were laid out in evenly aligned grids which were 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 scrapbook 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 halfway 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.

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.

FILTER

Finally, you can also play with some of the common CSS filters that are often applied to images. Though keep in mind, on MOBLE you can apply filters to the entire contents of a Frame and not just an image.

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

FILTER
Applies the Filter to current Frame and all Frames inside it.

BACKDROP FILTER
Applies only to the current Frame and not the 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