ホームページ ウェブフロントエンド htmlチュートリアル いいぞ!見事なページ切り替えアニメーション効果 [ソースコードダウンロード付き]_html/css_WEB-ITnose

いいぞ!見事なページ切り替えアニメーション効果 [ソースコードダウンロード付き]_html/css_WEB-ITnose

Jun 24, 2016 pm 12:02 PM
ダウンロード スイッチ アニメーション 効果 ソースコード

以下の例は、ページ切り替えプロセスに適用して興味深いナビゲーション効果を作成できる一連のアニメーションをリストしています。エフェクトの中には、単純なスライド動作だけの非常にシンプルなものもあれば、遠近法と 3D 変換を使用して 3 次元のダイナミックなエフェクトを作成するものもあります。

オンライン デモを今すぐダウンロード

ヒント: 最良の結果を確実に得るには、IE10 以降、Chrome、Firefox、Safari などの最新のブラウザで閲覧してください。

CSS アニメーションは、実装される効果に基づいてさまざまなグループに分類されます。ページ遷移効果を示すために、次の構造を使用します:

<div id="pt-main" class="pt-perspective">    <div class="pt-page pt-page-1">        <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>    </div>    <div class="pt-page pt-page-2"><!-- ... --></div>    <!-- ... --></div>
ログイン後にコピー

遠近コンテナの位置は相対的であり、遠近コンテナの遠近を 1200 ピクセル増加します。すべてのアニメーション効果には次のスタイルが必要です:

.pt-perspective {    position: relative;    width: 100%;    height: 100%;    perspective: 1200px;    transform-style: preserve-3d;} .pt-page {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    visibility: hidden;    overflow: hidden;    backface-visibility: hidden;    transform: translate3d(0, 0, 0);} .pt-page-current,.no-js .pt-page {    visibility: visible;} .no-js body {    overflow: auto;} .pt-page-ontop {    z-index: 999;}
ログイン後にコピー

上記の .pt-page-ontop スタイルは、一部のページ遷移効果に使用されます。つまり、あるページを別のページの上に留まらせる必要があります。 Web ページをさまざまな方向に拡大縮小し、フェードインおよびフェードアウトするアニメーション クラスとキーフレーム アニメーションを示すコード例を次に示します。

/* scale and fade */ .pt-page-scaleDown {    animation: scaleDown .7s ease both;} .pt-page-scaleUp {    animation: scaleUp .7s ease both;} .pt-page-scaleUpDown {    animation: scaleUpDown .5s ease both;} .pt-page-scaleDownUp {    animation: scaleDownUp .5s ease both;} .pt-page-scaleDownCenter {    animation: scaleDownCenter .4s ease-in both;} .pt-page-scaleUpCenter {    animation: scaleUpCenter .4s ease-out both;} /************ keyframes ************/ /* scale and fade */ @keyframes scaleDown {    to { opacity: 0; transform: scale(.8); }} @keyframes scaleUp {    from { opacity: 0; transform: scale(.8); }} @keyframes scaleUpDown {    from { opacity: 0; transform: scale(1.2); }} @keyframes scaleDownUp {    to { opacity: 0; transform: scale(1.2); }} @keyframes scaleDownCenter {    to { opacity: 0; transform: scale(.7); }} @keyframes scaleUpCenter {    from { opacity: 0; transform: scale(.7); }}
ログイン後にコピー

このデモンストレーションのために、対応するアニメーション クラスを現在のページに適用し、切り替えようとしているページ、例:

//... case 17:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromRight pt-page-ontop';    break;case 18:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromLeft pt-page-ontop';    break;case 19:    outClass = 'pt-page-scaleDown';    inClass = 'pt-page-moveFromBottom pt-page-ontop';    break; // ...
ログイン後にコピー

デモを表示するには、最初のボタンをクリックしてページ切り替え効果の完全なセットを参照するか、ドロップから特定の効果をプレビューすることを選択できます。ダウンメニュー。

これを楽しんで、さらにエキサイティングなものを作成するためのインスピレーションを得ていただければ幸いです。

