Web Design 演習Ⅱ - 2024 | Animations

Scroll Animation

Fade In

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll="fadeIn"]を付与してください。 

            <div data-scroll="fadeIn">任意のコンテンツ...</div>
             <img data-scroll="fadeIn" src="画像ファイルへのパス">

Fade In Up

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll="fadeInUp"]を付与してください。 

            <div data-scroll="fadeInUp">任意のコンテンツ...</div>
            <img data-scroll="fadeInUp" src="画像ファイルへのパス">

Fade In Down

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll="fadeInDown"]を付与してください。 

            <div data-scroll="fadeInDown">任意のコンテンツ...</div>
            <img data-scroll="fadeInDown" src="画像ファイルへのパス">

Fade In Left

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll="fadeInLeft"]を付与してください。 

            <div data-scroll="fadeInLeft">任意のコンテンツ...</div>
            <img data-scroll="fadeInLeft" src="画像ファイルへのパス">

Fade In Right

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll="fadeInRight"]を付与してください。 

            <div data-scroll="fadeInRight">任意のコンテンツ...</div>
            <img data-scroll="fadeInRight" src="画像ファイルへのパス">

Scale Up

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll="scaleUp"]を付与してください。 

            <div data-scroll="scaleUp">任意のコンテンツ...</div>
            <img data-scroll="scaleUp" src="画像ファイルへのパス">

Rotation Right

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll="rotationRight"]を付与してください。 

            <div data-scroll="rotationRight">任意のコンテンツ...</div>
            <img data-scroll="rotationRight" src="画像ファイルへのパス">

Rotation Left

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll="rotationLeft"]を付与してください。 

            <div data-scroll="rotationLeft">任意のコンテンツ...</div>
            <img data-scroll="rotationLeft" src="画像ファイルへのパス">

Stretch

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll="stretch"]を付与してください。 

            <div data-scroll="stretch">任意のコンテンツ...</div>
            <img data-scroll="stretch" src="画像ファイルへのパス">

Falling Bound

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll="fallingBound"]を付与してください。 

            <div data-scroll="fallingBound">任意のコンテンツ...</div>
            <img data-scroll="fallingBound" src="画像ファイルへのパス">

Typography Fade X

Typography-Fade-X

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll-typography="fadeX"]を付与してください。 ※テキスト限定 

            <h1 data-scroll-typography="fadeX">テキスト...</h1>
            <p data-scroll-typography="fadeX">テキスト...</p>

Typography Fade Y

Typography-Fade-Y

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll-typography="fadeY"]を付与してください。 ※テキスト限定 

            <h1 data-scroll-typography="fadeY">テキスト...</h1>
            <p data-scroll-typography="fadeY">テキスト...</p>

Typography Crossing

Typography-Crossing

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll-typography="crossing"]を付与してください。
※テキスト限定 

            <h1 data-scroll-typography="crossing">テキスト...</h1>
            <p data-scroll-typography="crossing">テキスト...</p>

Typography Random

Typography-Random

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll-typography="random"]を付与してください。
※テキスト限定 

            <h1 data-scroll-typography="random">テキスト...</h1>
            <p data-scroll-typography="random">テキスト...</p>

Typography Shuffle

Typography-Shuffle

HTML

ダウンロードしたファイルを読み込んだ後、任意の要素に[data-scroll-typography="shuffle"]を付与してください。
※テキスト限定 

            <h1 data-scroll-typography="shuffle">テキスト...</h1>
            <p data-scroll-typography="shuffle">テキスト...</p>