Make Your Website an Experience in Wix Studio with these Next-level Effects

Take your users on a stimulating journey by adding animation, custom CSS, movement and sound effects, to your website.

The Beginning —

So you want to design a website – but not just any old site. Yes, you want your website to have a clean interface, responsive design, strong calls to action, consistent branding, and the lot. Not to mention SEO optimization, and usability and accessibility standards. 

But because you are YOU (probably a creative individual who likes to push the status quo to break website boundaries), you want to make your website not just a website, but an experience. 

You want your users to be transported through their screens into a realm where text moves around and changes color, where 3D objects spin with the hover of your mouse, and where you are sucked into a parallax of scrolling. 

Luckily, when designing in Wix Studio, you have the flexibility, power, and creative control to design a fire website that meets your vision. 

Through the elements of animation, CSS effects, multimedia like transparent videos, custom cursors and more, you can create a site that is certain to grab your audience’s attention, and leave them coming back for more. 

Without further ado, let’s learn how to wow your audience. 

Transparent Videos + Hover Effects

Make your site more interactive and 3-dimensional by adding a transparent video with hover effects. 

With the introduction of Wix Studio, Wix has added “transparent videos” to their media folder, available to all premium plan users. These videos feature dynamic objects and elements such as smoke blowing out, an inflatable “SALE” balloon sign, and even a mushroom that moves. Adding transparent videos to your site is a fantastic way to bring some dreamy coolness that makes your users feel as if they are in a video game. 

While the transparent video is cool as-is, to add an interactive quality, we are going to add mouse effects. This will allow your Transparent Video to move when the user hovers their mouse on the video. For example, you could make the SALE sign spin or the mushroom shake by hovering on the video. 

Here’s How:

Add a Transparent Video: 

1. In the menu bar on the left-hand side, click on the “+” sign.
    
2. Click on “Media” and in the dropdown menu select “Transparent Videos.”
    
3. You’ll see a few options here, but choose “More Transparent Videos” to view the full list of videos, or you can “Upload” your own.
    
4. Choose a transparent video and add it to a Section on your site. My current favorites are the “Veiled Mushroom,” and the “Shiny Banana.”

Add Mouse Effects: 

1. Once you have added your Transparent Video, you are going to click on it, then click on “Animations and Effects” in the right-hand tool bar.
   
   
2. Choose “Mouse Effects” and click on “Add.”
    
3. Here, you can view a variety of animations and effects. You can test them out until you find the animation that works well for your website. When animating my mushroom, I chose the “Airy” effect.
   
   
4. You can then choose “Adjust Animation” to adjust the animation. You can choose to have the video follow or invert away from the mouse, adjust the angle, distance, and the velocity, select the movement axis, and the easing. Make sure “Move Mouse to Preview” is turned on, and hover your mouse over your Transparent Video to test how your animation looks.
   
   
5. Play around with your animation until you like what you see, and voila! You have an interactive transparent video. 

EXAMPLE: 

GOOD FOR:

• Making your site more interactive and fun
• Making illustrations stand out in a portfolio 
• Anywhere you want to add a little “wow”

Text Mask 

Make your statement stand out by using Text Mask to have the fill of your words change with color, video, and imagery.

So you have written a strong Call to Action statement, but have you designed it in a way that will catch your users’ eyes? Text Mask can help you with that. 

Here’s How:

Create Text Mask: 

1. In the menu bar on the left-hand side, click on the “+” sign.
   
   
2. Click on “Text” and in the dropdown menu select “Text Mask.”
   
   
3. You’ll see many styles of Text Masks here, but if you don’t see the style of font or mask that you want, don’t worry, you can edit the font and mask afterward. Choose the style that is closest to your envisioned effect and add it to your section.
   
   
4. By clicking on the text and choosing “Change Text,” you can write your CTA statement. When typing, be sure to “Enter” where you want the text to go to the next line.
   

5. To change the style of the font, you can click on “Text” in the right-hand menu and change the font.
   
   
6. Next, to edit the fill of the Text Mask. You may decide between adding an image or video to the background of your text, or choosing a gradient. In the “Design” panel of the right-hand menu, choose “Media” to choose an image or video for the background of the video, or “Gradient” to apply a color-changing gradient to your text.
    
7. To adjust the size of your text, just drag the corners of your text box, and voila!

EXAMPLE:

GOOD FOR: 

• Visually designing the CTA, mission, vision, or about statement
• Showcasing the title of your brand in the hero section
• Any sentence of text that you want to make pop

Custom Cursor 

Bored of the same mouse that has been used on nearly every site since the dawn of the computer? I bet your users are too. 

Adding a custom cursor to your site allows your users to have a personalized and memorable experience that makes them excited about visiting your website. Most users have not actually had the pleasure of scrolling with anything other than the typical mouse, so adding a custom cursor can create a powerful impact on your website, without requiring much effort. 

Another way custom cursors are beneficial to the user’s experience is in highlighting a brand or business. 

For example, if you are designing a website for a makeup company, what is stopping you from changing the cursor to a makeup brush? Are you an illustrator or graphic designer? Why not use one of your illustrations as the cursor? There are so many ways you can make your website more interesting solely through changing the mouse on the screen.

Create a Custom Cursor: 

1. First, decide whether you want to change the cursor for specific section, or the entire page. If you want it changed for the entire page, in the menu bar on the right-hand side, select “Page” at the top. Or, select a section on your page.
2. Scroll down to the bottom of the menu on the right-hand side and select “Cursor.” 
3. There, you can choose a vector that Wix has provided, or upload your own image to use as the cursor.
4. Use the “Size” bar to edit how big you want your cursor to be, and your done!

EXAMPLE: Check out this Indoor Golf website that we designed for EdgeGolf!

GOOD FOR: 

• Showing off a business’ branding 
• Highlighting an e-commerce store’s product (especially if it is cute) 
• Making an illustrator’s drawing interactive as the cursor 
• Jazzing up the UX of a website