본문 바로가기

전체 글69

gsap 플러그인 https://gsap.com/docs/v3/Eases 플러그인쓴거 보면 power1.out이런게 있는데 사이트에 들어가서 체크하면 다양한 이징 효과를 볼수있다 Easing | GSAP | Docs & Learning"slow", "rough", and "expoScale" eases are not in the core - they are packaged together in an EasePack file in order to minimize file size. "CustomEase", "CustomBounce", and "CustomWiggle" are packaged independently as well (not in the core).gsap.com 2024. 7. 11.
quasar 사용법 https://quasar.dev/구글 폰트 임포트 폰트 https://fonts.google.com/selection/embedquasar.config.js 기본폰트 'roboto-font' 주석처리 docs>layout and grid>layout builder component메뉴에 들어가면 다양한 종류를 볼수있음 toolbar 메뉴바에 들어가는거 With Button Dropdown 스트레치가 들어가는부분               템플릿을 가져오면 라디오 박스를 체크하면 내가원하는 레이아웃을 만들 수 있다https://quasar.dev/layout/layoutq-layout view="hHh lpR fFf"> 2024. 7. 9.
vue3+quasar vue3+firebase+quasar+pinia=>뷰3와 quasar만 먼저 공부  https://quasar.dev/getting started>installation>quasar cli https://quasar.dev/start/quasar-clinpm i -g @quasar/cli npm init quasar 0. app with quasar 로 선택 (앱을 만들꺼기 때문에) 1. 폴더이름 vue-quasar-app 2. vue2(vue3 latest) vue3을 사용할꺼임 3. javascript 4. vite (비트 사용할꺼임) 5. 프로젝트 이름 vue3-quasar-app 6. vue-quasar-app (패키지 네임 - 내가 정하는거임 폴더이름이랑 똑같이함) 7. vue3 Quasar F.. 2024. 7. 4.
여러개 막대 가로 그래프 스크립트로 각각 값 불러오기 포스텔러앱에 가로막대를 보면 길이는 같고 전체값에 따라서 현재값이 표시되는 가로 막대그래프 1. 하나의 스크립트로 막대그래프 공용으로 사용 가능 2. 전체값, 현재값 각각 인라인으로 각각 넣어서 막대그래프 여러개일때도 유동적으로 변경가능3. 막대그래프가 보여질때 오른쪽으로 길어지는 에니메이션 효과 막대그래프가 보여질때 오른쪽으로 길어지는 에니메이션 효과를 css로 줄려고 했으나 생기는 문제점아래와 같이 값을 스크립트로 뿌려주는거라서 css로 적용시 값이 적용은 0에서 100%기준이라 적용이 안됨=> 에니메이션 효과는 스크립트로See the Pen 전체 값 현재값 각각 값받아와서 막대그래프에 넣어주기 by uni (@agosto) on CodePen. 2024. 7. 3.
스크롤시 헤더 색상변경 및 백그라운드 덮기 1. 스크롤시 상단 이미지 덮으면서 이동2. 상단 이미지안에 타이틀은 스크롤시 점점 오파시티3. 스크롤시 콘텐츠가헤더의 밑부분에 이면 클래스 on 붙이기 https://brunch.co.kr/@this-summer/92  See the Pen scroll 할때 header 배경색상 변경 상단이미지 덮기 by uni (@agosto) on CodePen. 2024. 7. 1.
vue3+swiper npm install swiper npm install swiper/vueSwiper와 Vue용 Swiper 패키지 설치 스타일 임포트 해주기import 'swiper/swiper-bundle.css'12345678910111213141516171819202122232425src/main.js 에 import 'swiper/swiper-bundle.css'--> template>  div>    swiper :modules="[Navigation, Pagination]" navigation pagination>      swiper-slide>        img src="https://via.placeholder.com/600x300?text=Slide+1" alt="slide1" />      /sw.. 2024. 6. 29.

티스토리툴바