분류 전체보기
-
[GSAP] scrollTo() 함수 기본 사용법Coding 2024. 6. 2. 23:06
scrollTo()GSAP에서 ScrollToPlugin을 사용해 브라우저 스크롤을 특정 위치로 부드럽게 스크롤할 수 있습니다. 우선 기본적으로 gsap과 ScrollToPlugin을 프로젝트에 불러와야합니다.cdn을 통해 불러오겠습니다. 창을 위에서 500px 위치로 스크롤 이동하려면우선 'gsap.to()' 함수를 호출하고 'scrollTo' 속성에 숫자 500을 넣어서 간단하게 이동시킬 수 있습니다.gsap.to(window, {duration: 1, scrollTo: 500}); 특정 요소로 스크롤할 수도 있습니다. 예를 들어, '#section2'라는 요소로 스크롤하려면 아래처럼 적어주면 됩니다.gsap.to(window, {duration: 1, scrollTo: "#section2"}); ..
-
[GSAP] ScrollTrigger 시작 시점 리턴 값 얻는 방법Coding 2024. 3. 5. 22:15
var myScrollTrigger = ScrollTrigger.create({ trigger: "#id", start: "top top", endTrigger: "#otherID", end: "bottom 50%+=100px", }); // ScrollTrigger 시작 지점으로 스크롤 포커스 가도록 가능 gsap.to(window, { duration: 0.5, scrollTo: myScrollTrigger.start, }); ScrollTrigger [properties] start start : Number [read-only] The ScrollTrigger's starting scroll position (numeric, in pixels). Details [read-only] The Scro..
-
[SCSS] 내 기준 유용하게 사용하고있는 scss mixin 모음Coding 2023. 7. 14. 12:11
작업하면서 유용하게 사용하고 있는 SCSS @mixin 모음입니다. 필요한 mixin이 생기면 계속 업데이트 할 예정입니다. @charset "utf-8"; /* *-------------------------------------------------------------------* | FUNCTION | *-------------------------------------------------------------------* */ @function vw($pixels) { @return ($pixels/360)*100vw; } @function grid($columns, $column) { @return percentage(1/$columns*$column); } /* *--------------..
-
[CSS] aspect-ratio 속성으로 object 비율 맞추기 (+크로스 브라우징)Coding 2023. 7. 13. 11:18
Intro 가로세로 비율을 다룰 수 있는 aspect-ratio 속성은 매우 유용한 기능 중 하나입니다. img, video, iframe, div 등 모든 태그에 사용가능합니다. 이 유용한 aspect-ratio 속성을 자세히 알아보려고 합니다. 사용방법 사용방법은 간단합니다. .element { aspect-ratio: 16 / 9; } aspect-ratio 뒤에 원하는 비율을 적어주기만 하면 됩니다. 내가 원하는 비율을 element에 정의하고 내부 object에 object-fit: cover를 넣어주면 object가 비율에 맞게 꽉 차게 보여 줄 수 있습니다. .element { aspect-ratio: 16/9; overflow: hidden; } .element img { width: 10..
-
[CSS] 이미지를 컨테이너에 맞게 사이즈 통일하는 방법 (object-fit, background ..)Coding 2023. 7. 12. 19:28
Intro 보여주고 싶은 이미지 사이즈는 정해져 있는데, 올라오는 이미지 사이즈는 제각각인 경우가 많습니다. 사용해 본 이미지 정렬방법을 정리해 봤습니다. 1. background-size 사용 제 기준에서 제일 간단한 방법입니다. 꼭 img 태그를 사용해야 하는 경우가 아니라면, 여러 브라우저 대응에도 문제없이 사용가능한 방법입니다. 이미지는 비율을 유지하고 컨테이너에 맞게 이미지를 꽉채운 후 넘치는 부분은 잘라냅니다. 넘치는 이미지의 상하좌우를 균일하게 잘라내고 이미지의 가운데 부분만 보이게 하고싶다면, background-position: center center; 위 속성을 꼭 넣어야합니다. 2. image에 position: absolute 사용 bootstrap에서 ratio helper와 ..
-
[CSS, JS] 꽃이 흔들거리는 효과 구현하기Coding 2023. 5. 19. 11:21
꽃이 바람에 흔들거리는 애니메이션을 CSS 버전과 JS 버전으로 각각 구현해 비교해보려고 합니다. 먼저 꽃 이미지를 불러옵니다. - CSS Ver. img.flower { transform-origin: center bottom; // rotate 기준을 bottom 으로 } transform-origin은 transform 속성을 사용할 때 사용한다. 초기값은 center로 transform-origin: 50% 50%;이다. transform을 사용할 요소의 기준점을 정한다. 꽃이 흔들거리는 걸 표현하려면 X는 center(50%) Y는 bottom (100%) 이어야 원하는 모양으로 나온다. | 참고 자료 | transform-origin - CSS: Cascading..
-
[CSS] Hover 하는 형제들(siblings) 스타일 적용Coding 2023. 5. 12. 17:36
마우스 오버 하는 대상 형제들한테 스타일주기 일반적으로 형제 엘리먼트에 스타일을 주려면 Javascript가 필요합니다. 하지만, Javascript없이 CSS를 사용하는 방법이 있습니다. 부모 엘리먼트의 :hover를 기준으로 아래 마우스 오버하는 자식을 제외한 형제 엘리먼트들에 스타일을 주는 방식입니다. 마우스 오버하고 있는 대상을 강조하고 싶을 때 사용합니다. .parent:hover .child:not(:hover) { /* this style affects all the children except the one you're hovering over */ } + 예제 코드 HTML 삽입 미리보기할 수 없는 소스
-
[Javascript] 카운트다운 만들기Coding 2023. 2. 15. 17:48
이벤트 페이지를 만들경우, 어떤 날짜를 기준으로 카운트다운 하는 UI를 사용할때가 많다. flip으로 넘어가는것도 아니고 단순하게 카운트 숫자만 바뀌는건데 제이쿼리 플러그인이나 라이브러리를 불러오는것도 불필요해보여서 간단하게 사용할 수 있도록 코드를 남겨본다. var countDateGetTime = new Date(2023, 4, 9, 24, 0, 0).getTime(); // 년, 월-1, 일, 시, 분, 초 var countEl = document.querySelector(".countdown-text"); var countInterval = setInterval(function() { var now = new Date().getTime(); var distance = countDateGetTime..