My Friends Didn’t Believe I Made This!
Вставка
- Опубліковано 27 лип 2024
- 🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to create an Apple-style parallax hover card with progressive blur in Framer. I'll show you how to prepare images for this interaction and how to add effects like parallax hover and progressive blur without any coding. With the help of this video, you’ll be able to create interactions that blow your friends mind.
Remix and starter file: framer.university/resources/p...
Original concept by Arkady: x.com/sovpal/status/177998991...
Progressive Blur (Blur Gradient) component: framer.university/resources/b...
Parallax Hover Override: framer.university/resources/p...
Icon pack mentioned in the video: dub.sh/central
0:00 - Introduction
0:52 - The roadmap
1:34 - Preparing assets
3:47 - Building the base
16:29 - Adding effects (Progressive Blur)
18:19 - Adding the parallax hover effect
23:29 - Additional resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
I hope you compile the videos into a playlist list, so that they can be a course
Fantastic video! I truly value the insightful content you share!
I appreciate you:)
wow this is so great and helpful. thank you
I’m glad this helped, Hoang ✌️
Could you teach how to create a toggle that varies between light and dark themes on the website?
it's simple! just use this: theme-switcher-override.framer.website/
Awesome 🎉
Thanks 🤗
its realy cool sir!
Glad you think so! 🫶
I'm a newcomer to the community, is there a discord?
Your content js helpful. Im here to stay.
What the other user said about clickbait is true, some of us censor clickbait from our Internet lives because they don't help us make money in real life, you don't want to gain a bad rep among a certain crowd because yourd interested in attracting the massess who probably would move on to the next clickbait title.
Thanks for content regardless 🙏🏾🙏🏾🔥🔥❤❤
Praying for wins
Hey! I don’t have discord but u can join the framer.community.
I’m glad you find my content helpful and thanks for the feedback 🫶
I have a great one...is there a way to open the search bar with "pre-loaded" content? I feel like I'm heading eerily close to needed code for this one?
both cards are moving, how can I make only one card interact with the current mouse that is above the component?
But biggest question is - how do you make it only animate when mouse is within the card? So all cards don't move in unison at once, which is distracting.
Great video! I appreciate the valuable content you provide.
Also, I read @baldrat comment, but I want to portray my opinion that It's necessary to create clickable thumbnails because even if the content is top-notch, it won't reach its potential audience without the right visuals to draw them in.
Keep up the excellent work! 😄
thank you so much! :) more to come 💙
Great tutorial! Is there a method to restrict movement within each section? For instance, could I set it up so that the image animates only within the Hero section, and as soon as the viewer transitions to another section, the animation halts?
Thanks! The override is set up in a way that once the element is out of view, it no longer follows the cursor. Lemme know if you need any help :)
@@framer.university Thanks for getting back! It seems the problem that I'm having may stem from the sections being too closely spaced. With multiple sections visible simultaneously within the viewport, the desired effect might not be achieved.
Hey, tried 10times, but have trouble with 3d that brokes component while previewing, and light effect are not cropped by the component borders -could you help with this?)
Hello, thank you for the wonderful video, but I have an important question, and that question is, can you do the same things you do with code, for example, connect to the database and get information from the database, insert and delete accounts, etc. using this software framer? if yes, can you give me some tips plz
I’m glad you liked it 🫡
Yes you can! Unfortunately, i can’t give you useful tips since im focusing on the nocode part of Framer.
@@framer.university wow cool! Appreciate a lot hehe 💚💚
how can you make them buttons as well and clickable
Simple add a link property to it on the top of the right panel.
Hello! What do you use to record your screen?
hey! i'm using screen studio.
How can we add a sticky curson in our website?
what is a sticky cursor?
Good video, but just a couple notes for making better tutorials for us:
You shouldn't copy and paste from the finished product to the one you're working on. You should show exactly how you would create it as if it were not yet created as we can't copy and paste from a finished product on our side.
Hey 👋
Thanks a lot for the feedback! I’ll keep this in mind :)
Can you also let me know which exact copy&paste made it a little harder for you to understand the video?
Wow I’m early!
love the earlies :)
Why this clickbaity title? Don't do this.
What about the content of the video? Was it valuable?
It was ,very interesting , do whatever you can to push your videos bro, I feel you have a lot of useful content people could learn in short time since your videos aren't particularly long to watch
@@framer.university if i didn't care about your content i would not have commented.
@@emmylegend5442 thanks for the feedback, mate! :)
@@baldrati Gotcha!
When building on social media, my job is not only to create useful educational content but also to make sure you see it. A great title that encourages a high percentage of people to click helps the algorithm push the content further, allowing it to help more people.
As long as the content being promoted is valuable, I believe it is acceptable to do everything in your power to increase the click-through rate (CTR). In this world, we’re fighting for clicks, and the real issue arises only if we fail to deliver value once the click has been secured.
So, please forgive me for this title and all my future titles. Instead, I would appreciate your feedback on the content rather than the packaging.