Creating an Interactive 3D Hero Section Without Coding

Поделиться
HTML-код
  • Опубликовано: 30 янв 2025

Комментарии • 74

  • @worksmart8166
    @worksmart8166 6 месяцев назад +15

    Now a days im a serious follower of yours.
    Can you teach about how to add
    1. Payment process on Framer
    2. Explanation about nested component
    3. Useage of form and mailchip
    4. E-commers or shopify with Framer
    5. I dont know about this component name but i explain, if we move something it will move and settle another place. Click carrom
    Please make these video❤❤❤

    • @feelcollins4358
      @feelcollins4358 6 месяцев назад +1

      number 5 is a called drag-and-drop component

    • @LouisDole
      @LouisDole 6 месяцев назад +1

      he already made a video about Forms and its useage 👍

  • @HOLYBOY.
    @HOLYBOY. 6 месяцев назад +7

    Please build a full 3d website

  • @mr.chinaski2613
    @mr.chinaski2613 6 месяцев назад +1

    Just as awasome content as always!

  • @david_d-_-b_in
    @david_d-_-b_in 6 месяцев назад

    Another awesome video, Nandi! I'm learning a lot with you. Thanks for this content! 👍

  • @Krizzoa
    @Krizzoa 6 месяцев назад +1

    im loving the framer more than the webflow and why there are no any structured courses or playlist to follow from basics to advance please rearange the videos into a course like structure from basics to advance

  • @notdoshi.1404
    @notdoshi.1404 6 месяцев назад +2

    This is sooo coooll!!!🤯🤯🤯🤯

  • @Sefko1995
    @Sefko1995 5 месяцев назад +1

    More of this bro im really motivated by you

  • @kencarter16
    @kencarter16 6 месяцев назад +1

    Framer on top 😤

  • @McPhemmy
    @McPhemmy 4 месяца назад +2

    I’ve got an issue when I did the loop effect. The rotate orientation was bad. For that 3D rotation in Y axis, it was rotating in a straight stack instead of in that 3D curve effect. I really do hope you understand my explanation here😂

    • @EdwardAustin
      @EdwardAustin 4 месяца назад +1

      Same issue. Ever figure it out?

    • @McPhemmy
      @McPhemmy 4 месяца назад

      @@EdwardAustin Oh no! I’ve not. Have you been able to figure it out either? I tried everything possible but it wasn’t just working for me so I left it and I’m now focusing on some other tasks at the moment.

  • @matthewgibson8309
    @matthewgibson8309 6 месяцев назад +1

    Awesome tutorial!

  • @worksmart8166
    @worksmart8166 6 месяцев назад +1

    This is also awesome video like always🎉

  • @simon.petrus.777
    @simon.petrus.777 5 месяцев назад +1

    super amazing!!!!

  • @almighty.saumya
    @almighty.saumya 6 месяцев назад +1

    I am folowing this tutorial however this problem at 10:03 -
    How do I copy this 3d component to my project file where I am following this tutorial ?
    (Edit) - Okay I figured it out. Once I drag it into the remix canvas I can copy from there.

    • @framer.university
      @framer.university  6 месяцев назад +1

      Hey mate! Sorry I wasn’t clear. Glad u figured it out :)

  • @hadiskhalili8915
    @hadiskhalili8915 6 месяцев назад +1

    Amazing😍🌸

  • @javadobe-sol
    @javadobe-sol 6 месяцев назад

    Amazing Nandi

  • @malcolmvanhilten125
    @malcolmvanhilten125 6 месяцев назад +1

    Brilliant !

  • @abhaykumar_v
    @abhaykumar_v 6 месяцев назад

    Any way to do a horizontal scroll section?

  • @david_d-_-b_in
    @david_d-_-b_in 6 месяцев назад

    One thing I noticed is the dragging direction is inversed from the original inspiring website. Is it possible to reverse the drag direction? I mean, right now we are dragging rowards left and the images move to the right.

  • @yashraut2355
    @yashraut2355 5 месяцев назад +1

    1:37 sir please explain what have u done it would be great

    • @framer.university
      @framer.university  5 месяцев назад

      I pressed ⌥ + ⌘ + Enter to wrap the frame in a stack.

    • @yashraut2355
      @yashraut2355 5 месяцев назад

      @@framer.university sir I am new to framer can u elaborate a bit it would be great

    • @yashraut2355
      @yashraut2355 5 месяцев назад

      ​@@framer.university siri am new to framer so can u elaborate a bit it would be great

    • @yashraut2355
      @yashraut2355 4 месяца назад

      ​@@framer.university sir I am new to framer please can u make a sperate long video for students like me who are unaware of the website feacture

  • @DontBlinkZA
    @DontBlinkZA 4 месяца назад +1

    hi nandi, awesome stuff, i used your video and it work last night the next day i did one change to the the page and it broke, its like the whole 2D group is spinning on the y and not locked to it the same way, i have checked everything, watched your video 2 times and made it in other projects, possible framer made a change or something?

  • @Nirperetz9
    @Nirperetz9 6 месяцев назад +1

    First of all thanks. This is AMAZING!
    Second, If i want that when the user press the image it will make the background dark and the photo will scale big and normal, what would be the best and fast process of doing it? Thanks again you're the best in the framer field! :)

    • @framer.university
      @framer.university  6 месяцев назад +1

      Thank you so much for the kind words mate :)
      Yes, this would be possible. You would need a more complex component structure with variants and interactions. I’ll explore this :)

  • @SunriseOverEverest
    @SunriseOverEverest 6 месяцев назад

    Diving into another great tutorial! Cheers! Nandi any chance for tutorial about page router with page transition like animation covering viewport with dedicated page title? Very popular recently... one more thing - your tutorial on page intro animation was great plus the cookies option...but if i have delayed animation in hero (after intro) there is nothing for that delayed time period (because of the cookie settings to not show in current session)... any workaround to shorten the delay if the cookie is present? AI doesn't really help in case of Framer restrictions.

  • @zairelrhawk5924
    @zairelrhawk5924 5 месяцев назад +1

    Can you suggest me how can i put Videos in the image frames?..... really appreciate your feedback......your tutorials are always on the next level 👌👌

    • @framer.university
      @framer.university  5 месяцев назад +1

      Thanks for the kind words :)
      You can grab the video component from the insert panel, and place it within the image frame, set it to absolute position, pin it to all sides with 0 value.

    • @zairelrhawk5924
      @zairelrhawk5924 5 месяцев назад

      ​@@framer.universityThank you so much for your help! 🙌 I'm new to Framer, so I'm still getting the hang of things, but your instructions were incredibly helpful. 😊 Thanks a lot! Looking forward to seeing more amazing videos from your channel. 🎥✨

  • @1982stevied
    @1982stevied 6 месяцев назад +1

    Excellent Tutorial, is it possible to have the images clickable so you could click on one and it take you to a section lower down?

    • @framer.university
      @framer.university  6 месяцев назад +1

      Yes! You can add scroll sections to sections on your site, and then link the cards to those sections. So on click it will take you down the page.

  • @rafafrances
    @rafafrances 5 месяцев назад +1

    Just to let you know that you are become my mentor

  • @robertoazmitia6379
    @robertoazmitia6379 14 дней назад

    Does this allow us to add more than 7 arms?

  • @thothomoto803
    @thothomoto803 6 месяцев назад +1

    Thank you for this Video, but how does it behave responsiveness wise? how does it look or work on an iPhone?:)

    • @framer.university
      @framer.university  6 месяцев назад

      works perfectly! check the demo on your phone :)

  • @danherzl
    @danherzl Месяц назад

    Nandi, thank you for this amazing tutorial, it gave me an interesting idea to complement my project. I thought about creating these animated cards, without too much of a 3D effect, but when hovering over the card, it would slightly increase in size and show a 'play' button in the center of the card. In the background of the HERO section, the background would activate a video with a certain opacity. So every time the mouse hovers over the card, the video would appear in the hero background. Imagine cards of tourist places with videos of those locations playing in the background. How can I do this?

  • @thothomoto803
    @thothomoto803 5 месяцев назад +1

    Hello Nandi! First of all, thank you for all your framer tutorials!🙏 I wanted to ask if the pictures are or can be clickable? Can you link new pages to the pictures?

    • @framer.university
      @framer.university  5 месяцев назад

      Hey hey! Thanks a lot for the kind words. Im glad my videos are helping :)
      Yes, in fact you can make any frame clickable in Framer. Just select the frame, go to the right panel, and towards the top, you'll see the link section where you can add the link.

    • @thothomoto803
      @thothomoto803 5 месяцев назад

      respectively can i let the carousel rotate but still link the pictures to other pages? bit stuck here😅

    • @thothomoto803
      @thothomoto803 5 месяцев назад +1

      @@framer.university Thanks for the fast respose:) I already tried to just link the pictures but unfortunately I think Framer does not handle to keep the colliders for the link in the right position while rotating? Are you sure it should work without any problems? Many Thanks in advance!!!

    • @framer.university
      @framer.university  5 месяцев назад

      @@thothomoto803 yes you're right. in combination with this 3D look component, links might not behave as expected (also because of the heavy transform in 3D). in that case, i'm sorry to say to you might not be able to add links that are properly clickable to these images.

  • @adammann42
    @adammann42 6 месяцев назад

    Any chance you could make a video about Interactions? It appears on the top of the side panel when I'm editing a component, but haven't been able to figure out how to use it, or even what it does. I can't find any documentation about it anywhere!

    • @framer.university
      @framer.university  6 месяцев назад

      Hey! You can use it to connect different variants to animate between them on various triggers.
      Here's an intro to the feature (lmk if it helps):
      x.com/learnframer/status/1797642783685242963

  • @Spagget_
    @Spagget_ 6 месяцев назад +1

    The carousel isn't visible after publishing the website. How can I fix this?

    • @framer.university
      @framer.university  6 месяцев назад

      Have not encountered this issue. Did you follow every step?

  • @jazilatunnajwa-ku1ss
    @jazilatunnajwa-ku1ss Месяц назад +1

    is it possible to make exactly like this on webflow?

    • @framer.university
      @framer.university  Месяц назад +1

      you're asking under the wrong channel hahah. sorry, i really don't know.
      (use framer :P)

  • @-_SamsulHadi
    @-_SamsulHadi 6 месяцев назад +1

    its realy cool nandy, nice work!🔥

  • @MonHubTV
    @MonHubTV 6 месяцев назад +2

    ❤❤❤

  • @BluezKlue
    @BluezKlue 4 месяца назад +1

    So I logged back in and it’s all messed up.. how does this happen lol

  • @moezusy
    @moezusy 6 месяцев назад +1

    i run a cleaning business, how can i implement this to my website, its so cool

    • @framer.university
      @framer.university  6 месяцев назад +1

      Follow the tutorial and remake it on your site.
      You can find a remix link in the description.

    • @suhailmalik6785
      @suhailmalik6785 6 месяцев назад

      I can do this for you