CSS에서 페이지 로드 시 페이드 인 효과 만들기

1. animation 속성 및 @keyframes 규칙을 사용하여 CSS에서 페이드 인 효과 생성
2. animate() JQuery 메서드를 사용하여 CSS에서 페이드인 효과 만들기

페이드 인 효과는 요소의 불투명도를 숨김에서 표시로 증가시킵니다. 선택한 요소의 불투명도는 주어진 시간에 변경됩니다.

이 튜토리얼에서는 CSS에서 페이지를 로드하는 동안 이러한 효과를 얻을 수 있는 방법을 소개합니다.

animation 속성 및 @keyframes 규칙을 사용하여 CSS에서 페이드 인 효과 생성

우리는 페이드 인 효과에 대해 조금 알고 있습니다.

이 방법은 @keyframes 규칙과 함께 animation 속성을 사용하여 페이지가 로드되는 동안 페이드 인 효과를 얻습니다. 먼저 animation 속성이 작동하는 방식을 이해합시다.

요소의 스타일이 시간이 지남에 따라 한 스타일에서 다른 스타일로 변경되면 이것이 애니메이션임을 알 수 있습니다. animation 속성은 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count 및 animation- 방향 순으로.

animation 속성을 사용하여 animation-name 및 animation-duration 속성만 지정하여 페이드 인 효과를 만들 수 있습니다. @keyframes 규칙은 선택한 요소의 CSS 스타일을 점진적으로 변경하는 데 사용됩니다.

결과적으로 애니메이션 효과가 생성됩니다. @keyframes 규칙의 animation-name 속성 값을 사용하여 점진적으로 변화하는 스타일을 적용할 애니메이션을 선택합니다.

@keyframes 규칙 내에서 to 및 from과 같은 선택기를 사용하여 스타일을 적용합니다. to 및 from 선택기는 0% 및 100%와 동일합니다.

to 선택기로 적용된 스타일은 점차 from 선택기로 적용된 스타일로 변경됩니다. animation-duration 속성으로 지정된 시간과 함께 변경이 발생합니다.

페이드 인 애니메이션을 만들기 위해 @keyframes 규칙의 선택기를 사용하여 페이지의 불투명도를 0에서 1로 변경할 수 있습니다. @keyframe 규칙의 구문은 다음과 같습니다.

@keyframes animation-name {
    keyframes-selector {
        css-styles;
    }
}

예를 들어 HTML의 p 태그 안에 일부 텍스트를 작성합니다.

CSS에서 html 태그를 선택하고 animation 속성을 fadein 2s로 설정합니다. 여기서 fadein은 animation-name이고 2s는 animation-duration입니다.

다음으로 위의 구문과 같이 @keyframes 키워드로 애니메이션 이름 fadein을 선택합니다. 첫 번째 키프레임 선택기로 0%를 쓰고 opacity 속성을 0으로 설정합니다.

유사하게, 다른 두 키프레임 선택기를 50% 및 100%로 작성하고 불투명도를 각각 0.5 및 1로 설정합니다.

여기에서 페이지가 로드될 때 불투명도가 0으로 설정되어 있으므로 처음에는 텍스트가 덜 표시됩니다. 점차적으로 불투명도가 변경되고 텍스트가 2초 이내에 표시됩니다.

따라서 animation 속성을 사용하여 페이드 인 효과를 만들 수 있습니다.

예제 코드:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

body {
    animation: fadein 4s; 
}
@keyframes fadein {
    0% {
        opacity:0;
    }
    50%{
        opacity:0.5;
    }
    100% {
        opacity:1;
    }
}

animate() JQuery 메서드를 사용하여 CSS에서 페이드인 효과 만들기

이 방법은 jQuery를 사용하여 CSS에서 페이드 인 효과를 만드는 또 다른 접근 방식에 대해 설명합니다.

jQuery의 animate() 메서드를 사용하여 목표를 달성할 수 있습니다. animate()는 선택한 요소의 스타일을 점진적으로 변경하여 애니메이션 효과를 만듭니다.

CSS 스타일을 지정하고 애니메이션의 속도를 제공할 수 있습니다. animate() 메서드의 구문은 다음과 같습니다.

(selector).animate({css - styles}, duration, easing, callback)

animate() 메서드를 사용하면 선택한 요소의 기본 스타일이 메서드에 지정된 스타일로 재정의됩니다.

데모 목적으로 첫 번째 방법에서와 동일한 텍스트를 HTML에서 사용합니다. 먼저 CSS의 body 태그를 선택하고 opacity 속성을 0으로 설정합니다.

다음으로 jQuery에서 body 태그를 선택하고 animate() 메서드를 호출합니다. 메소드 내에서 스타일의 opacity를 1로 설정하고 duration을 2000으로 설정합니다.

아래 예에서 2000은 애니메이션의 지속 시간인 2초와 같습니다. 처음에는 페이지가 로드될 때 불투명도가 0이고 2초 이내에 1로 변경됩니다.

이런 식으로 jQuery를 사용하여 페이드 인 효과를 얻을 수 있습니다.

예제 코드:

body {
    opacity: 0;
}

$('body').animate({'opacity': '1'}, 2000);

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>