今すぐダウンロード

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する Apr 03, 2024 am 08:13 AM

スマートフォンの画面に緑色の線が表示されるというトラブルに遭遇したことがある方もいると思いますし、見たことはなくても、関連する写真をインターネット上で見たことがあるはずです。では、スマートウォッチの画面が白くなってしまう状況に遭遇したことはありますか? CNMOは4月2日、海外メディアから、Redditユーザーがサムスンウォッチシリーズのスマートウォッチの画面が白くなっている写真をソーシャルプラットフォームで共有したことを知った。ユーザーは、「出発時に充電していましたが、戻ってきたらこのようになっていました。再起動しようとしましたが、再起動プロセス中も画面はまだこのままでした。」Samsung Watch スマートウォッチの画面が白くなりました。 Reddit ユーザーはスマート ウォッチを指定していません。特定のモデルです。しかし、写真から判断すると、Samsung Watch5のはずです。以前、別のRedditユーザーも報告しました

壁紙エンジンで別のアカウントにログインした後、他の人の壁紙をダウンロードした場合はどうすればよいですか? 壁紙エンジンで別のアカウントにログインした後、他の人の壁紙をダウンロードした場合はどうすればよいですか? Mar 19, 2024 pm 02:00 PM

自分のコンピュータで他人の Steam アカウントにログインし、その他人のアカウントに壁紙ソフトウェアがインストールされている場合、自分のアカウントに切り替えた後、Steam は他人のアカウントに登録されている壁紙を自動的にダウンロードします。 Steam クラウドの同期をオフにします。別のアカウントにログインした後に、wallpaperengine が他の人の壁紙をダウンロードした場合の対処方法 1. 自分の steam アカウントにログインし、設定でクラウド同期を見つけて、steam クラウド同期をオフにします。 2. 以前にログインしたことのある他の人の Steam アカウントにログインし、壁紙クリエイティブ ワークショップを開き、サブスクリプション コンテンツを見つけて、すべてのサブスクリプションをキャンセルします。 (将来壁紙が見つからない場合は、まず壁紙を収集してからサブスクリプションをキャンセルできます) 3. 自分の Steam に戻ります。

115://で始まるリンクをダウンロードするにはどうすればよいですか?ダウンロード方法の紹介 115://で始まるリンクをダウンロードするにはどうすればよいですか?ダウンロード方法の紹介 Mar 14, 2024 am 11:58 AM

最近、多くのユーザーから、115:// で始まるリンクをダウンロードするにはどうすればよいかという質問が編集者に寄せられました。 115:// で始まるリンクをダウンロードしたい場合は、115 ブラウザを使用する必要があります。115 ブラウザをダウンロードしたら、以下のエディタによって作成されたダウンロード チュートリアルを見てみましょう。 115:// で始まるリンクをダウンロードする方法の紹介 1. 115.com にログインし、115 ブラウザをダウンロードしてインストールします。 2. 115 ブラウザのアドレス バーに chrome://extensions/ と入力し、拡張機能センターに入り、Tampermonkey を検索して、対応するプラグインをインストールします。 3. 115 ブラウザのアドレス バーに「Grease Monkey Script: https://greasyfork.org/en/」と入力します。

スーパーピープル ゲームのダウンロードとインストール方法の紹介 スーパーピープル ゲームのダウンロードとインストール方法の紹介 Mar 30, 2024 pm 04:01 PM

superpeople ゲームは、steam クライアントを通じてダウンロードできます。このゲームのサイズは約 28G です。ダウンロードとインストールには通常 1 時間半かかります。ここでは、具体的なダウンロードとインストールのチュートリアルを紹介します。グローバルクローズドテストへの新しい申請方法 1) Steamストア(Steamクライアントダウンロード)で「SUPERPEOPLE」を検索 2) 「SUPERPEOPLE」ストアページ下部にある「SUPERPEOPLEクローズドテストへのアクセスをリクエスト」をクリック 3) request accessボタン、Steamライブラリで「SUPERPEOPLECBT」ゲームが確認できます 4)「SUPERPEOPLECBT」内のインストールボタンをクリックしてダウンロード

