Studio Il
Studio Il
  • 117
  • 363 646
Crazy Scrolling Effect for Hero Section – No Code!
Learn how to create an eye-catching scroll effect for your hero section without writing a single line of code!
This tutorial showcases a dynamic grid of 3x3 cards where the center card grows seamlessly as you scroll, eventually filling the entire screen to reveal its content. Once the content is displayed, the page transitions smoothly back to regular scrolling. Perfect for making your website stand out with interactive, no-code animation!
⭐⭐⭐ GET YOUR FREE TEMPLATE ⭐⭐⭐
tinyurl.com/7785ff26
Live example:
mystudioil.wixstudio.com/hero-scroll-anim
#wixstudio #grid #scroll
มุมมอง: 354

วีดีโอ

Sneak Peek: Hero Scroll Animation
มุมมอง 27614 วันที่ผ่านมา
#wixStudio #Scroll #animation
Control Your Content: CSS Tricks for Limiting Text Lines
มุมมอง 261หลายเดือนก่อน
Learn how to control the appearance of long text on your website with this CSS tutorial. In this video, we'll show you how to limit the number of text lines, add a stylish ellipsis effect, and make it responsive for different screen sizes. Perfect for creating clean and professional designs that maintain visual harmony across devices! ⚠️⚠️⚠️ I forgot to mention that it is necessary to add the c...
The Stunning Grid Reveal Effect: Recreating Webflow Effects in Wix Studio
มุมมอง 6882 หลายเดือนก่อน
In this tutorial, we’ll show you how to recreate the stunning Grid Reveal Effect in Wix Studio, inspired by the amazing work of @Mizko Learn how to take a Webflow-inspired effect and build it step-by-step in Wix Studio, adding a dynamic touch to your website with an interactive grid reveal. This effect is perfect for adding a unique and engaging look to your design. Free template: drive.google....
Revolutionize Your Website with This Jaw-Dropping 3D Effect!
มุมมอง 6812 หลายเดือนก่อน
In this tutorial, learn how to create a jaw-dropping 3D gallery effect for your website using a Repeater in Wix Studio. We’ll walk you through the steps to design a dynamic, interactive gallery that stands out and elevates your site’s visual appeal. With simple CSS techniques and a touch of creativity, you’ll master the art of adding depth and movement to your gallery, leaving your visitors in ...
A Simple Way to Make Your Gallery More Interactive and Eye-Catching
มุมมอง 6342 หลายเดือนก่อน
Looking to make your Repeater gallery more engaging? In this tutorial, you’ll learn a simple technique to make gallery items expand in width when hovered over, creating a dynamic and interactive experience. Whether you're showcasing a portfolio, products, or photos, this easy hover effect will give your gallery a professional touch and keep viewers engaged. Perfect for beginners and pros alike,...
Sneak Peek: Fun Gallery Layouts with Repeaters!
มุมมอง 2502 หลายเดือนก่อน
Testing out cool new layouts to turn Repeaters into interactive galleries. #wixstudio #repeater #gallery
Improve User Experience with a Sticky Tabs Menu - Super Easy!
มุมมอง 7742 หลายเดือนก่อน
In this video, I’ll show you how to make your tabs menu sticky, so it stays fixed at the top of the screen while scrolling. This is a great way to make navigation easier for your users, giving them constant access to the menu and helping them stay oriented within your content. Plus, I’ll share some tips on adding custom visual touches to enhance the user experience. #wixstudio #ux #tabs
Figma to Wix Studio: Final Website Overview + Free Template Download
มุมมอง 2622 หลายเดือนก่อน
In this final video of the 'Figma to Wix Studio' series, we recap the entire process of building a stunning Digital Agency website from scratch. Join me as we walk through the completed site, review all the key features and design elements, and discuss the techniques we used to bring the Figma design to life in Wix Studio. As a special bonus, I'm giving away the full website template for free! ...
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 6
มุมมอง 1442 หลายเดือนก่อน
Join me in Part 5 of this step-by-step series where we take a design from Figma and transform it into a fully functional digital agency website in Wix Studio. In this part, we'll focus on building the contact us Form and the Footer. ⭐️ Get your free template ⭐️ www.wix.com/marketplace/template/dc11a4c9-01b9-4e65-8e2f-370ddbd34190 Watch the full playlist: th-cam.com/play/PLS1vlthO4leKj7ufSnHwVbN...
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 5
มุมมอง 702 หลายเดือนก่อน
Join me in Part 5 of this step-by-step series where we take a design from Figma and transform it into a fully functional digital agency website in Wix Studio. In this part, we'll focus on building the FAQ component. ⭐️ Get your free template ⭐️ www.wix.com/marketplace/template/dc11a4c9-01b9-4e65-8e2f-370ddbd34190 Part 1: th-cam.com/video/AgaeuSyWgmk/w-d-xo.html Part 2: th-cam.com/video/UnCLDhK2...
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 4
มุมมอง 932 หลายเดือนก่อน
Join me in Part 4 of this step-by-step series where we take a design from Figma and transform it into a fully functional digital agency website in Wix Studio. In this part, we’ll work together to create a responsive Flexbox within a Repeater item that adapts smoothly to any screen size. The Flexbox will automatically wrap when space is limited, ensuring that the content stays clear and readable...
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 3
มุมมอง 942 หลายเดือนก่อน
Join me in Part 3 of this step-by-step series where we take a design from Figma and transform it into a fully functional digital agency website in Wix Studio. In this part, we’ll continue building the website by focusing on the section with the main heading, subheading, and the information card below it. We’ll dive into smart layout techniques to make these elements reusable, saving a lot of ti...
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 2
มุมมอง 2323 หลายเดือนก่อน
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 2
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 1
มุมมอง 9473 หลายเดือนก่อน
Figma to Wix Studio: Full Digital Agency Website Creation Process - Part 1
Scroll in Circles: Create a Stunning Rotating Scroll Effect
มุมมอง 1.1K3 หลายเดือนก่อน
Scroll in Circles: Create a Stunning Rotating Scroll Effect
Boost Your Wix Store’s Design with Masonry Products Layout
มุมมอง 3703 หลายเดือนก่อน
Boost Your Wix Store’s Design with Masonry Products Layout
Let's Talk About Max-Width
มุมมอง 5173 หลายเดือนก่อน
Let's Talk About Max-Width
Studio Updates: Adding Image Backgrounds to Buttons
มุมมอง 1643 หลายเดือนก่อน
Studio Updates: Adding Image Backgrounds to Buttons
Let’s Create a Cute Tooltip Together!
มุมมอง 3023 หลายเดือนก่อน
Let’s Create a Cute Tooltip Together!
Scroll Magic to Repeater Items: Full Tutorial
มุมมอง 9465 หลายเดือนก่อน
Scroll Magic to Repeater Items: Full Tutorial
Sneak Peek: Scroll Magic for Repeater items
มุมมอง 3155 หลายเดือนก่อน
Sneak Peek: Scroll Magic for Repeater items
Embed Social Media Posts from Any Platform with Zero Coding Required
มุมมอง 2965 หลายเดือนก่อน
Embed Social Media Posts from Any Platform with Zero Coding Required
Drag-to-Scroll: Enhance Your Website's Scroll Experience
มุมมอง 1.4K5 หลายเดือนก่อน
Drag-to-Scroll: Enhance Your Website's Scroll Experience
Fake It Till You Make It: Creating a Fake 3D Gallery
มุมมอง 1.1K5 หลายเดือนก่อน
Fake It Till You Make It: Creating a Fake 3D Gallery
Creating Stunning Border Animations
มุมมอง 9196 หลายเดือนก่อน
Creating Stunning Border Animations
Fractal Glass Effect
มุมมอง 4576 หลายเดือนก่อน
Fractal Glass Effect
App Review: Image Distortion Hover Effect (by Visual-Identity)
มุมมอง 6376 หลายเดือนก่อน
App Review: Image Distortion Hover Effect (by Visual-Identity)
Easy Way to Create a Cut-Out Effect That Tracks Your Mouse
มุมมอง 5166 หลายเดือนก่อน
Easy Way to Create a Cut-Out Effect That Tracks Your Mouse
Creating Unique Repeater Layouts Using Flexbox
มุมมอง 6637 หลายเดือนก่อน
Creating Unique Repeater Layouts Using Flexbox

