ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2024
- In this video, I show another creative way to use Scroll Effects in Wix to make a modern scroll reveal. The assets from the video were made in Illustrator.
Download the Assets from the Video (pay what you want):
www.wixfixassets.com/l/wix-sc...
-----------------------------------------------------------
Wix Fix Editor X Templates: www.wixfix.com/templates
-----------------------------------------------------------
Important Tutorials:
Top 5 Tips for Wix: • Top 5 Tips for WIX | W...
How to Use Strips in Wix: • How to Use Strips in W...
Set Up an E-commerce Store: • HOW TO SET UP AN ONLIN...
Custom Forms: • Custom Forms in Wix | ...
Wix Basics in 10 Minutes: • WIX Editor Basics in 1...
Everything Editor X: • Everything Editor X [2...
Modern Web Design: • Modern Web Design in W...
-----------------------------------------------------------
Join this channel to get access to perks:
/ @wixfix
Want to hire us? Let's connect on our agency site: www.wixfix.com
Don't forget to SUBSCRIBE and COMMENT any questions below!
THANK YOU FOR WATCHING!!
Music by Chillhop
Music: chillhop.com
#Wix #WixTutorial #ScrollEffects - แนวปฏิบัติและการใช้ชีวิต
![ภาพนี้ก็ฮาเหมือนกันนะเนี้ย #2 SS8 [ พากย์นรก MEME.EXE ] | easy boy](http://i.ytimg.com/vi/RMhUgxxD49Q/mqdefault.jpg)
I was just trying to figure out how to do this! This is great, thank you!
Thanks so much! This is the video I am looking for! that's really helpful.
This inspired me with great idea. Thank you!
Thank you , this was really helpful
Fantastic! Thank you so much!
This is Amazing. Thanks for sharing.
Nice video! I recommend showing the actual effect / result first, and then going into the detailed process. Otherwise, it's hard to tell what we're aiming for and whether we need it 🙂 Also, please show how to make your suggestions work on mobile (or how to hide it on mobile so that it doesn't break the design). Thanks!
This is awesome! Job well done!!!! I have a similar effect I have done on my own website, as the background is gradient and parallax scroll creates the same effect. I love how you created a timeline to give that effect. Genius!!!
can you share that with me, please?
Loved it
Thanks 😊
Thank you for all videos , but how about on the mobile size page , the scrolling effect will not work
Thank you
wow thanks!
Can you please do an in-depth tutorial on how you made the image!!
Is there a way to have two of these alongside each other on the same page?
I have 10 images the same size at the top of website that I want to move vertically continually automatically as long as the images are in sight. How do I do it please?
I add everything to Wix using the same strips and dimensions. I even added extra strips to the top and bottom for added height. However, I always seem to get stuck on the 3rd dot. It just cuts off. The colored background also gets cut off. Any ideas on how to fix this?
is it also possbile in wixstudio?
Didn't work as smoothly for me but I think there is an issue with the layers, which was not discussed here. Thanks for the insight though!
Please make a video about how you made a background in AI illustrator ?
How do you overlay a section on top of another?
Thank you for a great video, but I can't get past range 2 over scope 1 like in your video. The dividing line between two strips is immovable. Can you please show me where I am wrong? Thank you so much
I want to create the STACKED EFFECT? I don't know that I'm saying it right. Where the sections stop at the top or middle or bottom and the other blocks just connect. does that make sense :o
Want the assets used to create this effect? They are now available for download here: www.wixfixassets.com/l/wix-scroll-effect
Hey, do you have a version for wix studio ? I dont seem to have the same function that you are mentioning but I purchased your assets and am unable to use them right now :(
same problem here
Thanks for the video. What about the mobile version?
Unfortunately, scroll effects don't always appear on mobile, so that design might have to be changed for that breakpoint.
how does it look on mobile
Hey! I'm having some troubles with re-creating the Illustrator file. How is it so that the timeline is transparent, but it has the light grey color? When I set the transparency to zero, and have the icons in white, its only the icons that appear in Wix.
Thanks for any help on this!
I second this, I’m struggling how he made the timeline in the first place. If you find out please let me know.
any news>
im having same issue
On a new Artboard in illustrator, Create as many circles with lines as you want. Then join them together using the shape builder tool. Goal is to make the whole timeline as one single shape. Then, add a white rectangle behind the shape of the size of the artboard and using the shape builder tool, subtract the timeline from that rectange. Than export the white rectangle image as a .png file.
How do you simulate this in Wix STUDIO and how do you ensure that it works on MOBILE?
animations won't play on my site, do you have any tips?
♥
I want 6 round windows, how do add more?
How do we copy this to mobile, It looks great on desktop but on mobile theres no effect.
Sad this question got no response, I had the same thought about mobile
Hello, thanks for sharing this. this tool isnt responsive because we cant apply the "reveal" effect on mobile edition for the color backgrounds
Correct. You’ll have to have a different layout on mobile. But it’s a cool effect for desktop.
@@wixfix of course ! thanks for sharing this.
What size did you make the transparent icon in illustrator?
I made both 2000px by 2000px!
Just made the assets available for download (free) if you want. Check link in description!
@@wixfix Thank you! Mobile wasn't as straightforward to edit all the components. Any tips?
Can you teach us how to do the "Tech Scroll Effect" basically what happens on the apple and samsung website when you scroll, thx
Check out our video titled “Custom Lottie Animation on Scroll” 👍🏼
Just realised a total fail... when you zoom in and out the text comes out of line as do any icons put in the circles, any ideas?
Can the scrolling effect not be used from right to left instead of scrolling down?
No not this one.
Does not work for me. When going live the text is not aligned with the icons anymore.
can we customise the icons in the scroll bar? if so how?
You can either place them in the project file or in Wix. Either way works.
@@wixfix yeah I was a bit iffy about doing it in Wix just in case if the icons decide to move while loading or lag. Edited the project file! Thank you so much 🙏🏽 my web is now looking fab!
I can't seem to get this to work on Editor X. Any idea why?
The channel "I Love Editor X" released a version of this for Editor X
Hello I have purchased your assets it's possible to change the icons and colors of the line?
Yes. Your download should have a text document with a link to a hidden video to teach you how to change the color. Then you can either add the icons in the design or within Wix.
@@wixfix Hey thank you for your answer it may be possible to send a video where you do this in wix studio I mean the full creative scroll effect but in WIX STUDIO.
I have purchased your assets but I don't know how to put it properly in Wix Studio, please it would be very helpful to get this done.
Thanks!
Is this effect possible on mobile version too?
guess not, I tried it. no reveal animation for the background assets in mobile version
But its getting bigger while zoom in zoom out
Are the Assets available for download?
I made them available for download. Check the new link in description!
@@wixfix Thank You !!
Every time I click save, the bottom strip (underneath the png strip) keeps coming to the top and when I re-arrange it to the back, it repeats as soon as I hit save, anyone know why this keeps happening? It ruins the design
Its hard to say what the issue is without seeing the editor, but try to put the strip in the other strip. So that way when you save, it won't go anywhere. Hope this helps!
is it possible in wix studio?
Yes and it might even be easier. Just set the background image's position type to sticky.
funny the ad popping up is Squarespace. I hate Squarespace tho.
This has been so frustrating. I have spent hours trying to replicate with no success. The problem seems to be the making the image with transparent background. Would have been nice to explain exactly how it was made.
this doesnt work for me, i just have a solid colour background :( not the colour moving in the timeline.
Thank you so much for this!!! great idea!!!
I tried creating this effect but multiplied a few times, basically the scroll effect covers more scroll space, it seems to work perfectly but on the published site it lags when scrolling back up and appears green the entire screen ( I used green instead of that yellow color) any ideas @wixfix
Without seeing how your editor, it is a bit hard to diagnose the issue. But from the top of my head, it could be the scroll effects. Not sure how many sections with the reveal background scroll effect applied to it, but you could try 2 sections and make them a bit taller each (if I am understanding your issue correctly).
You could also try compressing that background image to make the file size as small as possible so it doesn't have to try as hard to load.
@@wixfix Thank you for the quick response, I have tried to compress the image and making it taller both of those didn't workout, I wish I could show you the issue... Its basically freezing the green color on the entire page when scrolling back up at one point and disappears when scrolling all the way up.
How can I make this effect on Wix Studio ? @wixfix