foob​​ar2000のダウンロード方法は? -foobar2000の使い方 foob​​ar2000のダウンロード方法は? -foobar2000の使い方 Mar 18, 2024 am 10:58 AM

foob​​ar2000 は、音楽リソースをいつでも聴くことができるソフトウェアです。あらゆる種類の音楽をロスレス音質で提供します。音楽プレーヤーの強化版により、より包括的で快適な音楽体験を得ることができます。その設計コンセプトは、高度なオーディオをコンピュータ上で再生可能 デバイスを携帯電話に移植し、より便利で効率的な音楽再生体験を提供 シンプルでわかりやすく、使いやすいインターフェースデザイン 過度な装飾や煩雑な操作を排除したミニマルなデザインスタイルを採用また、さまざまなスキンとテーマをサポートし、自分の好みに合わせて設定をカスタマイズし、複数のオーディオ形式の再生をサポートする専用の音楽プレーヤーを作成します。過度の音量による聴覚障害を避けるために、自分の聴覚の状態に合わせて調整してください。次は私がお手伝いさせてください

九州風神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル 九州風神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル Mar 28, 2024 am 11:11 AM

ASSASSINといえば、プレイヤーの皆さんは必ず『アサシン クリード』に登場するマスターアサシンを思い浮かべると思いますが、彼らは熟練しただけではなく、「闇に身を捧げ、光に仕える」という信条を持っています。 - アプライアンス ブランド DeepCool の冷却ラジエーターが互いに一致します。このたび、シリーズ最新作「ASSASSIN4S」が登場し、上級者に新たな空冷体験をもたらす『スーツの暗殺者 アドバンスト』。外観はディテールに富んでいます. Assassin 4S ラジエーターはダブルタワー構造 + シングルファン内蔵設計を採用しています. 外側は立方体状のフェアリングで覆われており, 全体的な印象が強いです. ホワイトとブラックの2色が用意されています.さまざまな色に合う色。

北楽湖童謡のダウンロード方法 北楽湖童謡のダウンロード方法 Mar 28, 2024 am 11:10 AM

北楽湖のわらべ歌は、子どもたちの成長に欠かせない伴奏として、その陽気なメロディー、生き生きとした絵、そして楽しく教育的な内容で、数え切れないほどの親子に愛されてきました。赤ちゃんがいつでもどこでも童謡の楽しさを味わえるように、多くの親はベイレフの童謡を携帯電話やタブレットにダウンロードして、いつでも子供に聞かせたいと考えていますが、ベイレフの童謡を保存する方法は次のとおりです。携帯電話では、このチュートリアルで詳しく説明しますので、まだ理解していないユーザーは、この記事と合わせて読んでください。 Beilehu童謡 ダウンロード童謡 マルチピクチャチュートリアル: ソフトウェアを開き、ダウンロードしたい童謡を選択してください。エディタでは「クラシック童謡」を例にしています。 2. 童謡スターの下にある「ダウンロード」ボタンをクリックします。

Quark Network Diskからファイルをダウンロードする場所_Quark Network Diskをローカルエリアにダウンロードして共有する方法 Quark Network Diskからファイルをダウンロードする場所_Quark Network Diskをローカルエリアにダウンロードして共有する方法 Mar 21, 2024 pm 03:57 PM

Quark は、便利で実用的なネットワーク ディスク ツールとして、ユーザーがお気に入りのリソースを簡単に入手できるように支援します。編集者が教えてくれるので、一緒に学びましょう! Quark Network Diskをローカル共有方法にダウンロードする方法 1. まずQuarkソフトウェアを開き、ホームページに入り、右下の[クラウドアイコン]をクリックします; 2. 次に、Quark Network Diskページで[ドキュメント]をクリックします機能; 3. 次に、ドキュメント ページに移動し、ダウンロードしたいファイルを選択し、[三点アイコン] をクリックします; 4. 最後にクリックした後、ポップアップ ダイアログ ボックスで [ダウンロード] をクリックします。

See all articles