- 91
- 304 806
Studio Il
Registrace 13. 01. 2015
This channel was created to help people learn more about Wix Studio, share ideas and get the latest product updates.
If there is a particular topic you would like me to cover, send me a message and I will try to create it for you.
This channel is operated by Technical Designer at Wix.com, but was created independently and is not endorsed or sponsored by Wix.
If there is a particular topic you would like me to cover, send me a message and I will try to create it for you.
This channel is operated by Technical Designer at Wix.com, but was created independently and is not endorsed or sponsored by Wix.
Drag-to-Scroll: Enhance Your Website's Scroll Experience
Hey everyone! 🌟
Ready to make your website's scroll super smooth and fun? In this tutorial, we're diving into the magical world of drag-to-scroll. Perfect for any website with overflow content, this effect will make navigating your pages a breeze!
We'll be using ScrollBooster, an awesome JavaScript library that takes your scrolling game to the next level. I'll walk you through setting up the drag-to-scroll feature step-by-step. Plus, I'll show you how to tweak it with cool options like friction, bounce force, and direction. Trust me, your users are going to love it!
By the end of this video, your site will have a polished, professional feel that stands out from the crowd.
So grab a cup of coffee, hit that play button, and let's get scrolling! Don't forget to like, subscribe, and ring the notification bell for more awesome web development tips and tricks. Let's make your website scroll like never before!
Links & Resources:
Code:
www.studio-il.com/video-tutorials/drag-to-scroll%3A-enhance-your-website's-scroll-experience?tab=code
Live example:
www.studio-il.com/scrollbooster
ScrollBooster:
github.com/ilyashubin/scrollbooster
#wixstudio #scroll #ux #uxdesign #ui #uidesign
Ready to make your website's scroll super smooth and fun? In this tutorial, we're diving into the magical world of drag-to-scroll. Perfect for any website with overflow content, this effect will make navigating your pages a breeze!
We'll be using ScrollBooster, an awesome JavaScript library that takes your scrolling game to the next level. I'll walk you through setting up the drag-to-scroll feature step-by-step. Plus, I'll show you how to tweak it with cool options like friction, bounce force, and direction. Trust me, your users are going to love it!
By the end of this video, your site will have a polished, professional feel that stands out from the crowd.
So grab a cup of coffee, hit that play button, and let's get scrolling! Don't forget to like, subscribe, and ring the notification bell for more awesome web development tips and tricks. Let's make your website scroll like never before!
Links & Resources:
Code:
www.studio-il.com/video-tutorials/drag-to-scroll%3A-enhance-your-website's-scroll-experience?tab=code
Live example:
www.studio-il.com/scrollbooster
ScrollBooster:
github.com/ilyashubin/scrollbooster
#wixstudio #scroll #ux #uxdesign #ui #uidesign
zhlédnutí: 524
Video
Fake It Till You Make It: Creating a Fake 3D Gallery
zhlédnutí 666Před 19 hodinami
Want to add a touch of 3D magic to your website? In this fun and easy tutorial, we'll create a stunning Fake 3D Gallery using Wix Studio. No special skills required-just a bit of creativity. Perfect for giving your site a sophisticated look with no code required! Live examples: mystudioil.wixstudio.io/fake-3d-gallery/pro-gallery mystudioil.wixstudio.io/fake-3d-gallery/diagonal Keep building ama...
Creating Stunning Border Animations
zhlédnutí 614Před dnem
Inspired by @jh3y ! In this video, I'll walk you through the steps to create eye-catching border animations that can enhance the visual appeal of your web projects. Whether you're a beginner or an experienced web designer, this tutorial will help you add a dynamic touch to your designs. Live example: mystudioil.wixstudio.io/animate-border #wixstudio #animation #border
App Review: Image Distortion Hover Effect (by Visual-Identity)
zhlédnutí 360Před 14 dny
In the next tutorial we will review the ThreeJS Distorter application by @visualidentitydesign that allows you to create an image distortion effect based on the user's mouse position without a single line of code. Link to the application: www.wix.com/app-market/threejs-distorter?searchLocation=home Visual-Identity CZcams channel: www.youtube.com/@visualidentitydesign Visual-Identity website: ww...
Easy Way to Create a Cut-Out Effect That Tracks Your Mouse
zhlédnutí 295Před měsícem
IMPORTANT 2 important things to note: 1. You don't need to add another container just for the shadow effect. Instead, add the shadow effect in the same line of code. Code for example: box-shadow: 0px 0px 0px 100vw black, /* outer shadow */ inset 0 0 100px black ; /* inner shadow creating the hole effect */ 2. The shadow is very large, so it is important to add to the section Overflow content = ...
Creating Unique Repeater Layouts Using Flexbox
zhlédnutí 400Před měsícem
In the next tutorial we'll use one line of CSS to create a unique layout for a Repeater connected to a database - you won't believe how easy it is! CSS: .my-repeater-wrapper .repeater .repeater item { flex-grow: 1; } #wixstudio #flexbox #css
How to Create Section Scroll Snap Effect Using Flexbox - No Code
zhlédnutí 857Před měsícem
#wixstudio #scroll #flexbox
Binding Data and Search: Part 3: Bind Data and Add Search Functionality to Your Midjourney Feed
zhlédnutí 132Před 2 měsíci
Get your free template - I'd love it if you could leave your feedback: www.wix.com/marketplace/template/54a37109-42cf-4955-8b3d-0b29fd8baf0c?entry=gallery_page Live example: iloveditorx.wixstudio.io/myjourney-feed Get the code: www.iloveeditorx.com/videos/binding-data-and-search:-part-3:-bind-data-and-add-search-functionality-to-your-midjourney-feed?tab=code Part 1: czcams.com/video/7RlJsXpicFw...
Creating Mosaic Layout: Part 2: Create the Engaging Midjourney Mosaic Layout
zhlédnutí 151Před 2 měsíci
Get your free template - I'd love it if you could leave your feedback: www.wix.com/marketplace/template/54a37109-42cf-4955-8b3d-0b29fd8baf0c?entry=gallery_page Live example: iloveditorx.wixstudio.io/myjourney-feed Part 1: czcams.com/video/7RlJsXpicFw/video.html Part 3: czcams.com/video/-mCA08TUODY/video.html #wixstudio #midjourney #mosaic
Building Sidebar: Part 1: Build the Midjourney Sidebar
zhlédnutí 413Před 2 měsíci
In the following guide we will learn how to rebuild the Midjourney Sidebar on Wix Studio. The sidebar of Midjourney is interesting because it has 3 different designs suitable for the type of device. Get your free template - I'd love it if you could leave your feedback: www.wix.com/marketplace/template/54a37109-42cf-4955-8b3d-0b29fd8baf0c?entry=gallery_page Live example: iloveditorx.wixstudio.io...
Rebuild Midjourney Feed: Preview and Plan | Wix Studio
zhlédnutí 235Před 3 měsíci
Get ready for a journey as we rebuild the Midjourney Feed from scratch! In this first episode, "Preview and Plan," we'll give you an exclusive look at the layout and features we'll be crafting. Get your free template - I'd love it if you could leave your feedback: www.wix.com/marketplace/template/54a37109-42cf-4955-8b3d-0b29fd8baf0c?entry=gallery_page Midjourney feed: www.midjourney.com/showcas...
Creative Text Entrance Animation | Wix Studio
zhlédnutí 625Před 3 měsíci
Live example: iloveditorx.wixstudio.io/my-site-28/blank #wixStudio #counter #NoCode
NEON EFFECT AND MOUSE PARALLAX | Wix Studio
zhlédnutí 1,3KPřed 4 měsíci
In this tutorial we will create a neon lighting effect that moves with the position of the mouse and reveals hidden text. Live example: iloveditorx.wixstudio.io/neon-effect #wixstudio #parallax #neon
Creating a Slick Menu Animation | Part 4 | Wix Studio
zhlédnutí 838Před 4 měsíci
Creating a Slick Menu Animation | Part 4 | Wix Studio
Creating a Slick Menu Animation | Part 3 | Wix Studio
zhlédnutí 1,2KPřed 5 měsíci
Creating a Slick Menu Animation | Part 3 | Wix Studio
Creating a Slick Menu Animation | Part 2 | Wix Studio
zhlédnutí 1,4KPřed 5 měsíci
Creating a Slick Menu Animation | Part 2 | Wix Studio
Creating a Slick Menu Animation | Part 1 | Wix Studio
zhlédnutí 2,9KPřed 5 měsíci
Creating a Slick Menu Animation | Part 1 | Wix Studio
Playing around with rebuilding Everyday Robots beautiful menu on Wix Studio
zhlédnutí 285Před 5 měsíci
Playing around with rebuilding Everyday Robots beautiful menu on Wix Studio
Scroll Effect - Scale In-Out | Wix Studio
zhlédnutí 8KPřed 5 měsíci
Scroll Effect - Scale In-Out | Wix Studio
How to Add Animation to the Wix Search Bar | Wix Studio
zhlédnutí 813Před 5 měsíci
How to Add Animation to the Wix Search Bar | Wix Studio
Efficient Way to Set Element Size | Wix Studio
zhlédnutí 382Před 5 měsíci
Efficient Way to Set Element Size | Wix Studio
How to Create Footer Reveal Effect | Wix Studio
zhlédnutí 1KPřed 6 měsíci
How to Create Footer Reveal Effect | Wix Studio
How to Create a Kickass Video Player with Playlist | Wix Studio
zhlédnutí 802Před 6 měsíci
How to Create a Kickass Video Player with Playlist | Wix Studio
Creating Smooth Text Input Micro Interaction | Wix Studio
zhlédnutí 605Před 6 měsíci
Creating Smooth Text Input Micro Interaction | Wix Studio
Creating a Kickass Video Player with Playlist - Project Showcase | Wix Studio
zhlédnutí 360Před 6 měsíci
Creating a Kickass Video Player with Playlist - Project Showcase | Wix Studio
Creating Horizontal Scroll for Repeater | Wix Studio
zhlédnutí 21KPřed 7 měsíci
Creating Horizontal Scroll for Repeater | Wix Studio
How to Create Horizontal Scroll | Wix Studio
zhlédnutí 14KPřed 7 měsíci
How to Create Horizontal Scroll | Wix Studio
Create a Stunning Repeater Slideshow Navigation Indicator | Wix Studio
zhlédnutí 3,2KPřed 8 měsíci
Create a Stunning Repeater Slideshow Navigation Indicator | Wix Studio
Hello, i have a WIX Studio problem: Wrapping of elements within repeater, despite parent container in "max. cont." width I have the following problem: I have a container which is set to "100%" height and "max. cont." Width is set. Within this container there is a repeater on "Stretch". The elements of the repeater are on height "Auto" with min. height 450px & CSS lines height "Min/Max" (20px, 100%) & width "40vw". Normally, the width of the parent container should depend on the width of the repeater elements. Roughly speaking, it also works. However, if I want to test whether the section is also responsive and enlarge and reduce the window with the Life page in height and width on my desktop, there are certain px widths in which, for whatever reason, the repeater elements are wrapped in two lines. This should not be the case. Can you help me?
Super useful! Always wanted to drag my sliders, thanks for sharing this 🤩
Can't find custom css classes in the modern EditorX...
Awesome Video, very cool.
This is so nice
Legendary, thank you! This is amazing!!!
I'd really appreciate if you can help me. I'll try to be as clear as possible. I have 4 item boxes. In each box, I have text left aligned with a margin of 48px on the left to give it some space. Because the margin is docked to the item box and the items are in a flex box with max content (That constantly stretches), in certain larger screen sizes the text content isn't aligned to my other content with 48px margin because the flex box keeps expanding. Is there any way to fix this so my text content stays aligned? When I take the entire Section and apply "Max Width" I get the margin I want, but there's a random white space on the left side.
For now, I just decided to center my text in each item so I don't have to worry about it lol
Thank you!!!!!!!!
make a full video on wix studio responsiveness
Wonderful !!!!! ❤❤❤❤❤
Dude your a fucken ledgend n life saver
hey brother :) i was trying to use the flexbox as slider from left to right, like we can easily make slide from top to bottom and scroll it from desktop but if we make slider from left to right then we are not able to slide with mouse untill we use the scrollbar. please make a tutorial that how to make slider in horizontally with full section scroll snap. please also tell how to make it infinite slider. Thanks
wth man this is the best wix website I've seen
Would you give us the tutorial about the font stagger? please..
Bro you’re killing it 💯🔥
Love it! 💚 Can you make a vertical autoscroll gallery?
Great video as always man BUT I have not seen to have the new feature max content :( anyway great stuff very creative man very!!!
@@staticmotion1628 Thank you! I guess it's gradually released.
Wow! Not bad!
very cool Effect !!
Can this be done in WordPress
Can I dm you somewhere?
Brilliant!!!
love it!
🤩✨
Love the content wish there was less talking and more faster explanation its the only thing preventing me from trying tips you share
מקסים!!
Sleeeek !!! That’s awesome !! Thanks bro ❤
Fantastic video as always! Your work truly inspires me.
מקסים!!
Hello sir. Where can I contact you personally?
Thanks for the video!!
Do you maybe have a solution for making a loading page in Wix Studio?
Can I have more than 3 repeaters horizontally aligned on the desktop site? I've tried but the repeaters gets a different width and the 4th one gets cut for slide effect.
Lol, everytime I am trying to figure out how to do something, you make a tut. Thank you! 💚
Sounds good to me 😄
when i follow the instruction, the scroll happens in the preview 0f the wix editor but after publishing the site - scroll does not work on the browser
You are a boon
Awesome ❤
Thank you! cool effect
Super cool effect.
This was massive help! Thanks a lot :) <3 PS: I linked the Fade effect on the Title Section with the same side repeater. Worked perfectly
Amazing!
Great video thanks! Can you also show how you did the hover animation of the text?
Hi! I love your tutorials so much, thank you for that! Is there a way to contact you for a real small question? 🙏🏼🙏🏼 thank you again!
I followed every step till 10:21 but when I looked in the preview there where no elements from the flexbox visible.
Pls help me
After you move the blue repeater down 100vh your container sticks but mine does not, it just keeps scrolling. Tips?
Get your free template - I'd love it if you could leave your feedback: www.wix.com/marketplace/template/67dfc292-0f06-4433-a839-092f1d69486e?entry=gallery_page
How do I create a horizontal scroll with only 40% more width one time?
The code you have ist the same as that one we should follow. What are we supposed to do with the extra code? They giving me errors. Should i delete the extra code?
I dont know what im doing wrong, but I dont get the green menu container like you have when you poem the menu, when Im trying to code. What do you think have gone wrong?
Yeah, I second this. Same issue.
Im doing every single steps right, and naming everything the same way as you, but unfortunately it doesnt work. I would love to have this menu animation. Ist amazing, but it wont work. The Wix Studio interface has been updated too so its hard to follow.
HOW IS THAT IT DOESN'T AUTOSAVE EACH TIME YOU MOVE SOMETHING? MINE WORKS PRETTY SLOW