ความคิดเห็น

  • @gianmarcoventura7915
    @gianmarcoventura7915 วันที่ผ่านมา

    Thanks for the tutorial!! Is there a way to get the same scrolling effect using the keyboard?

  • @tdunlop6
    @tdunlop6 วันที่ผ่านมา

    Hey! The live site link is working for me but the link to the code does not work?

    • @Studio-Il
      @Studio-Il วันที่ผ่านมา

      Hi, I fixed the broken link. www.studio-il.com/video-tutorials/how-to-create-dark-mode-%7C-wix-studio?tab=code Thank you or letting me know!

    • @tdunlop6
      @tdunlop6 23 ชั่วโมงที่ผ่านมา

      @@Studio-Il Thank you! Is it possible to have hover interactions as well as the light and dark mode? I have managed to get most of it to work but there appears to be a conflict with some of the text colour and background colours.

  • @aurelia2822
    @aurelia2822 2 วันที่ผ่านมา

    Absolutely brilliant video once again! Thank you for all the hard work-you’ve outdone yourself. I even managed to adapt it to my website, and it worked perfectly. Keep it up, another masterpiece! 🙌

    • @Studio-Il
      @Studio-Il 2 วันที่ผ่านมา

      That's great to hear! I'm so happy to hear that you used it on your site.

  • @waltersjonathan
    @waltersjonathan 7 วันที่ผ่านมา

    Looks great. One question, what’s the entrance animation that you used? I don’t think that is explained. Thx

    • @Studio-Il
      @Studio-Il 7 วันที่ผ่านมา

      Glide. Check the video description. You can get your free template and explore how everything is built

  • @SAVIOR773
    @SAVIOR773 8 วันที่ผ่านมา

    Much appreciated!!!

  • @tareqalajaj2930
    @tareqalajaj2930 8 วันที่ผ่านมา

    Let's goooooooooo!!!! Did you thought about the discord idee ?

    • @Studio-Il
      @Studio-Il 7 วันที่ผ่านมา

      What's Discord idea?

  • @tonydaian8036
    @tonydaian8036 8 วันที่ผ่านมา

    wow man! your super talented! thx for sharing your knowledge

    • @Studio-Il
      @Studio-Il 8 วันที่ผ่านมา

      Thank you!

  • @shortstime7853
    @shortstime7853 8 วันที่ผ่านมา

    🔥

  • @staticmotion1628
    @staticmotion1628 8 วันที่ผ่านมา

    Super awesome stuff my friend thank you so much

    • @Studio-Il
      @Studio-Il 8 วันที่ผ่านมา

      I'm glad you like it! 💪

  • @StudioNua
    @StudioNua 8 วันที่ผ่านมา

    As always, fantastic work!

    • @Studio-Il
      @Studio-Il 8 วันที่ผ่านมา

      Thanks, I appreciate it.

  • @bryallen11
    @bryallen11 8 วันที่ผ่านมา

    Thank you very much!!!

  • @OpenVolumeStudio
    @OpenVolumeStudio 9 วันที่ผ่านมา

    Can the same thing be achieved in the normal wix editor (not studio)? I am struggling to figure it out.

    • @Studio-Il
      @Studio-Il 8 วันที่ผ่านมา

      Hey, I don't think so.

  • @EliezerPerlmutter
    @EliezerPerlmutter 11 วันที่ผ่านมา

    Only work for background with solid colors.. how to make it work on a gradient background?

  • @tareqalajaj2930
    @tareqalajaj2930 11 วันที่ผ่านมา

    Do you have discord ? Like a fun channel where the people can discuss wix stuff ? I have some sections trying to build them on wix, but I am having some problems, and if u have a discord maybe the people can help them selfe there :) ❤️❤️❤️❤️❤️

  • @tareqalajaj2930
    @tareqalajaj2930 11 วันที่ผ่านมา

    Let's goooooo!!! I really like your stuff!! I can't wait to see hiw u do that ? I learned alot because of you !!!!

  • @Idan_researcher
    @Idan_researcher 12 วันที่ผ่านมา

    Thank you

  • @vishnupillaicultnostimi
    @vishnupillaicultnostimi 13 วันที่ผ่านมา

    You are just awesome

  • @webdesignlondon
    @webdesignlondon 13 วันที่ผ่านมา

    dude, this is dope!

  • @viktoriotv
    @viktoriotv 13 วันที่ผ่านมา

    You are a beast ;)

  • @alaafar7952
    @alaafar7952 15 วันที่ผ่านมา

    you're great, thank you.

  • @daniell1676
    @daniell1676 16 วันที่ผ่านมา

    wow very cool, i'm excited!

  • @staticmotion1628
    @staticmotion1628 16 วันที่ผ่านมา

    the good stuff just keeps coming cant wait so cool

  • @SAVIOR773
    @SAVIOR773 16 วันที่ผ่านมา

    Yes🎉

  • @coxejoao8708
    @coxejoao8708 16 วันที่ผ่านมา

    Wow! Im very excited.

  • @vishnupillaicultnostimi
    @vishnupillaicultnostimi 16 วันที่ผ่านมา

    This is going to be awesome

  • @leaforshort
    @leaforshort 19 วันที่ผ่านมา

    Many people ask about the container in the beginning just make a repeater right-click inside the item then quick add and add container, then from the item bg make it 0% for transparency and for the container add bg colour and make the corners 30, now you can add whatever you want inside the container, title, text, image etc. Also for anyone that wants to insert more than 3 items you should change the Animation Area, right margin from the repeater and you should also add on the list more items. For example I inserted 5 items in the Repeater so in the list repeater I added 2 items to make them 5. Then I changed the animation area to 55% and changed the right margin from the repeater to -95vw.

  • @thaile6149
    @thaile6149 19 วันที่ผ่านมา

    I have tabs inside accordion. How can I make my tab bar sticky? Please help

  • @starscalesagency
    @starscalesagency 21 วันที่ผ่านมา

    please drop it as a template

  • @thaile6149
    @thaile6149 21 วันที่ผ่านมา

    Exactly what I need. Thank you

  • @tareqalajaj2930
    @tareqalajaj2930 24 วันที่ผ่านมา

    Can you explain more ! :) I Luv your work

  • @nicedesignagency
    @nicedesignagency 24 วันที่ผ่านมา

    when can we see the video ? the tutorial pleaaaase

    • @Studio-Il
      @Studio-Il 23 วันที่ผ่านมา

      th-cam.com/video/zmfy4e3AvN4/w-d-xo.html

  • @viktoriotv
    @viktoriotv 24 วันที่ผ่านมา

    Quick question. How can I make each card lead to a different page link when it is pressed? What should I change, thank you :)

    • @Studio-Il
      @Studio-Il 23 วันที่ผ่านมา

      Hey, You can add a button / image to the repeater item and set the link you want. If the repeater is connected to the database you can set the destination link from the database

    • @viktoriotv
      @viktoriotv 23 วันที่ผ่านมา

      @ Thank you very much

    • @viktoriotv
      @viktoriotv 21 วันที่ผ่านมา

      What about making the space between each card wider for mobile version. What should I change?

  • @Sushimond
    @Sushimond 25 วันที่ผ่านมา

    Thank you for the content. However, there is a bug. If you click the Close Menu Button, before the open menu animation is finished, it breaks the website. You get back to the main website, but you can't scroll all the way up anymore, it seems like the website gets cut off somehow. I like the open animation a little bit slower, so I don't want the website to break once someone klicks the Close Menu Button too quickly. Is there a solution for this? Edit: Sometimes even the open menu button causes the website itself to jump (and break sometimes as well).

  • @StevenYoung28
    @StevenYoung28 หลายเดือนก่อน

    Just what I needed! ... Awesome tutorial man 🙏 Followed it and worked like a charm in Wix Studio.

  • @niharikadangwal2228
    @niharikadangwal2228 หลายเดือนก่อน

    Hello, I am trying to download this free template on six, but getting an error. Is there any other way to download it? Thanks in advance :)

  • @Unforgettablespots
    @Unforgettablespots หลายเดือนก่อน

    i followed every step and it doesn't work looks like on the video you skip a step forward on the video without showing

    • @Studio-Il
      @Studio-Il หลายเดือนก่อน

      Hey, There is a free template you can use: drive.google.com/file/d/1vbS6mwKKQ3ZJ1Cp-wA4sclkOuYf-QHfd/view?usp=sharing It can help you better understand how it's built.

    • @Unforgettablespots
      @Unforgettablespots หลายเดือนก่อน

      @@Studio-Il i did try to used it but for some reason its not working and i would like to have it color instead of Black and white the pictures i cant change that

    • @Studio-Il
      @Studio-Il หลายเดือนก่อน

      @Unforgettablespots You can remove the "grayscale(0)" from the css

  • @sunadmiral
    @sunadmiral หลายเดือนก่อน

    Hi, thank you for the tutorial. I have a problem though, I need to reload the page to have it working. Happens to all the pages. The repeater is not connected to CMS, the code is the same as yours, tried in incognito mode and cleaned cache, nothing helps. Is there any solution to it? Thank you.

    • @Studio-Il
      @Studio-Il หลายเดือนก่อน

      Hey, try to run the code with some delay using setTimeout()... If you dont know how, give the code to ChatGPT and tell him to add some timeout

    • @sunadmiral
      @sunadmiral หลายเดือนก่อน

      @@Studio-Il YOU ARE A STAR!!! It worked ⭐⭐⭐ Thank you!

    • @Studio-Il
      @Studio-Il หลายเดือนก่อน

      @sunadmiral YEYYYY!!!! I'm glad it worked 💪

  • @AnthonyAllioo
    @AnthonyAllioo หลายเดือนก่อน

    Needed this!!!

  • @shketrap
    @shketrap หลายเดือนก่อน

    Bro, thnx! It work! But it laggg so hard even on black website

  • @nathanrunda6053
    @nathanrunda6053 หลายเดือนก่อน

    How do I get the text to scroll behind the rotating images?

  • @shortstime7853
    @shortstime7853 หลายเดือนก่อน

    Great tip 🔥

  • @staticmotion1628
    @staticmotion1628 หลายเดือนก่อน

    very cool i just ran into this problem the other day and the only way i could figure to solve it was to change copy to fit my 5 lines. thank you next time ill use this CSS

    • @Studio-Il
      @Studio-Il หลายเดือนก่อน

      I'm glad this helps! It's always nice to have a more flexible solution 😉

  • @nicedesignagency
    @nicedesignagency หลายเดือนก่อน

    we respect your work very much!

    • @Studio-Il
      @Studio-Il หลายเดือนก่อน

      @@nicedesignagency 🫶🏾

  • @shivangeesaikia9721
    @shivangeesaikia9721 หลายเดือนก่อน

    Amazing video but for the life of me stop those swallowing sounds in the background. Good audio will ensure more views for you. I am feeling guilty for having written that but as a view i gave my honest opinion. The audio is awful! But the content is amazing!!! Thanks a ton and sorry if i hurt any feelings but its because you are the best and should come across as one

    • @Studio-Il
      @Studio-Il หลายเดือนก่อน

      I'm sorry...

  • @mulder_nz
    @mulder_nz หลายเดือนก่อน

    This is great! thank you :) Im having trouble with it working beautifully in desktop mode, but not in mobile. it doesnt scroll horizontally . Any wisdom/advice?

  • @XNMCompany
    @XNMCompany หลายเดือนก่อน

    HI, Thank you for this amazing tutorial! It was super helpful and easy to follow. I really appreciate the effort you put into explaining everything so clearly. I have a small request: Could you do a similar tutorial but with a horizontal approach for the section scroll snap effect using Flexbox (no code)? th-cam.com/video/vrDCQu__8BE/w-d-xo.html&ab_channel=StudioIl I think it would be incredibly useful! Thanks again for all the great content you share!

  • @MusicBeyondBelief
    @MusicBeyondBelief หลายเดือนก่อน

    I am getting a small bar across the bottom of the slider no matter the screen size, any suggestions? Have followed all of your steps to a t. Also, sometimes the snap scroll just stops working, not sure what's going on.

  • @fiveshorts
    @fiveshorts หลายเดือนก่อน

    This is great, thanks. Is it possible to copy the html file you provided into an existing site? I've tried adding it to Global Sections, but they are only global to the site they're in

    • @Studio-Il
      @Studio-Il หลายเดือนก่อน

      You have a free template to download in the video description

    • @fiveshorts
      @fiveshorts หลายเดือนก่อน

      Yes, and thank you, but that opens a new Site. I wanted to add the page or the section to my existing site…

    • @Studio-Il
      @Studio-Il หลายเดือนก่อน

      @fiveshorts so you can cosecthe section to your exciting site and add the css code

  • @ze_tems
    @ze_tems หลายเดือนก่อน

    Great tutorial as always, can you make a tutorial on GSAP integration for wix studio ? If it's possible.