Create PARALLAX SCROLL EFFECT In Figma | Figma Tutorial

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

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

  • @kev16
    @kev16 8 месяцев назад +12

    @10:10 You can drag and select multiple prototype arrow paths. You can hold shift to select even more. This Dave's you time from doing one at a time

  • @kingarasan2004
    @kingarasan2004 7 месяцев назад +3

    It is an amazing tutorial

    • @pixxelex
      @pixxelex  7 месяцев назад +1

      Thank you!

  • @nataliafurca6278
    @nataliafurca6278 9 месяцев назад +3

    Love it! Very helpful, just what I was looking for, thank you! ❤

    • @pixxelex
      @pixxelex  9 месяцев назад

      Glad it was helpful!

  • @kausarshaikh1844
    @kausarshaikh1844 2 месяца назад

    Tried this out just now it hardly takes an hour but trust me the results are ammmaazinggggg🤯😎

  • @abdulrehman-ly7dw
    @abdulrehman-ly7dw 9 месяцев назад +2

    You solved my doubt in seconds❤

    • @pixxelex
      @pixxelex  9 месяцев назад

      Glad it helped you

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

    Tip: Use grid view may seems situational but it's VERY useful!.. specially if you're new.....

  • @emma966
    @emma966 8 месяцев назад +1

    very helpful, thank you

    • @pixxelex
      @pixxelex  8 месяцев назад

      Glad it was helpful!

  • @Titan0_7
    @Titan0_7 9 месяцев назад +1

    THANKS BRO
    U GAVE ME AN IDEAA TO TEST MY SKILLS

  • @SaimorAlam
    @SaimorAlam 13 дней назад

    Awesome

  • @DutchBomberman
    @DutchBomberman 8 месяцев назад +1

    Very helpful

    • @pixxelex
      @pixxelex  8 месяцев назад

      Glad it helped

  • @nedaashraf2423
    @nedaashraf2423 8 месяцев назад +1

    Great

    • @pixxelex
      @pixxelex  8 месяцев назад

      Thank you!

  • @ARUN000FF
    @ARUN000FF 7 месяцев назад +2

    i found new figma legend bro love you

  • @angelacalvin5790
    @angelacalvin5790 9 месяцев назад +13

    I want to follow this but I don't understand the separating the foreground and background in AI. The layers are not seperate like what you have in the tutorial.

    • @009hawks
      @009hawks 8 месяцев назад +3

      Thats a nice question but you can ungroup all the layers in AI, then select your desired layer copy it ctrl +C and then paste ctrl + V directy to figma, and repeat this process until you get all your desired layers seperated.

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

      ​@@009hawks that's a lot or unnamed groups and layers ! How can i separate the?🥲

    • @NehalGadkar-v4j
      @NehalGadkar-v4j 14 дней назад

      @@009hawks HI please drop your discord link

  • @daferichards
    @daferichards 10 месяцев назад +3

    Wonderful demonstration. Thank you for the tutorial. Could you link me to where you got the image and how you separated the background?

    • @pixxelex
      @pixxelex  10 месяцев назад +2

      Thank you!
      Please check the description for the image link and I have used Adobe Illustrator to remove the background.

    • @snapback9221
      @snapback9221 2 месяца назад

      @@pixxelex
      Is there a tutorial on how you did this

  • @greensnek
    @greensnek 10 месяцев назад +2

    Great demonstration

    • @pixxelex
      @pixxelex  10 месяцев назад

      Thank you!

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

    need more effect work, great 💣

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

    that's amazing! thank you, very clear! great job ;-)

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

      Glad it helped!

  • @lemandadashova
    @lemandadashova 2 месяца назад

    Perfect!🤩

    • @pixxelex
      @pixxelex  2 месяца назад +1

      Thank you!

  • @vago9308
    @vago9308 8 месяцев назад +1

    Thank you, sir

    • @pixxelex
      @pixxelex  8 месяцев назад +1

      Welcome!

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

    Its amazing 😊
    Good job

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

      Thank you so much!

  • @samirghosh9049
    @samirghosh9049 3 месяца назад

    Awesome work!

    • @pixxelex
      @pixxelex  3 месяца назад

      Thanks a lot!

  • @monjurulislam9695
    @monjurulislam9695 10 месяцев назад +1

    ❤❤Great! I appreciate for it. Thanks!❤❤

    • @pixxelex
      @pixxelex  10 месяцев назад

      Glad you liked it

  • @mauriciosanchez3655
    @mauriciosanchez3655 7 месяцев назад

    ¡Genial!

  • @King_bob_07
    @King_bob_07 10 месяцев назад +1

    Nice tutorial ❤

    • @pixxelex
      @pixxelex  10 месяцев назад

      Thank you! 😊

  • @cathy4700
    @cathy4700 3 месяца назад

    Thank you so much!

    • @pixxelex
      @pixxelex  3 месяца назад

      You're welcome!

  • @mojito1216
    @mojito1216 10 месяцев назад +2

    Vamos❤

  • @star-devil9157
    @star-devil9157 9 месяцев назад +1

    Best video of the day... ❤

    • @pixxelex
      @pixxelex  9 месяцев назад

      Thank you ♥

  • @stefanmaurer8536
    @stefanmaurer8536 8 месяцев назад

    You can press and hold the space bar while moving elements around without throwing them out of the frame.

  • @UXDEVIKA
    @UXDEVIKA 8 месяцев назад +1

    damnnn😍😍😍

  • @suniljadhav1889
    @suniljadhav1889 10 месяцев назад +1

    nice

  • @NehalGadkar-v4j
    @NehalGadkar-v4j 17 дней назад

    Bro please drop this figma file if possible , this is the just masterpiece which i don't wanna miss

  • @Craftism
    @Craftism 3 месяца назад

    That's facking Awesome 🍪

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

    Awesome video but what tool was used in creating the different individual elements? Like are there tools that be used to remove the whole background and leave the moon?? Or the other trees? You get my question right?

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

      I have used the Adobe Illustrator to separate the background.

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

    Loved this... But can someone help me to publish this as a dedicated website pls

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

    Can you please do it a lit bit slowly?, thanks for the tutorial !

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

    Thanx Bro

  • @truongbao-cn3uk
    @truongbao-cn3uk 2 месяца назад

    Please tell me which website did you get these beautiful photos from?

  • @coral.that.idiot.
    @coral.that.idiot. 9 месяцев назад

    Thank you! How about on scroll ?

    • @pixxelex
      @pixxelex  9 месяцев назад

      Welcome! It's just a prototype

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

    guys how do you separate the background and frontground of the image

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

    Can u plz tell how can u seperate all ovjects like moon mountain trees plz reply

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

      Using Adobe Illustrator

  • @BigRobAustria
    @BigRobAustria 9 месяцев назад

    Show love and subscribe. Thank you. Quick question is it possible to implement this into Wordpress (elementor) or better done without elementar or other page builders. Just wondering… thank you 😊

    • @pixxelex
      @pixxelex  9 месяцев назад

      Yes, you can implement into WordPress using page builders.

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

    Hi, where did you get these images? Also, how did you separate the foreground and background?

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

      You can get these images from Freepik and I have used Adobe Illustrator to separate the background.

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

      @@pixxelex Thank you!

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

    How did you make part of the paralloax text to go behind the tree

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

      You need to separate the background of the image

  • @oke-kk4he
    @oke-kk4he 9 месяцев назад +1

    is scroll and drag is samething?

    • @loraui
      @loraui 9 месяцев назад +3

      No, that's what I was going to ask, about how can I do it with scrolling. Because it's different. To drag is to click and move the cursor and scrolling would be using the mouse scroll up and down

  • @DaveBraunger
    @DaveBraunger 9 месяцев назад

    Very cool! How would you get this to html?

    • @pixxelex
      @pixxelex  9 месяцев назад

      Thank you! and you have to code it manually

  • @ManhwaScans976
    @ManhwaScans976 7 месяцев назад

    Image should be downloaded in which format

    • @pixxelex
      @pixxelex  7 месяцев назад

      Download the Adobe Illustrator file

  • @BowieShum-o7y
    @BowieShum-o7y 5 месяцев назад

    Do you have a link to that background asset you are using in this tutorial?

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

      Check the description for the asset link

  • @Ziyechhdzub
    @Ziyechhdzub 2 месяца назад

    can anyone tell me how to seperate element from pic ?

  • @leanstrong755
    @leanstrong755 8 месяцев назад

    btw how to separate the image from its background, help me out in new to this.

    • @pixxelex
      @pixxelex  8 месяцев назад +1

      I've used Adobe Illustrator to separate the background

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

    How to separate the background and foreground?

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

      You can use Adobe Illustrator to separate the background

  • @Titan0_7
    @Titan0_7 9 месяцев назад

    please what did u use to remove the background

    • @pixxelex
      @pixxelex  9 месяцев назад

      I have used Adobe Illustrator to remove the background

  • @msj8285
    @msj8285 8 месяцев назад

    Sweeeet

  • @Gorilla_brown786
    @Gorilla_brown786 9 месяцев назад

    Bro how did you separate the image from its background without the background being cut at 0:19? Please explain.

    • @pixxelex
      @pixxelex  9 месяцев назад

      I've used Adobe Illustrator for removing the background

    • @Gorilla_brown786
      @Gorilla_brown786 9 месяцев назад +1

      @@pixxelex Bro please explain in a video i need it. It's a request from your subscriber.

    • @pixxelex
      @pixxelex  9 месяцев назад

      Just copy the foreground layers (inside Adobe Illustrator) and paste them inside the Figma. Same with the background layers.

  • @deekshangree2323
    @deekshangree2323 10 месяцев назад

    From where did you get these pictures
    Where can I search for?

    • @pixxelex
      @pixxelex  10 месяцев назад

      Check the description, I have given the image link

  • @fatine____3901
    @fatine____3901 2 месяца назад

    I did what you did step by step but it doesn't work 😢

    • @pixxelex
      @pixxelex  2 месяца назад

      Please try once again. It should work.

  • @GreenDevBabe
    @GreenDevBabe 3 месяца назад

    This is NOT a Figma tutorial because I must to change and save images in Photoshop

  • @easymathlearnings
    @easymathlearnings 9 месяцев назад

    Your tutorial is great and I've learned many new things. But please use your own voice and explain all the things. For example you're telling what to do with the next frame but you're not explaining why we have to make changes in the previous frames.
    (And also the AI voice is annoying)

    • @pixxelex
      @pixxelex  9 месяцев назад

      Thank you so much for your feedback. Will try to add my own voice in the future videos.

  • @krsn_cp
    @krsn_cp Месяц назад +1

    Ai voice isn't it?

  • @NIK-xs3bl
    @NIK-xs3bl 5 месяцев назад

    It's on drag not a scroll tutorial for that too

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

      Yeah, it's just a prototype

  • @deekshangree2323
    @deekshangree2323 10 месяцев назад

    How to seperate BG and foreground

    • @pixxelex
      @pixxelex  10 месяцев назад

      You can use Adobe Illustrator

    • @deekshangree2323
      @deekshangree2323 10 месяцев назад

      thank you
      @@pixxelex

    • @deekshangree2323
      @deekshangree2323 10 месяцев назад +1

      Can you post a video on it
      @@pixxelex

  • @mottoprint
    @mottoprint 8 месяцев назад

    Get some premium AI voice to narrate your videos. Or a different one....this free one is overused and fatigued to death. Other than that, thanks.

    • @pixxelex
      @pixxelex  8 месяцев назад +1

      Thank you for your suggestion