テキストのスライド効果

このブログでは、CSSでテキストスライディング効果を作成する方法を学びます.

ビデオチュートリアル

閉じるこの動画はお気に入りから削除されています.それは私がこのようなコンテンツを作成する動機.

ソースコードとプレビュー

始めましょう.

<div class="slide_effect">
    <p class="slide_up">Subscribe to</p>

    <p class="slide_down">Cules Coding</p>
</div>

解説

ちょうど2つの段落を持つコンテナ.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    height: 100vh;
    display: grid;
    place-items: center;
    background-color: #202020;
    font-family: 'Roboto', sans-serif;
}

.slide_effect {
    color: white;
    position: relative;
    overflow: hidden;
    font-size: 4rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

.slide_up,
.slide_down {
    position: relative;
    opacity: 0;
}

.slide_down {
    top: -4rem;
    animation: slideDown ease 0.5s forwards;
}

.slide_up {
    top: 4rem;
    left: -1rem;
    animation: slideUp ease 0.5s forwards;
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-4rem);
        opacity: 1;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(4rem);
        opacity: 1;
    }
}

解説

CSSはリセットされ、いくつかの基本的なプロパティが設定されます.

.slide_up テキストは4レムでダウンされ.slide_down テキストは4レムで移動します.

不透明度は0に設定されます.テキストが最初に表示されないようにします.

アニメーションのキーフレームを作成中です.

アニメーションの100 %で、不透明度は1に設定されます.

また、translateY(-4rem) ( .slide_up) and トランスレーシー( 4 REM )( .さもなくば」

そしてそれです.

最終結果