Wix Design Tutorials: Creating a Strip-Based Site with Scrolls Effects and Animation

hi I’m Chloe from the Wix design studio in this tutorial I’ll show you how a design expert uses the Wix editor to create an entire strip based website with multiple design effects you can use this technique for any kind of website but it’s especially great for a designer studio production agency or product showcase I’ll add the scroll effects parallax reveal and zoom in to each strip then I’ll show you how to add a video strip and autoplay
video box in a full width slideshow with a static element layered above finally I’ll add some smooth animation effects to text and other graphic elements so let’s get started first I’ll open the Wix editor and start with a blank page I always start with saving and naming my site so it’ll autosave in the future to add the first strip I’ll go to add strip and drag it into place I’ll adjust the size to 1080 and change the strip image I’ll use an
image I created in Photoshop and click change background now I’ll duplicate the yellow background strip and position the y-axis to 1080 then I’ll change the strip background to purple next I’ll duplicate the yellow strip and place it in the exact same position I’ll change the background to a 3d image exported on a transparent background next I’ll duplicate the image strip and position the y-axis to 1080 so it’s exactly aligned with the strip
above I’ll change strip background to an image and choose a different 3d image that has the same relative position lastly I’ll go to settings to add a reveal scroll effects to each strip in preview mode you can see the reveal scroll effect creates a smooth transition between the script backgrounds and the images next I’ll create a full width video strip with a parallax scrolling back I’ll add a video strip and adjust the height to 1080 I’ll
change strip background and click video to add my own under settings I can add the scroll effect parallax now I’m going to create an autoplay video box start by adding a color string change the height to 850 and change strip background to purple on top of this I’ll go to interactive to add a box slideshow as my video container I’ll go ahead and delete the other two slides change the slide background to a video and delete the pre-made content
under layout I’ll turn off show navigation arrows and show slide buttons lastly I’ll set the height to 405 and the wide position to 3447 next I’ll create a full width slideshow with a static 3d image layer the button to start I’ll go to interactive and add a full width slideshow by delete all the pre-made content and delete slide two and three I’ll change the background color to yellow and duplicate this slide but change the background color to
purple next I’ll add a classic strip above the slide show and reduce the opacity to zero and drag it right on top of the slide shower I’ll add an image with a transparent background and attach it to the strip then change the height to 450 in preview mode you can see that the slideshow auto plays in the background while the image remains static on top but I want to make this cage even more dynamic so I’ll add a video strip and change its height to
1080 I’ll change the strip background to a video and add a zoom in scroll effect so now we’re done creating an entire website using strips now let’s add a bit of text and animation to bring the site to life before our add text I’ll right-click the top image strip and click send to back so I can attach my text to the background strata I’ll go to add text and choose large heading and customize it to suit my needs under tools I can add rulers to
help adjust the position of my text now that the text is where I want it I can send this script to the back so my image will overlap the text and back strip I’ll go through and add more text to my site and customize it this part is pretty intuitive and I recommend going through and trying it yourself on your own website you can even upload your own fonts it’s pretty fun I also want to add two text buttons that will be fixed to their position so
after creating the button design I’ll right-click and select pin to screen and set the positions to Center laughter I can refine their positions by using the horizontal and vertical offset slider in preview mode you can see the button react on hover now I’ll use text and shapes to create my own logo and attach a social icon bar to my header I’ll click set social links to choose which icons I want to delete and click replace icon to choose which
ones I want to add then under layouts we’ll adjust the icon size and spacing I’ll go ahead and add text to the other strips on my site for the slideshow I’ll attach text to the slides so they move together then I’ll finish adding text and shapes to the rest of my site and customizer in preview mode you can see how all the strips play together to finish up I’ll show you how to animate text I’ll click on the text select animate and choose the
animation I want I’ll choose slide in and customize it to appear from top I’ll go through and do the same process for all the text you can customize the animation style duration and delay that you’ll use for your website try out a few different options and see how they play well together lastly I’ll also add another social bar replace the icons to match the ones I used on the top of the page and set their size and position so that’s it let’s
check out the final results here’s my strip based website with parallax scrolling video and animation design effects looking good even if I do say so myself thanks for watching I hope you had fun and we’ll see you in the next one