- Видео 157
- Просмотров 119 679
DEvS
Южная Корея
Добавлен 20 сен 2009
[WEB] nav 메뉴: 서브 메뉴와 위치 잡기 | getBoundingClientRect() 이용 | positioning sub-nav
소스코드: codepen.io/blueweber/pen/dyxQKXq
#webdesign #javascript #css
#webdesign #javascript #css
Просмотров: 28
Видео
[GSAP] ScrollTrigger: 텍스트 스크롤 애니메이션 | 스크롤트리거 | 스크롤 애니메이션 | Text Scroll Animation
Просмотров 7014 дней назад
소스코드: codepen.io/blueweber/pen/MWNVaxQ 본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau #gsap #greensock #scrolltrigger #javascript #js #animation #스크롤트리거 #가로스크롤 #horizontalscroll
[GSAP] ScrollTrigger + three.js 이미지 웨이브 | 스크롤트리거 | 스크롤 애니메이션 | Waving Image
Просмотров 40Месяц назад
소스코드: codepen.io/blueweber/pen/QWeGmEK 본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau #gsap #greensock #scrolltrigger #javascript #js #animation #스크롤트리거 #가로스크롤 #horizontalscroll #threejs
[리액트 기초] 구글 클론: Tailwind CSS | DARK / LIGHT, Responsive | Font Awesome | Google CLONE by React
Просмотров 69Месяц назад
소스코드: github.com/blueWeber/google-clone-react-tw #react #리액트 #tailwindcss #tailwind
[GSAP] 텍스트 호버 애니메이션 생성기, CSS를 JS로 묶기 | Text Hover Animation Creator
Просмотров 52Месяц назад
소스코드: codepen.io/blueweber/pen/PoMzOOp 본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau #gsap #greensock #scrolltrigger #javascript #js #animation
[GSAP] ScrollTrigger: 가로 스크롤 Horizontal Scroll | 스크롤트리거 | 스크롤 애니메이션
Просмотров 95Месяц назад
소스코드: codepen.io/blueweber/pen/LYwERJY 본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau #gsap #greensock #scrolltrigger #javascript #js #animation #스크롤트리거 #가로스크롤 #horizontalscroll
[GSAP] ScrollTrigger: invalidateOnRefresh | 스크롤트리거 | 스크롤 애니메이션
Просмотров 33Месяц назад
소스코드: codepen.io/blueweber/pen/vYoBEdm 본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau #gsap #greensock #scrolltrigger #javascript #js #animation #스크롤트리거 #clamp
[GSAP] 애니메이팅 기본 중 기본 | Animating Basics of Basic
Просмотров 44Месяц назад
GSAP Let's get animating!: gsap.com/resources/get-started/ #gsap #greensock #scrolltrigger #javascript #js #animation #스크롤트리거 #clamp
[GSAP] ScrollTrigger: clamp 설정 | 스크롤트리거 | 스크롤 애니메이션
Просмотров 44Месяц назад
소스코드: codepen.io/blueweber/pen/LYKwbgJ 본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau #gsap #greensock #scrolltrigger #javascript #js #animation #스크롤트리거 #clamp
[GSAP] ScrollTrigger로 header영역 상태 바꾸기 | Change header state by using ST | 스크롤트리거 | 스크롤 애니메이션
Просмотров 77Месяц назад
소스코드: codepen.io/blueweber/pen/abgrLrM 본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau #gsap #greensock #scrolltrigger #javascript #js #animation #스크롤트리거
[GSAP] ScrollTrigger 기초 part 3. toggle, callbacks | 스크롤트리거 | 스크롤 애니메이션
Просмотров 342 месяца назад
소스코드: codepen.io/blueweber/pen/RwzOxNJ 본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau #gsap #greensock #scrolltrigger #javascript #js #animation #스크롤트리거
[GSAP] ScrollTrigger 기초 part 2. pin, pinSpacing | 스크롤트리거 | 스크롤 애니메이션
Просмотров 572 месяца назад
소스코드: codepen.io/blueweber/pen/RwzOwwp 20:40 부분 스크롤되는 만큼 pinSpacing 높이 트리거가 고정되는 만큼 = start가 scroller-start를 만나서 부터 end가 scroller-end를 만나기 까지 거리 본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau #gsap #greensock #scrolltrigger #javascript #js #animation #스크롤트리거
[GSAP] ScrollTrigger 기초 part 1. 초기 설정, trigger, start, end, scrub | 스크롤트리거 | 스크롤 애니메이션
Просмотров 692 месяца назад
[GSAP] ScrollTrigger 기초 part 1. 초기 설정, trigger, start, end, scrub | 스크롤트리거 | 스크롤 애니메이션
[GSAP] 기초: gsap.matchMedia() 반응형 JS? | GSAP (GreenSock Animation Platform) 3
Просмотров 472 месяца назад
[GSAP] 기초: gsap.matchMedia() 반응형 JS? | GSAP (GreenSock Animation Platform) 3
[JS] 코드 중복을 줄이기 위한 노력.. 배열 | DRY (Don't Repeat Yourself) Get Used by Arrays | JavaScript
Просмотров 342 месяца назад
[JS] 코드 중복을 줄이기 위한 노력.. 배열 | DRY (Don't Repeat Yourself) Get Used by Arrays | JavaScript
[GSAP] 기초: wrap(), wrapYoyo() - gsap.utils | GSAP (GreenSock Animation Platform) 3
Просмотров 412 месяца назад
[GSAP] 기초: wrap(), wrapYoyo() - gsap.utils | GSAP (GreenSock Animation Platform) 3
[GSAP] 기초: 3D 회전 배너 gsap.timeline() | GSAP (GreenSock Animation Platform) 3
Просмотров 632 месяца назад
[GSAP] 기초: 3D 회전 배너 gsap.timeline() | GSAP (GreenSock Animation Platform) 3
[Blender] 토막상식: "F", "J" 버텍스 연결 차이 | Difference about "F", "J" connecting Vertices
Просмотров 622 месяца назад
[Blender] 토막상식: "F", "J" 버텍스 연결 차이 | Difference about "F", "J" connecting Vertices
[GSAP] 기초: Stagger Pulse | GSAP 3 기초: 펄스 효과 | GSAP (GreenSock Animation Platform) 3
Просмотров 712 месяца назад
[GSAP] 기초: Stagger Pulse | GSAP 3 기초: 펄스 효과 | GSAP (GreenSock Animation Platform) 3
[Sass(SCSS)] 공식 문서로 보는 "&" Parent Selector, 등등
Просмотров 432 месяца назад
[Sass(SCSS)] 공식 문서로 보는 "&" Parent Selector, 등등
[CSS] "동시에 여러 클래스가 붙은 요소 선택"에 대한 작은 고찰
Просмотров 283 месяца назад
[CSS] "동시에 여러 클래스가 붙은 요소 선택"에 대한 작은 고찰
Three.js Animations with Blender (feat. Mixamo Character Rigging)
Просмотров 843 месяца назад
Three.js Animations with Blender (feat. Mixamo Character Rigging)
[WEB] 사용자 커스텀 마우스 커서 Mouse Stalker (간단 버전 미완성)
Просмотров 553 месяца назад
[WEB] 사용자 커스텀 마우스 커서 Mouse Stalker (간단 버전 미완성)
[CSS] 컨테이너 쿼리 (container queries)란? 개념잡기
Просмотров 893 месяца назад
[CSS] 컨테이너 쿼리 (container queries)란? 개념잡기
PureRef: 참조(참고) 이미지들 정리 도구 (주요 단축키) | The Tool for Reference Images
Просмотров 793 месяца назад
PureRef: 참조(참고) 이미지들 정리 도구 (주요 단축키) | The Tool for Reference Images
[장황함주의] 블렌더에서 "Apply" | "Apply" in blender
Просмотров 823 месяца назад
[장황함주의] 블렌더에서 "Apply" | "Apply" in blender
본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau
본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau
본 영상은 아래 재생목록에 포함되어 있고, 내용에 따라 목록에 있는 이전 영상 내용을 먼저 알아야 이해되는 내용들이 있을 수 있습니다.. ruclips.net/p/PLjQHn5jzATkvakCnzmHZbf6gGy0H3Qhau
큰도움이 되었습니다.
감사합니다 도움이 되셨다니 다행이네요^^
07:50 main이 trigger인데, header라고 잘못 말했습니다 😣
20:40 부분 스크롤되는 만큼 == pinSpacing 높이 == 트리거가 고정되는 만큼 = start가 scroller-start를 만나서 부터 end가 scroller-end를 만나기 까지 거리
gsap.set('.box', { clearProps: 'all' }); 또는 gsap.set('.box', { clearProps: true}); 로 inline 스타일을 없앨 수도 있습니다
모델링 마무리 9:00
마우스 휠 스크롤에 대한 이쓔 처리 window.addEvent..."scroll"은 없애고, document.addEventListener('wheel', function (e) { // console.log(e.deltaY); mouse.x = e.pageX; mouse.y = e.pageY; });
나중에 몰아서 봐야징!(안봄)
주요 단축키들 ///////////////////////////////////////////////////////////////////////// ### 기본 마우스 우클릭: 메뉴 Ctrl + Z: 작업 취소 Ctrl + J: 전체 캔버스 레이어 구조 ///////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////// ### 창 조작 Ctrl + Shift + A: Always on Top 토글 Ctrl + Shift + B: 맨아래 고정 토글 - 다른 창들 보다 마우스 우클릭 드래그: 창자체 이동 Ctrl + F: 전체화면 토글 Ctrl + Shift + "+ or -": 창 자체와 전체 투명도 Alt + 1, 2, 3: 캔버스 및 찯 배경 색 (완전 투명도 있음) ///////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////// ### 캔버스 조작 마우스휠: 줌 MMB 드래그, Alt + 드래그: 캔버스 자체 상하좌우 이동 Ctrl + R: 캔버스 고정 - 캔버스 lock Ctrl + O: 캔버스 크기 최적화 Ctrl + Space: 캔버스를 창에 맞게 보기 토글 방향키 좌우: 이미지들 순서대로 각각 크게 보기 ///////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////// ### 이미지 ## 이미지 정렬 Ctrl + A: 모든 이미지 선택 Ctrl + P: 최적 정렬 Ctrl + Alt + P: Pack all and optimize ## 이미지 조작, 도구 Shift + 이미지 선택: 여러 이미지 선택 Ctrl + Up|Dn|Lft|Right: 선택한 바운더리 내에서 이미지들 각 방향별 정렬 Ctrl + Alt + Down: Normal Scale - 각각 본연의 원래 크기로 Ctrl + Alt + Up: Normalize size - 평균적인 크기대로 맞춰줌 Ctrl + Alt + Left: Normalize height - 높이를 균일하게 맞춤 Ctrl + Alt + Right: Normalize width - 넓이를 균일하게 맞춤 Ctrl + Alt + Shift + Up: Distribute horizontal Ctrl + Alt + Shift + Down: Distribute vertical 이미지 선택 후 Ctrl + 드래그: 회전 이미지 선택 후 Ctrl + Shift + 드래그: 45도씩 회전 이미지 선택 후 Ctrl + Alt + 좌우드래그: 스케일 조정 이미지 선택 후 Alt + Shift 드래그: 드래그 방향으로 이미지 flip 이미지 겹쳐있을 때 이미지 선택 후 Up 또는 Down: 위 아래 Z위치 변경 이미지 선택 Ctrl + C, Ctrl + V 이미지 선택 Shift + 드래그: 스냅 이동 이미지 선택 후 C를 누른 상태에서 마우스 드래그: 드래그 영역만큼 크롭 위 크롭된 영역 안에서 이미지 이동: V 누르고 드래그 이미지 크롭 재설정 reset: Ctrl + Shift + C 이미지 변형 재설정 reset: Ctrl + Shift + T 이미지 선택 Alt + G: 흑백화 이미지 선택 S + 클릭: 색상 추출 이미지 선택 Ctrl + Alt + Shift + 드래그: 이미지 투명도 ///////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////// # 기타 Ctrl + N: 메모 Ctrl + D: Draw /////////////////////////////////////////////////////////////////////////
시놀로지에서 도커를 실제로 사용하는 방법에 대한 영상을 찾기 어려웠는데 그러던 찰나에 이 영상을 발견했네요. 잘 보았습니다. 가능하시다면 컨테이너 매니저를 통해서 워드프레스와 같은 서비스를 실제로 만드는 방법(db 설정, 환경변수 설정 방법 등등)을 좀 더 자세히 알려주시면 감사하겠습니다!
감사합니다!
감사합니다! too
This channel is absolutely fantastic! Thank you for the amazing content.
WoW Thank you!
주인장님 영상 잘보았습니다. 혹시 검색기능은 넣을수 없을까요)
다음 API가 있는 거 같습니다.. 자세히는 확인은 못 해봤습니다! developers.google.com/maps/documentation/places/web-service/search
animation-duration: 5s; 5초간, steps(5)로 5단계...로... 1초에 한단계씩 진행됩니다.
감사합니다 이해가 잘 되네요!!!
감사합니다
내 컴퓨터 로컬에 설치하려면 Git (git-scm.com)도 설치해야 됩니다. AMD GPU 등 자세한 설치법은 github.com/AUTOMATIC1111/stable-diffusion-webui 의 Installation and Running 부분을 보시면 됩니당. 문제사항은 github.com/AUTOMATIC1111/stable-diffusion-webui/wiki 에 troubleshooting 부분을 보시면 되겠습니다.
무료 사용은 14일 트라이얼 기간 제한이 있습니다. 완전 무료로는 이와 빗슷한 Responsively를 써보시길 바랍니다. 알려주신 @weekendcode 님 감사합니다
부분 유료 같은데, 이러면 Responsively가 훨씬 나아보입니다. 오픈소스이기도 하고요.
네 좋은 정보 감사합니다! 유료인 부분으로 제작사 쪽에서 지속적인 업데이트나 기능적 개선 등에 더 신경을 쓰지않을까요? 무료라고 그렇지 않다는 건 아니지만.. 아무래도 .. 어디까지나 선택은 사용자들의 몫이겠죠!
와우
안녕하세요!
중간에 점수가 좀 낮아진 게 GPU 전력제한 때문은 아닌 거 같네요. 오롯이 CPU 테스팅이었으니. 아마 제 화면녹화 프로그램 때문이 아니었나 싶기도 하구요. 그 외에도 그때그때 상황에 따라 다를 수 있겠지요
region의 발음은 레지온이 아니라 "뤼젼"?"뤼줜"? 입니다! 🙏
설명이 잘못되었습니다. 18:45 부분에 카메라에 전달이 아니라 renderer에 전달이 되어서 render의 setSize를 통해 canvas 크기가 변경됩니다.
😆 "promo sm"
isolation이 이해도 잘 안되고 자료도 별로 없었는데, 덕분에 이해가 잘 된 거 같습니다. 감사합니다.
도움이 되셨다니 다행입니다! 감사합니다
isolation: isolate;를 주지 않았을 때 z-index: -1을 주면 body 전체 컨텍스트 아래로 내려갈 수 없는 것처럼, 특정 부모 요소에 isolation: isolate;를 주게되면 그 아래 자식 요소는 z-index: -1;를 주더라도 그 부모요소 아래로는 내려걀 수 없습니다.
URL 파라미터로 전달되는 문자열 인코딩, 디코딩은 구글에 "urlencode(), urldecode(), rawurlencode(), rawurldecode()" 라고 검색해 보시기 바랍니다.
package.json에 아래와 같이 스크립트를 추가해 사용하시면 편합니다. npm run dev, npm run build "scripts": { "build": "npx tailwindcss -i ./input.css -o ./build/css/style.css", "dev": "npx tailwindcss -i ./input.css -o ./build/css/style.css --watch", } 경로는 각자에 맞게 수정하시구요!
오 블로그에 써볼 수 있겠군요
😐
소리가 나오면서 자동재생하게 하려면 어떤 편법을 써야 될거라 생각됩니다. 똑똑한 구글님은 알고있겠죠? ㅎ
HDRI을 바로 로드에서 붙일 수가 있네요 www.gisdeveloper.co.kr/?p=12416
오 threejs
예 threejs ㅎㅎ
depth가 정해져있다면 재귀함수 아닌 중첩 for문을 통해서도 구현할 수가 있습니다. 하지만 재귀함수는 depth에 유동적이니 훨씬 효율적이구요
설치했는데 맨위에 메뉴모음(파일, 편집,선택영역 등..이있는 바가 없는데 찾는방법 좀 알려주세요
VSCode 크기를 키워보시거나 아니면 왼쪽에 삼선 아이콘을 눌러보세요~^^ 화면이 작으면 메뉴가 줄어들어서 그렇답니다.
all-h, all-v 각각의 look at의 damping 값을 100, 200 좀 큰 값으로 조절하면 부드럽게 느리게 움직이는 정도를 조절할 수 있습니다.
시놀로지 나스도 보급형, 고급형이 있는데 고급형에만 깔리는 도커같은 특정 프로그램들이 있는 걸로 압니다. 참고하세요. 그리고 노는 컴퓨터가 있으신 분들은 구글에 해놀로지(헤놀로지)라고 검색해보시면 일반 컴에 맞춰진 짜가 시놀로지 DSM을 설치하는 방법도 있습니다.
영상 올리면 초반에 화질이 안좋게 먼저 생성되어요 ㅎㅎㅎ 쪼끔 시간이 지나면 좋은 화질도 생성이 되니 나중에 한번 봐주세요 ㅎㅎ 유튜브 시스템이 그렇답니다 ㅠㅠ
360p ㅠ
내용 중에 finally { abortController = null; } 때문에 연속으로 누를 때 앞에 것들이 전부 취소가 안되고 띄엄띄엄 중단되는 현상이 발생하네요. 저 부분은 없어도 되니 참고해 주세요.
이 영상의 내용은 아래 Udemy 내용을 인용참고하였음을 알려드립니다. www.udemy.com/course/the-ultimate-react-course/
<p class="a b">test</p> p.a {color: red;} .b {color: blue;} 인 경우 b클래쓰가 나중에 붙어있지만 a클래쓰가 p.a로 명시도가 높아 a클래쓰가 적용됩니다.
소스코드 github.com/blueWeber/css-3d-basics 웹에서 찐 3D 연출은 Three.js + Blender를 깊이 공부해보시는 걸 추천드립니다.
감사합니다~
저도 감사합니다~ㅎ
dock설정> 일반에서 - 설정을 ini파일에 저장 체크박스했는데.. 폴더에 가보니 settings.ini가 생성이않되는데요? 이유를 혹시아실까요?
화질이 너무 않좋네요..보기 힘듭니다...
감사합니다. 잘봤습니다
좋은영상 감사합니다
도움이 되셨다니 저도 보람있네요! 감사합니다.
좋은 강의 감사합니다
잘 봐주셔서 감사합니다^^