FRAME TOOLS PRO GUIDE: EFFECTS


S03 | E07 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  3 min read |  4 min video

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW


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.

https://www.dirtyfeet.com.au/dirtyfeeters 
Demonstrating a combination of Parallax, Shift and Reveal on Scroll. Learn how to achieve this in this Episode.


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.

DirtyFeet Parallax
MOBLE CMS Parallax
MOBLE CMS Parallax Effect

Parallax Effect set on the outside frame to 'Up' and speed '3', allowing this frame to move upwards as the user scrolls down the page.


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 most popular, slow will fade in smoothly as you scroll.

DELAYED
Delay will add a 2 second 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 onto 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.

MOBLE DirtyFeet Reveal

REVEAL

The top blocks of content have Reveal set to 'Slow', The right blocks are set to 'Slow and 'Delayed' allowing both to gently reveal on scroll.

MOBLE DirtyFeet Reveal
DirtyFeet Parallax
MOBLE CMS Parallax
MOBLE CMS DirtyFeet Reveal on Scroll

Reveal of Scroll set to 'Slow' and 'Delayed in the outside Frame.

PRO TIP

Notice in the screenshot above, the inside frame is shifted to the left making it sit over the image to its left.

  • The outside frame is using 'Reveal'
  • The inside frame is using 'Shift'


In CSS you cannot apply two effects to the same frame. However, on MOBLE you can get around the rules of CSS by making many frames work together. 

You could, for example, apply 'Parallax' to the Parent frame and then 'Shift' to the child frame. You can keep on adding as many Frames as you like with the '' and '' icons on each Frame.

This is how coders work with CSS to create effects. You can keep on applying many frames like layers. Expert coders might use many frames to layer gradients, or even turn frames into shapes like circles and triangles.

In Design Mode your MOBLE website gives a visual representation of code, meaning everything is possible. While MOBLE is a CMS for business, with the flip of a switch to Design Mode, it is an advanced website builder for design.

Watch our Co-Founder Danny Liang give a Masterclass on CSS for beginners at one of our live events. In Series 9 we'll break down CSS in easy to follow step-by-step tutorials that you will be able to follow to use your MOBLE website in ways you never dreamed possible.

Materclass.css

Here we see Reveal being used for an animated infographic on the Home Page of DirtyFeet


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 inner frame of the block is set to 'Up' and 25%, moving the Frame upwards to sit on top of the image.

MOBLE CMS DirtyFeet Shift Effect

Shift effect can be used to create appealing looks for striking headings and featured content.

MOBLE CMS DirtyFeet Shift Effect

Here we see how the effect is applied in the Frames Drawer. The inner Frame is set to 'Up' and '25%', with a yellow background colour for a high contrast effect.

MOBLE Shift to make a prominent Form

Stepping aside from DirtyFeet, here is 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. http://www.slabtec.com.au/


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

Colour

No Effect

Black And White

Black and White

Blur

Blur

Saturate

Saturate

MOBLE CMS Black and White Filter

Black and White Filter applied to the the Frame