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.
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.
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.
Reveal of Scroll set to 'Slow' and 'Delayed in the outside Frame.
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.
Here we see Reveal being used for an animated infographic on the Home Page of DirtyFeet
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.
Shift effect can be used to create appealing looks for striking headings and featured content.
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.
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/
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.
Whatever the size of your website, all MOBLE Plans come complete all the features!
MOBLE plans are based on the number of website pages, whatever the size of your website, you can be sure it will be packed with all the features from Dynamic Layouts, to Payment Forms, Integrations, Contact Manager and of course, Web School!
Do it yourself or Hire a Pro! We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.