[피그마] 흐르는 텍스트 marquee 효과 만들기
Vložit
- čas přidán 11. 09. 2024
- [피그마] 흐르는 텍스트 marquee 효과 만들기
marquee 효과애 대해 살펴보겠습니다.
HTML의 marquee 태그가 있습니다. marquee는 움직이는 글자와 그림 만드는 태그입니다. 글자나 사진, 아이콘 등을 상하좌우로 움직이는 연출을 하고 싶을 때 사용합니다. HTML 페이지에서 상당히 쉽고 빠르게 애니메이션을 만들수 있는 태그이다.
적용 사례 웹사이트
www.awwwards.com/
www.gemnote.com(흐르는 텍스트 효과)
regrub.me/(텍스트와 사진을 활용)
www.highsnobie...
studio375.it/s... 애니메이션과 반전을 활용)
sopsyety.io(국내 사례)
0:48 Marquee 적용 웹사이트 사례
3:08 디자인 하기
3:45 shaper 플러그인
6:02 컴포넌트 세트로 만들기
6:20 프로토타이핑 설정
-----------------------------------------------
📙 이토록 쉬운 피그마 클래스 product.kyobob...
👋 강의 및 협업 문의 : lucymygirl@naver.com
-----------------------------------------------
#피그마로흐르는글자만들기 #figma #피그마사용법 #피그마 #인터랙티브컴포넌트 #프로토타이핑 #마퀴효과 #marqueetext #롤링텍스트 #피그마로흐르는글자만들기
-----------------------------------------------------------------------------------------------
루씨의 UXUI 디자인 채널입니다.
디자이너를 꿈꾸는 대학생, 취업 준비 중인 디자이너를 위한 기초적인 툴 강의를 하고 있습니다. 다양한 제휴(디자인 툴 리뷰, 디자인 책 리뷰), 강의 요청, 궁금한 부분 있으면 댓글 또는 메일(lucymygirl@naver.com)로 해주세요.
영상이 도움 되셨다면 구독,좋아요 부탁 드립니다!
Hello ~
Welcome to The UXUI Design Channel.
This channel offers UXUI design, Figma, Photoshop, Illustrator, HTML, CSS, data driven , GA.
I'm interested in design tool review, design book review ... and more fun reviews.
Contact me: lucymygirl@naver.com
Thanks for Watching! Happy Designingggggggggg ; )
--------------------------------------------------------------------------------------------
Copyright ⓒ 루씨의 UXUI 디자인. All rights reserved.
본 영상으로 강의, 영상 추출, 참고 영상, 무단 전재, 재배포, AI 학습으로 사용을 금지합니다.
![How to teach yourself about UI design [Figma]](http://i.ytimg.com/vi/cACNZVk9sTQ/mqdefault.jpg)
![How to teach yourself about UI design [Figma]](/img/tr.png)
예시 보여주고 강의로 이어지는 흐름이 너무 좋네요:) 소중한 정보 감사합니다!
영상이 도움이 되셨다니 다행이에요^^ 시청해 주시고 댓글 감사합니다!!!
피그마랑 친해지는 중인데 루씨님 덕분에 더 가까워질 수 있을 거 같아요, 유용한 영상 정말정말로 감사드립니다!!
피그마랑 친해지는데 도움이 되었다니~ 와우~~ 댓글 너무 감사해요^^ 영상 따라하면서 피그마에 빠져보세요. 응원합니다!!!
안녕하세요. 좋은 정보로 피그마 공부에 많은 도움이 되고있습니다. 한가지 궁금한게 이렇게 만든 파일을 네이버 스마트스토어 상세 페이지에 사용 가능 할까요?
안녕하세요
네이버 스마트 스토어에 코드 삽입이 가능해서 될꺼 같아요. 그런데 제가 해본건 아니라 확실하지 않아요^^;;
영상 시청해 주셔서 감사합니다!!
안녕하세요 :) 선생님 요즘 uiux 디자인 및 아임웹 홈페이지 제작을 배우는
중이여서 영상 보고 문의 드립니다. 피그마에서 보여주신것처럼 만들고 코드를 가져와서 홈페이지에 적용하면 되는걸까요?감사합니다😊
안녕하세요 필요한 부분의 코드만 복사해서 사용하세요. 아직은 코드를 그대로 사용하기는 무리가 있습니다^^ 공부하시는데 도움이 되었으면 좋겠어요~~ 응원합니다!!!!!
유익한 강의 감사드립니다 : ) 혹시 강의해주신 것과 마찬가지로 왼쪽에서 오른쪽으로 글씨가 연속적으로 흐르게 하려면 어떻게 해야할까요~? 혼자 해보려고 했는데 흐름은 만들어지는데 계속 왼쪽부분이 공백으로 뜨네요ㅠㅠ
안녕하세요~~ 두번째에서 다시 첫번째 베리언트로 인터랙션을 걸어줄때 After delay 0ms 으로 하셨나요?? 바로 가도록 해야지 끊어지지 않고 공백이 없습니다.
영상 시청해 주셔서 감사합니다^^
저 3d 캐릭터 자주 보이는데 소스인가요? 어디서 찾으셨는지 궁금해요
안녕하세요
여자 얼굴은 제 미모지입니다^^;; 아이폰의 미모지로 만들었어요.
피그마 커뮤니티에 다양한 3d 캐릭터 있습니다. www.figma.com/community/file/1138254942249677742/fluent-emoji-1
영상 시청해주셔서 감사합니다^^
안녕하세요! 정말 유용하게 따라해서 이용했어요. 혹시 10000ms 보다 더 천천히 갈 수 있게 하는 방법도 있을까요?
안녕하세요 지해님
10000ms 이 최대값입니다. 더 천천히 가게 하려면 가로 폭을 작게 해야할것 같아요.
영상 시청해 주셔서 감사합니다^^
유료 버전에서만 적용 가능할까요??
흐르는 글자를 만드는 건...피그마 무료플랜도 가능합니다.
영상 시청해 주셔서 감사해요 !!
왜 저는 전영상도그렇고 항상 애니메이션 적용이안되나요ㅜ
엇 어디가 안되나요?😍 흐르는 텍스트 만드는게 쉽지 않아요. 영상 보시면서 여러번 따라해 보세요^^ 시청해주셔서 감사합니다!!!!
개발자가 가져갈때는 어떻게 가져가나요?
앱이라던지 웹이라던지 ㅜㅜ
영상 시청해주셔서 감사합니다!!!
대부분은 웹이라면 css로 코드 구현합니다. 개발자가 프로토타이핑을 보고 알아서 구현하겠죠^^
하 저만 안돼나요 다따라했는데
안녕하세요 지후님
어디에서 잘 안될까요?? 파일 공유해 주시면 코멘트로 알려드릴께요. lucymygirl@naver.com입니다.