Thanks Ran. I've managed to achieve this in elementor because I dont use webflow. As soon as I realised the text layering between the image was happening, it made so much sense.
Hey! Please put your recorded voice on a equalizer and cut the higher frequencies ♥ Or just place the equalizer in the mic input before recording :) Good Work Bro, I love your videos.
Hi Ran thanks so much for doing this. I am a little new to code and can't seem to get the CSS to work? Do I need to target the div some how? Thanks in advance for any help.
Hey that was easy but what would you do if you need the inverse? With the outline text on the outside and filled text on the image? This technique doesn't work for that.
@@tristanparker Solution: This is what I did wrong: All custom code is only loaded when I publish the page (not in the preview). I did not know that :-( Thanks for offering advice.
1:06 I can't see the controls you're using to outline the text because of your camera. >_< When I try to apply an outline to a text block in Webflow, it outlines a rectangular border around the text - not what I want. >_
Make sure to apply the custom css code into the text class and not the wrapper, as for 1:06 nothing fancy happened there he just turned off the fill color and activated the outline and chose a color for it, if you are familiar with XD it should have no mystery for you. Hope it helps!
Its pretty challenging to pull off what WebFlow can do with code. You could use the old-school 'position' and 'z-index' CSS property or just find a framework that can make your life so much easier.
Really easily. Just absolute positioned text divs in a container and zindexed. Then just have a bit of JavaScript with a onscroll event bound to the window and update the absolutes position based on that.
Webflow needs to step up their game on these minor and simple customizations.. If need to add custom code for a simple stroke, it defeats the entire purpose of #nocode.
I was wondering if you could help recreate this animation like in these two templates: webflow.com/templates/html/sonoma-agency-website-template webflow.com/templates/html/veritas-agency-website-template I can't seem to find anything similar in the tutorials I've tried to deconstruct it but can't seem to understand how it's done.
Bro, if you can't write a simple two lines of css then you should learn css first before using Webflow. Webflow should be used as a production tool to quickly create what would take much longer with plain html/css. If you limit yourself to just Webflow you will be handicapped as there is a lot that Webflow just cannot do. If you are proficient in css and js, however, then you can just take the Webflow design and add to it.
OK Boomer. Just let people build stuff in webflow and Google the CSS coding they need. Who cares? You're one of those assholes that guard the realms of Web design from non-coders ain't ya? I meet clowns like you all the time.
![Create a Parallax Text Outline Effect [Webflow Tutorial]](http://i.ytimg.com/vi/EwfPmO8DkeA/mqdefault.jpg)
I think a voice over would be enough. I couldn't see what you were doing because the face camera was covering it up
J B agreed
That's the purpose. That you learn less and take whatever their offering to purchase hence the rest
Agree
Thanks Ran for breaking this down and sharing it! Cannot believe it’s that simple!
This was awesome, thanks so much! It would be really helpful in the future to move your face window so it's not covering the style panel, though.
I like the breakdown of how you thought about the execution. Looking good.
Thanks Dustin!
This guy is definitely your best friend.
Thanks Ran. I've managed to achieve this in elementor because I dont use webflow. As soon as I realised the text layering between the image was happening, it made so much sense.
Nice! It’s all about using your tools creatively
Nice! It’s all about using your tools creatively
woww thank you thank you thank you so much for this!
Super Awesome❤
Thanks for answering that question. Great video!
Thanks Derek!
Thank you. Not only the information but also for the process.
Happy to!
Mind blown 🤯 thanks mate
face was covering the styles I needed to see :(
This was amazing, thank you. Subscribed
For anyone having problems with this (read: me). The effect doesn't show in the preview, but does when published. :|
Thanks for sharing, Ran! 🤩 Cant wait to try this out!
This is awesome, Ran👌🏽
the logic behind this effect is so cool and simple haha. thanks for the video man
Love it 🤟🏼
Amazing Ran ♥
Just freaking amazing!!!
brilliant
Man it was so simple. I was here thinking that there's no way to build this without knowing any framework. I was completely wrong
This is so helpful!! Thank you very much for uploading. You broke this down so nicely and it's very easy to listen to you. Thank you for your work!
Hi Ran! big thank you here. You always bring the content I need! proud to be your student too :)
So happy to hear Carlos 🙌
Lol, just made a couple an hours ago a tuts with parallax. For sure I will try this one. Thx dude! And ... can belive si so simple ...
Thats great ran
Love your videos bro, keep up the good work!
Thanks!’
looks amazing
Thank you Ran!
Ran, thank you for sharing! Just today I thought about how I'd get this effect on my webflow website ^^
You got it!
can you do this in css ?
Thank you once again! It would be a great help if you could put the read-only links from your tutorials in the description! Just some advice ;)
Great point! Thanks
Your a genius bro
Doesn’t take a genius 🤷♂️
Nice!
Hey! Please put your recorded voice on a
equalizer and cut the higher frequencies ♥
Or just place the equalizer in the mic input before recording :)
Good Work Bro, I love your videos.
Hi Ran thanks so much for doing this. I am a little new to code and can't seem to get the CSS to work? Do I need to target the div some how? Thanks in advance for any help.
Please tell me what kind of program you used in this video?
Hey that was easy but what would you do if you need the inverse? With the outline text on the outside and filled text on the image? This technique doesn't work for that.
Great tutorial. Am I the only one that does not get the outline to show? I copy the CSS code and link it to my selector class, but it won't show.
You might need to check the css selector being used matches the css class of the text.
@@tristanparker Thank you!
@@tristanparker Solution: This is what I did wrong: All custom code is only loaded when I publish the page (not in the preview). I did not know that :-( Thanks for offering advice.
@@MoritzFischer thanks for coming back to write this!
Will this work with custom fonts?
Can this be made using css?
Cool
nice, how would you code it ?
Gahh, always in webflow man....fair enough I suppose
It worked until I added the moving animation... Do I need to do something before adding the animation?
Hope this effect doesn’t get overused now, so simple and effective.
Its already somewhat blown out
Yeah true
Nice Video, but your face cam was covering the webflow right panel.
Good point thanks!
Thank you ! but I don't know why it doesnt work for me
I had trouble and was using capital letters in the code once i did lowercase it worked.
I can not get this code to work in my webflow project? Any tips?
I had trouble and was using capital letters in the code once i did lowercase it worked.
1:06 I can't see the controls you're using to outline the text because of your camera. >_<
When I try to apply an outline to a text block in Webflow, it outlines a rectangular border around the text - not what I want. >_
Make sure to apply the custom css code into the text class and not the wrapper, as for 1:06 nothing fancy happened there he just turned off the fill color and activated the outline and chose a color for it, if you are familiar with XD it should have no mystery for you. Hope it helps!
thnx a lot... have been wondering untill now that how it worked in jomor design....
Simple right?
@@FluxAcademy simple bt amazing
Please for a better experience can you move you video "face" to another place? We can´t see the property panel. Thanks
how do you do that moving text on scroll or atleast give me the keyword to search on google
How we can make this with code
Its pretty challenging to pull off what WebFlow can do with code. You could use the old-school 'position' and 'z-index' CSS property or just find a framework that can make your life so much easier.
Really easily. Just absolute positioned text divs in a container and zindexed. Then just have a bit of JavaScript with a onscroll event bound to the window and update the absolutes position based on that.
@@LucaGAFFE I'll look into it
Did anyone get a weird outline when they tried this? Its like the outline is going out of the boundaries of the text?
Webflow needs to step up their game on these minor and simple customizations.. If need to add custom code for a simple stroke, it defeats the entire purpose of #nocode.
video of you blocks the panel so couldn't see what you was doing
I was wondering if you could help recreate this animation like in these two templates: webflow.com/templates/html/sonoma-agency-website-template
webflow.com/templates/html/veritas-agency-website-template
I can't seem to find anything similar in the tutorials
I've tried to deconstruct it but can't seem to understand how it's done.
Make a Video BUILDING WEBSITES From Start to Finish!
Ran has an awesome web flow masterclass course that will help you build a website in webflow.
I would move your face to another position so that it doesn't cover the panel to the right.
hahaha code always wins.
If anyone's trying this on a free plan you won't be able to as custom code is locked.
Please remove your face, we just want to see the properties.
Bro, if you can't write a simple two lines of css then you should learn css first before using Webflow. Webflow should be used as a production tool to quickly create what would take much longer with plain html/css. If you limit yourself to just Webflow you will be handicapped as there is a lot that Webflow just cannot do. If you are proficient in css and js, however, then you can just take the Webflow design and add to it.
OK Boomer. Just let people build stuff in webflow and Google the CSS coding they need. Who cares? You're one of those assholes that guard the realms of Web design from non-coders ain't ya? I meet clowns like you all the time.