JavaScriptとCSSによるアニメーションウェブサイト内容

この記事では、JavaScriptのちょうど5行とCSSのいくつかの行であなたのウェブサイトのコンテンツに視覚効果やアニメーションを追加する方法について説明します😎.
我々はすべてのWebページに視覚効果を追加するサイトの美しさを強化し、サイト内の関心のレベルを高めることを知っている.
あなたが多くを読んで興味がない場合は、コードにhttps://codepen.io/olawanlejoel/pen/wvMPXVo -リンクはこちらです.しかし、あなたが急いでいないならば、私はあなたが知っている必要があるすべてを説明します.

始める🎉
我々が必要とする最初のものは、我々が生きたいもののHTMLコードです.クラス属性を追加して、JSコードで選択できるようにしてください.
この記事については

    <div class="main">
        <h1>This is the title of this div</h1>
        <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. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

注意:このコードにはmainのクラスがあります.
第二に、私はそれが組織的に見えるように少しスタイルを与えるだろう.

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

body{
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-content: center;
}

.main{
    height: 380px;
    width: 400px;
    box-shadow: 0 0 20px 1px rgba(0,0,0,0.19), 0 0 30px 1px rgba(0,0,0,0.23);
    border-radius: 5px;
    padding: 20px;
}
.main h1{
    font-size: 20px;
    text-transform: uppercase;
}
.main p{
    margin-top: 30px;
    line-height: 26px;
}

一旦それがされるならば、我々は現在我々のJavaScriptコードを書くことを進めることができます
ステップ

機能

を作成します

クラス属性HTMLコード/項目を選択します.

クラスを追加し、関数を呼び出します.

それを退屈させないでください.

function mainAppear(){
    var mainText = document.querySelector('.main');
    mainText.classList.add('main-appear');
}
mainAppear();

注意: JSコードでは、後でCSSコードでスタイリングするのと同じ要素に新しいクラス(main-appear)を作成しました.
一度私たちは、ブームで行われます🔥🎉, しかし、もう一つ、我々はCSSコードを調整する必要があります😂.
これをHTMLコードのクラス属性に加えます

opacity: 0; 
transform: translateY(100px);   
transition: 1s all ease-in-out;

そして最後に、すべてをアニメーション化するために、あなたのJavaScriptコードで作成されたクラスを使用して通常の状態に戻す.😕 あなたは既に退屈していると思いますが、ここでは最後のコードです.

.main-appear{
    opacity: 1;
    transform: translateY(0px);
}

あなたがまだ読むことができるならば、私はちょうど適切に起こったすべてを説明します.

コード説明🔥

HTMLコード
それは絶対に理解しやすい.ちょっと我々が我々が生きたいと思っているstuffsを含むクラス属性の使用を心に留めておいてください.

CSSコード
一般的に、後でいくつかのコードを除いて、他のすべてのCSSコードは、通常のスタイリングです.
後に追加されたコードだけで数秒後にアニメーションを達成できました.
我々は、新しいクラスが呼ばれるまで最初に何も表示されないので、アニメーションのstuffsの主なクラスに0の不透明度を追加しました.
また、そのクラス内のすべてのstuffsに0.5秒の遷移を追加し、それが突然起こるので、それは非常に起こることはありませんので、それが現実に見えることができました.
他の多くのものが視覚効果を高めるために追加されます.
これに使用する変換.TranslateXを使用して垂直方向に翻訳したり、水平方向に変換したりします.
Transformプロパティを使用すると、歪み、回転、変換、またはスケーリングによって視覚的に要素を操作できます.
Transformプロパティhere. についての詳細を学ぶことができます
クール、我々はほとんど行われますが、我々はJavaScriptコードで追加された新しいクラスの移行以外のすべてを逆にする必要があります.

ジャバスクリプトコード
ここで最後のことは、我々は機能を作成する
生きたい要素のクラスを呼び出します
そして最後に新しいクラスを追加して関数を呼び出します.
これにより、アニメーションの背後にある概念を理解することによって、あなたのウェブサイト/アプリに他のアニメーションを追加することができます.
読書ありがとう!
いつものように、任意の質問や提案は、応答を残すこと自由に感じなさい!😎