CATEGORIES
제이쿼리(jQuery)는 animte() 객체를 사용한 다양한 동적 기능을 제공합니다. 그 중에서도 특히 opacity 속성이 많이 사용되는데 이를 이용해 원하는 문서 요소를 쉽고 간단하게 투명하게 만들 수 있습니다.# jQuery animate() 함수의 opacity 속성 사용하기아래는 간단한 문법 및 사용방법입니다. $('#testEle').animate({opacity: '1'}, 1000}; $('#요소명').animate({opacity: '설정값'}, 지연시간};선택 가능한 옵션으로 아래와 같이 두 가지 값을 인자로 넘겨줄 수 있습니다.! 간단한 예제코드 보기서서히 사라지거나 나타나게 하는 경우 아래와 같이 사용할 수 있습니다.@ opacity.html<span class="test">Opaci
Last Modified : 2017-12-18 07:41:46
제이쿼리를 사용하여 화면 상단으로 화면, 스크롤이 이동하는 버튼을 만들어보겠습니다.웹사이트를 방문하면 한 페이지의 콘텐츠가 매우 길 수 있습니다. 이때 상단 메뉴로 이동하거나 처음에 위치한 콘텐츠를 보고 싶을 수 있겠죠. 만약 페이지 최상단으로 할 수 있는 버튼이 있다면? 스크롤을 반복 사용하는 불편함을 없앨 수 있을 것입니다. 이런 편리한 인터페이스 방법인 Top으로 이동하는 버튼을 구현해보려합니다.# 최상단으로 이동하는 버튼 만들기방문자가 페이지 어디 위치에서든 클릭하면 최상단 위치로 스크롤이 이동하게됩니다. 이때 화면이 한번에 전환되거나 아니면 애니메이션으로 부드럽게 이동할 수 있겠죠. 아무래도 애니메이션을 구현하는 방법이 더 좋을 것 같습니다.! jquery animate() 메서드를 사용하여 구현a
Last Modified : 2019-08-06 22:00:16
CSS를 사용하는 애니메이션이 가능합니다. 이때 animation 프로퍼티를 사용할 수 있는데 계속해서 반복하는 것이 아니라 만약 마지막에 해당하는 상태를 계속 유지하려면 어떻게 하는지 알아봅니다. CSS에서 애니메이션을 구현할 때 매우 자주 사용됩니다.# CSS animation 마지막 상태 유지하기기본값으로 css의 animation은 같은 동작을 계속 반복합니다. 하지만 설정에 따라 마지막 상태를 유지할 수 있는데 이때 사용하는 설정으로 animation-fill-mode를 사용할 수 있습니다.animation-fill-mode: forwards;이와같이 animation-fill-mode에 이처럼 forwards를 적용하면 마지막에 사용된 css의 상태가 유지되게됩니다.forwards를 사용할 경우
Last Modified : 2020-10-19 09:40:12
자바스크립트에서 현재의 스크롤 위치를 원하는 엘리먼트 및 위치로 이동하는 방법을 순수 자바스크립트를 사용하여 라이브러리 없이 구현해보고자 합니다. 아래에서 자세히 알아보세요.# 자바스크립트 스크롤 애니메이션 구현하기먼저 스크롤을 이동하는 경우는 언제 필요할까요? 가장 많이 사용되는 경우는 내부 링크로 이동하는 경우가 되겠습니다. 즉 버튼을 클릭시 원하는 내부 엘리먼트로 이동할 경우죠.<a href="#target">바로가기</a><div id="target">Hi Webisfree.com</div>일반적으로 #id를 사용하여 이동하는 방법이 많이 쓰입니다. 일단 별도의 자바스크립트가 필요없죠. 다만 애니메이션 효과가 없이 즉시 스크롤이 해당 위치로 움직인다는 단점이 존재합니다.그래서 애니메이션이 있는 스크롤
Last Modified : 2020-03-23 10:14:02finish() 함수는 현재 실행되는 모든 애니메이션 효과를 중지시킬 수 있습니다. 이는 stop() 함수의 stop(true, true)와 거의 비슷하나 finish()의 경우 CSS 속성에서 사용되는 애니메이션 역시 멈추게 할 수 있어 좀 더 효과적이고 폭 넓게 사용할 수 있는 장점이 있죠.* 이 함수는 제이쿼리(jQuery) 1.9 버전에 추가되었습니다.$(선택요소).finish();finish() 함수를 클릭하면 해당 요소는 애니메이션을 중지하고 중지된 위치가 아닌 종료될 시점의 마지막 위치로 이동하게됩니다.# 예제보기<body><span id="test" style="background:#f90;display:block;width:90px;position:relative;">-> TEST BOX<
Last Modified : 2015-11-15 23:42:17
CSS를 사용하여 애니메이션 효과를 만드는 방법에 대하여 알아봅니다. 어떻게하면 애니메이션을 만들 수 있을까요?CSS3에서는 Animation을 구현할 수 있도록 animation을 속성을 제공합니다. 이 CSS 속성은 웹프론트에서 animation을 구현할 때 transition과 함께 가장 많이 사용되는 애니메이션 방법입니다. 이 방법을 사용하면 매우 쉽게 애니메이션을 만들 수 있으므로 꼭 알아두어야 합니다. 그럼 아래에서 animation 속성을 어떻게 사용하는지 자세히 알아봅니다.# CSS3 Animation 구현, animation 프로퍼티 알아보기먼저 animation 프로퍼티를 사용하는 방법입니다.animation: name delay times direction; 위 코드는 아래처럼 사용
Last Modified : 2020-10-19 09:12:26제이쿼리를 사용한 animate() 예제를 아래에 쭈~욱 만들어주세요!animate()를 사용하면서 고려할 부분은 무엇일까요?# animate() 사용시 주의점위 제이쿼리 메소드를 사용하기 이전에 animate()를 사용하는 대상의 엘리먼트에 position 속성을 추가해줘야합니다. 그렇지 않을 경우 의도와는 다르게 움직일 수 있습니다.
Last Modified : 2017-08-28 12:33:48
자바스크립트의 내장함수인 requestAnimationFrame()에 대하여 알아봅니다.# 자바스크립트 requestAnimationFrame() 메소드 알아보기자바스크립트에서 애니메이션을 구현하는 방법으로 new Date()를 사용한 타이머 함수를 만들어 사용하게 됩니다. 즉 시작 시점과 종료 시점을 직접 변수에 저장해 반복 실행하는 방법이죠.하지만 이런 방식은 여러 문제점이 존재합니다. 먼저 불필요한 콜스택(callstack)이 지나치게 많다는 점입니다. 화면에 많은 그리기 동작을 애니메이션으로 구현해도 실제로 표시 가능한 주사율에 영향을 받으므로 지나치게 높은 부하가 발생할 수 있습니다.! requestAnimationFrame()을 사용하여 애니메이션 향상하기이런 경우 필요한 방법이 바로 reques
Last Modified : 2020-03-20 21:56:40angularjs를 사용하는 경우 대부분 매우 복잡한 인터렉션 및 애니메이션 구현이 아닌 경우 입니다. 일반적으로 ReACT가 더 선호하죠~ 하지만 angularjs에서는 애니메이션을 위해 다양한 메소드를 제공하는데 이를 알려주세요.
Last Modified : 2017-08-11 01:44:04VueJS를 사용하여 CSS 트랜지션(CSS Transition) 효과를 사용할 수 있는 transition 컴포넌트에 대하여 알아보려고합니다.# Vue transition 컴포넌트란?프론트 화면을 개발할 때 애니메이션 효과를 많이 사용합니다. 이 경우 가장 많이 사용되는 방법이 바로 CSS를 사용한 방법으로 transition 스타일 속성을 사용하면 설정된 지연시간 만큼 트랜지션 효과를 구현하는 것이 가능합니다. 이를 사용해 여러가지 애니메이션 효과도 만들 수 있죠.VueJS에서는 CSS transition 효과를 더 빠르고 간단하게 구현할 수 있도록 transition 컴포넌트(태그)를 제공합니다. 아래와 같이 컴포넌트를 어플리케이션에 빠르게 추가해 사용할 수 있죠.<transition></transit
Last Modified : 2020-05-15 19:21:18