HTML 및 CSS로 애니메이션 콘텐츠 자리 표시자 만들기

에 대한 이전 기사와 같은 정신으로 이 게시물에서는 HTML 및 CSS를 사용하여 웹 프로젝트에 대한 콘텐츠 자리 표시자를 만드는 방법을 보여줍니다.

아무 것도 표시하지 않는 것보다 나중에 로드된 데이터로 대체될 애니메이션을 표시하여 데이터베이스에서 데이터 검색과 같이 백그라운드에서 어떤 일이 진행되고 있음을 사용자에게 알리는 것이 좋습니다. 페이지가 깨졌거나 특히 연결이 약한 사용자에게 문제가 있습니다.

최신 웹 트렌드 내에서 선택할 수 있는 다양한 애니메이션 중에서 콘텐츠 자리 표시자는 표시할 콘텐츠에 가장 가까운 모양을 전달하는 애니메이션을 표시하므로 더미 중 최고인 것 같습니다. 유튜브, 인스타그램, 페이스북과 같은 주요 웹사이트에서 볼 수 있는 것처럼 텍스트 단락에서 콘텐츠 카드에 이르기까지 다양한 유형의 데이터를 배치할 수 있습니다.

애니메이션 콘텐츠 자리 표시자 만들기에 대해 알아보겠습니다.

자리 표시자 애니메이션의 구조는 두 개의 div 블록으로 구성됩니다. 즉, 배경이 더 어두운 애니메이션의 래퍼 역할을 하는 상위 블록과 상위 블록에 상대적으로 위치하는 하위 블록이 더 밝은 색상의 그라데이션 배경이 있는 상위 블록으로 구성됩니다. 무한히 애니메이션되어 부모의 왼쪽에서 보이지 않는 곳에서 부모의 오른쪽으로 보이지 않는 곳으로 이동합니다.
아래는 애니메이션된 자리 표시자의 데모입니다.


다음은 자리 표시자 애니메이션의 구조에 대한 미리보기입니다.


자리 표시자 애니메이션의 템플릿은 다음과 같습니다.

<div class="load-wraper">
    <div class="activity"></div>
</div>

그리고 자리 표시자 애니메이션에 애니메이션을 적용하는 스타일시트.

.load-wraper{
    position: relative;
    height: 100%;
    width: 100%;
    background-color: rgb(211,211,211);
    z-index: 44;
    overflow: hidden;
    border-radius: 5px;
}
.activity{
    position: absolute;
    left: -45%;
    height: 100%;
    width: 45%;
    background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
    background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
    background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
    animation: loading 1s infinite;
    z-index: 45;
}

@keyframes loading {
    0%{
        left: -45%;
    }
    100%{
        left: 100%;
    }
}

애니메이션을 더 부드럽게 만들려면 자식 블록(.activity)이 가능한 한 넓어야 합니다. 여기에서 너비는 부모 전체 너비의 45%입니다.

이 시점에서 애니메이션된 자리 표시자 블록이 완료되었으며 구현하기만 하면 됩니다.

남은 것은 콘텐츠 카드 레이아웃 블록의 와이어프레임 내에 자리 표시자를 배치하여 애니메이션 자리 표시자가 작동하는 모습을 보는 것입니다.

이에 대한 예를 보여드리겠습니다.

카드 구성 요소의 애니메이션된 자리 표시자입니다.

위 카드의 HTML은 다음과 같습니다.

<div class="card">
    <div class="card-image">
        <div class="load-wraper">
            <div class="activity"></div>
        </div>
    </div>
    <div class="card-content">
        <div class="card-text">
            <div class="load-wraper">
                <div class="activity"></div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-image">
        <div class="load-wraper">
            <div class="activity"></div>
        </div>
    </div>
    <div class="card-content">
        <div class="card-avatar">
            <div class="load-wraper circular">
                <div class="activity"></div>
            </div>
        </div>
        <div class="card-avatar-text">
            <div class="load-wraper">
                <div class="activity"></div>
            </div>
        </div>
    </div>
</div>

카드에 스타일시트 추가하기:

.card{
    margin: 20px;
    height: 260px;
    width: 400px;
    position: relative;
    float: left;
}
.card-image{
    height: 200px;
    width: 400px;
    position: relative;
}
.card-content{
    margin-top: 20px;
    min-height: 40px;
    display: flex;
}
.card-avatar{
    width: 40px;
    float: left;
    flex: none;
}
.card-avatar-text{
    margin-left: 20px;
    float: left;
}
.card-content, .card-text, .card-avatar, .card-avatar-text{
    height: 40px;
    position: relative;
}
.card-content, .card-text, .card-avatar-text{
    width: 100%;
}
.circular{
    border-radius: 50%;
}

웹 프로젝트에서 애니메이션 자리 표시자를 사용하여 창의력을 발휘하십시오.