- By Navot Porat
- Date August 2, 2018
- Est Read time 5 min
Not all of us can be completely tech savvy. Some people get a thrill out of numbers, others enjoy anything involving wires and batteries, and then there’s those of us who would rather leave all that complicated stuff to someone else. But when it comes to web design, that’s really not a problem. In fact, as a designer at Wix, I spend a lot of my time on the Wix Editor and I’ve discovered that you can create highly professional effects in surprisingly simple ways. From auto-changing slideshows, to various scroll effects and more, these tricks will bring your website to life. It’s really just a matter of playing around with and combining different design features, and doing some good old trial and improvement. To help spark your imagination and get you in exploration mode, I’ve gathered seven impressive effects that you can achieve on the Wix Editor – check them out below and on the Wix Tricks website. Whether you have an online store, a design portfolio or any other kind of site, you can apply these techniques to your own design, aligning them to your personal style and visual language.
Check out the Wix Tricks website here.
1. Reveal scroll effect on image
Not every part of your website should move in exactly the same way. Here’s a technique you can use to shake things up a bit. Show a static image on one side of the screen and text that moves as you scroll on the other side.
Editor combination: Two Columns + Reveal Scroll Effect
– In the Wix Editor, go to ‘Add’ on the left-hand side and add a strip.
– Click ‘Layouts’ and split the strip into two columns – one on the left and one on the right (there’s an automatic option to make the screen split evenly).
– Add two more columns below in the same dimensions.
– Click ‘Change Strip Background’ to change each column’s background to the image or text you want.
– In the ‘Settings’ of one of the columns, choose the scroll effect ‘Reveal’ to make that side static. Do the same for the column below. This will result in the scrolling effect you can see below – the image appears to stay static, while the text moves when you scroll.
Notice how the image on the left remains static while the text appears to move as you scroll.
2. Two-speed scrolling
Want to keep your visitors on their toes? Play around with exposing your images bit by bit, and placing them one on top of another in various compositions. Create a layered scroll effect by combining reveal and parallax.
Editor combination: Two Strips + Reveal + Parallax
– Add two strips, layered on top of each other in any composition you want.
– Change the strip backgrounds to your images.
– For one strip, choose the ‘Reveal’ scroll effect in the ‘Settings’, and for the other choose ‘Parallax’. This will result in the images appearing to move at different speeds when scrolling.
Elements appear to move at different speeds in the website template above. Learn more about how to create these effects in this tutorial.
3. Moving slideshow with static image
Showcase your visuals in a dynamic way. Combine an autoplay moving slideshow with a static image layered above, to show off your best shots. Play around with different filters on the same image for an engaging effect.
Editor combination: Slideshow + Column
– Add a slideshow, by going to ‘Add’ then ‘Interactive’.
– Click on ‘Change Slide Background’ and in the ‘Settings’, scale the image as ‘Tile’.
– Go to ‘Manage Slides’ to duplicate your slide. In the ‘Settings’, select ‘Autoplays on loading’, ‘Horizontal’ and ‘From right’.
– Lastly, add a strip, then click on ‘Layouts’ to split it into two columns with the ratio 20-80. In the smaller column (20% of the page width), change the image background to an image of your choice.
Combine different images for powerful effects.
4. Three-speed scrolling
Want to captivate your site visitors with an almost addictive scrolling experience? This technique makes elements appear to move at three different speeds, combining zoom in, parallax and static images.
Editor combination: Zoom in + Parallax + Static Object
– Add three strips, layered one on top of the other.
– Change the strip background for each one.
– In the ‘Settings’ under ‘Scroll Effects’, define one as ‘Zoom in’ and one as ‘Parallax’, leaving the third strip with no effect. They will appear to have different speeds as you scroll down the page.
This website uses the zoom in effect, letting you put the focus where you want.
5. Auto-changing slideshow
Your visuals deserve impressive animation effects to show them off. Create two slideshows side-by-side, syncing the content so that they work together harmoniously. These animated slideshows play on a loop, with a few changing elements.
Editor combination: Two Columns + Slideshow + Animation
– Add a strip and separate it into two columns – one on the left-hand side and one on the right.
– Attach a slideshow to each one, by going to ‘Add’, then ‘Interactive’ and choosing a slideshow.
– Scroll through the slides, editing each one as you wish.
– Add an animation on each element of the slideshow and customize it to define the timings.
The content in the two slideshows correlates, helping complete the visual story.
6. Slideshow loop animation
Why not animate your shapes, icons and type, too? With this trick, each letter has its own text box with unique animation and timing. This same concept can be applied to shapes.
Editor combination: Text/Shape + Animation
– Add a text box and write one character in each text box.
– Add an animation to each text box and customize the timings so that the whole word or number work together well.
– The same can be applied to shapes, breaking down icons into separate components and animating them.
– Note: if you want to animate a whole word or sentence, try the ‘Reveal’ animation effect, like in the big text in the image below:
Each piece of text is animated separately, coming together to create a whole look that works together in perfect timing.
7. Animated hover box
Surprise your site visitors by adding some interactive cursor action. Add a hover effect to your text or shapes.
Editor combination: Hoverbox + Animation
– Add a hover box by going to ‘Add’ and then ‘Interactive’.
– Each hover box has two stages (‘Regular’ and ‘Hover’). On the ‘Hover’, play around with the design, by adding animations or changing colors and shadings.
This website template features a hover box with a shadow hover effect. Discover how to create more of this website’s effects in this tutorial.