Studio Il
Studio Il
  • 91
  • 304 806
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
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
Fractal Glass Effect
zhlédnutí 253Před dnem
#wixstudio #css #mouse
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
How to Create Dark Mode | Wix Studio
zhlédnutí 2,9KPřed 8 měsíci
How to Create Dark Mode | 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

Komentáře

  • @danaldyduckling3560
    @danaldyduckling3560 Před 7 hodinami

    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?

  • @WixStudioTips
    @WixStudioTips Před dnem

    Super useful! Always wanted to drag my sliders, thanks for sharing this 🤩

  • @paulrumyancev
    @paulrumyancev Před dnem

    Can't find custom css classes in the modern EditorX...

  • @createdbybailey
    @createdbybailey Před 2 dny

    Awesome Video, very cool.

  • @writsidecars
    @writsidecars Před 2 dny

    This is so nice

  • @RoyArwas
    @RoyArwas Před 2 dny

    Legendary, thank you! This is amazing!!!

  • @JohnVigil97
    @JohnVigil97 Před 2 dny

    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.

    • @JohnVigil97
      @JohnVigil97 Před 2 dny

      For now, I just decided to center my text in each item so I don't have to worry about it lol

  • @jtreignz
    @jtreignz Před 3 dny

    Thank you!!!!!!!!

  • @irshad7895
    @irshad7895 Před 3 dny

    make a full video on wix studio responsiveness

  • @herveygreenadskin9068

    Wonderful !!!!! ❤❤❤❤❤

  • @MARTINDALEMCLYMONT
    @MARTINDALEMCLYMONT Před 3 dny

    Dude your a fucken ledgend n life saver

  • @StoryJokes.
    @StoryJokes. Před 4 dny

    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

  • @mlkwebstudio
    @mlkwebstudio Před 4 dny

    wth man this is the best wix website I've seen

  • @creativepure
    @creativepure Před 7 dny

    Would you give us the tutorial about the font stagger? please..

  • @HardikBhansali
    @HardikBhansali Před 8 dny

    Bro you’re killing it 💯🔥

  • @jtreignz
    @jtreignz Před 8 dny

    Love it! 💚 Can you make a vertical autoscroll gallery?

  • @staticmotion1628
    @staticmotion1628 Před 8 dny

    Great video as always man BUT I have not seen to have the new feature max content :( anyway great stuff very creative man very!!!

    • @Studio-Il
      @Studio-Il Před 8 dny

      @@staticmotion1628 Thank you! I guess it's gradually released.

  • @cweb1988
    @cweb1988 Před 8 dny

    Wow! Not bad!

  • @danaldyduckling3560

    very cool Effect !!

  • @teniolahenry
    @teniolahenry Před 9 dny

    Can this be done in WordPress

  • @viktoriotodorov9875

    Can I dm you somewhere?

  • @shaunmodipane1
    @shaunmodipane1 Před 9 dny

    Brilliant!!!

  • @cweb1988
    @cweb1988 Před 10 dny

    love it!

  • @HardikBhansali
    @HardikBhansali Před 10 dny

    🤩✨

  • @178rohan
    @178rohan Před 10 dny

    Love the content wish there was less talking and more faster explanation its the only thing preventing me from trying tips you share

  • @razkeren2787
    @razkeren2787 Před 10 dny

    מקסים!!

  • @herveygreenadskin9068

    Sleeeek !!! That’s awesome !! Thanks bro ❤

  • @Emmanuel-a292
    @Emmanuel-a292 Před 10 dny

    Fantastic video as always! Your work truly inspires me.

  • @razkeren2787
    @razkeren2787 Před 11 dny

    מקסים!!

  • @viktoriotv
    @viktoriotv Před 11 dny

    Hello sir. Where can I contact you personally?

  • @keijzermediaworks
    @keijzermediaworks Před 11 dny

    Thanks for the video!!

    • @keijzermediaworks
      @keijzermediaworks Před 11 dny

      Do you maybe have a solution for making a loading page in Wix Studio?

  • @danjia338
    @danjia338 Před 13 dny

    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.

  • @jtreignz
    @jtreignz Před 15 dny

    Lol, everytime I am trying to figure out how to do something, you make a tut. Thank you! 💚

  • @vishnupillaicultnostimi

    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

  • @vishnupillaicultnostimi

    You are a boon

  • @vishnupillaicultnostimi

    Awesome ❤

  • @alicekon7656
    @alicekon7656 Před 17 dny

    Thank you! cool effect

  • @cweb1988
    @cweb1988 Před 18 dny

    Super cool effect.

  • @sarthakdogra009
    @sarthakdogra009 Před 19 dny

    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

  • @alicekon7656
    @alicekon7656 Před 19 dny

    Great video thanks! Can you also show how you did the hover animation of the text?

  • @user-ln5ci6ro6u
    @user-ln5ci6ro6u Před 20 dny

    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!

  • @Mufasa-ed3gu
    @Mufasa-ed3gu Před 24 dny

    I followed every step till 10:21 but when I looked in the preview there where no elements from the flexbox visible.

  • @iamrelient3011
    @iamrelient3011 Před 24 dny

    After you move the blue repeater down 100vh your container sticks but mine does not, it just keeps scrolling. Tips?

    • @Studio-Il
      @Studio-Il Před 10 dny

      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

  • @XX_Level-up
    @XX_Level-up Před 27 dny

    How do I create a horizontal scroll with only 40% more width one time?

  • @johanpettersson678
    @johanpettersson678 Před 27 dny

    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?

  • @dajmeen9093
    @dajmeen9093 Před 28 dny

    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?

    • @carter3540
      @carter3540 Před dnem

      Yeah, I second this. Same issue.

  • @dajmeen9093
    @dajmeen9093 Před 28 dny

    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.

  • @kareduff
    @kareduff Před 28 dny

    HOW IS THAT IT DOESN'T AUTOSAVE EACH TIME YOU MOVE SOMETHING? MINE WORKS PRETTY SLOW