テキストアニメーション5(ホバー)
マウスを重ねることにより文字列をアニメーションで装飾します。
LINK文字列としても利用できます。
UNI-01は、ここが違います!
●各機能は、設定・カスタマイズが可能です。
●各機能は、個別に追加型のオプション機能として制作されており、サイト全体、ページ全体の修正を必要とせず、複数機能の組合せ、新規機能作成・設定変更・削除にいつでも個別に対応できます。
●従来、非常に困難だった多くの機能を組み合わせて同時に利用することが、問題を独自に解決して可能になりました。
多くの機能を組み合わせてのホームページ制作が可能です。
マウスを重ねることにより文字列をアニメーションで装飾します。
LINK文字列としても利用できます。
マウスをホバーするとボックスの内容がアニメーションします。
比較的控えめなアニメーションに適しています。
マウスをホバー又はクリックするとボックスの内容が変化します。この機能はフリップボックスと呼ばれるもので、カスタマイズにも対応しておりますが、このDEMO以外にもフリップボックス機能があります。
マウスのカーソルを、任意の画像やアイコン、文字などに変更することができます。
背景にグラディエーション色を設定して変化(アニメーション)させています。
前面の画像と背景をブレンドすることもできます。
通常の使用では、クリックすると設定したページに遷移しますが、サンプルに付きクリックした場合の機能は設定していません。
マウスをホバー(重ねる)した時のアニメーションをご確認ください。
文字列を装飾します。
初回表示時のみアニメーションします。
クリックすると、設定した任意の効果音が再生されます。
マウスホーバーで再生する設定も対応しています。
表示やスクロールなどの開始時1回のみに適用されるアニメーションです。
世界中 さまざまなバーコードを生成できます。
メガメニューと呼ばれるメニュー機能です。
大手企業などでよく採用されています。
文字、アイコン、画像などをスィッチにして、表示を入れ替えます。
営業日の案内表示です。
現在時間や「営業時間外」「営業時間中」などの自動表示に対応します。
ご注意】横幅の狭いスマートフォンなどでは、3D効果が十分に機能しません。
ページ右下にダークモードの切替アイコンがあります。
ページ素材は、文字アニメーション Group2で、文字列をアニメーションで装飾します。
見た目にインパクトのあるダウンロード可能な欧文フォントのご紹介です。
会話対話型のテキスト内容の表示に適しています。
テキストを吹き出し枠にして、設定したアバターと共に表示します。
アバターやテキスト枠のアニメーション等、多くの設定項目があります。
マウスを重ねる(ホバー)すると、画像表示が拡張され、クリックすると表示が変わります。
Google driveなどに保存したファイルとの連携表示が可能です。
Driveにあるファイルを更新すると、自動的に更新されます
世界時計の表示例です。
スタッフなどMemberの紹介などによく利用されるカードです。
SNS関連のカード例ですが、アイデア次第で様々な活用が考えられます。
* サンプルにつき、ボタンはクリックしても機能しません。
* Parallax効果(視差効果)を背景に利用しています。
Parallax効果(視差効果)と呼ばれる機能です。
画面上でマウスを動かしてみてください。(スクロールではありません)
マウスの動きに合わせて動く何枚かの画像を重ねて表示しています。
アイデア次第で様々な表現が可能です。
テキストや画像などで制作されたセクションにマウスを重ねるとアニメーションします。
動きは、上下・左右・回転など様々な調整設定が可能です。
アイコンで表示されるメニューです。
NAVメニュー項目は、本サイトのページ以外にも、このページを含め設定したページの特定の段落部分や他のサイトのページなどにもLINKできます。
上下方向に分割されたビデオ上にマウスを重ねる(ホバー)ことにより、ビデオ表示が変化します。
*ボタンはサンプルにつき機能しません。
マウスをボタン上に重ねる(ホバー)ことにより、ビデオ表示が変化します。
*ボタンのクリックはサンプルにつき機能しません。
二者択一を明確にしたボタンです。
2つのボタンを一体化して制作しています。
ボタンにマウスを重ねる(ホバー)すると、設定したテキストや画像、機能などを表示します。
暗号通貨のレートを表示します。
あらゆる暗号通貨に対応します。
サンプルでは、「対JPY」で3つの暗号通貨を設定しています。
海外での制作機能に付き、英語表示となっています。
日本語表示のカスタマイズが必要な方はご相談ください。
この機能だけでは、「USD/JPY」などの現物他国通貨との為替レートは扱えません。
別機能が必要となります。
音楽Playerです。
音源として、任意のネットラジオステーションを設定することもできます、
プロジェクトの進捗状況を視覚的に表現できます。
初回表示時のみアニメーションします。
Hero sectionで、他のサイトとの差別化を計ることが簡単にできます。
光るアニメーションのボタンです。
通常の使用では、クリックすると設定したページに遷移しますが、サンプルに付きクリックした場合の機能は設定していません。
マウスをホバー(重ねる)した時のアニメーションをご確認ください。
テキストの3Dアニメーション装飾です。
マウスの動きに追従して動きます。
画像背景に、雲のアニメーション機能を設定しています。
雲は半透明の設定にして、霧のように表現しています。
画像にマウスをホバーする(重ねる)と、カードがアニメーション効果で表示されます。
アイテムを3D表示します。商品などの表示などに適しています。
多くの枚数の写真から制作します。ご希望の方は「お問合せ」ください。
写真を虫眼鏡で拡大表示します。大きなサイズの写真を用意してください。
サンプルでは、2560x1920pxのサイズの写真を使用しています。
Google社が提供する認証システムと連携した、2FA(2段階認証)が設定できます。
Cookieは、WEBの閲覧の利便性を高める機能です。
但し、Cookieの使用にはデメリットもあり、ユーザーに対して使用を明示する機能が「Cookie Consent」です。
EU圏内においては必須事項となっています。
アイテムを3D表示します。商品などの表示などに適しています。
多くの枚数の写真から制作します。ご希望の方は「お問合せ」ください。
アイテムを3D表示します。商品紹介などの表示などに適しています。
多くの枚数の写真から制作します。
写真はご自分でスマートフォンなどでも撮影可能ですが、撮影代行する専門業者も存在します。
WEB機能で写真を組み合わせることにより360°表示が可能となりますが、マウスでの操作や自動再生にも対応しています。
テキストのアニメーションです。
マウスをホバーさせることにより、BOX化された表示が変化します。
*テキストをクリックしてもサンプルにつき機能はしません。
マウスをホバーさせることにより、BOX化された表示が変化します。
*ボタンはサンプルにつき機能しません。
マウスをホバーさせることにより、BOX化された表示が変化します。
*ボタンはサンプルにつき機能しません。
Booked.jpが提供する機能と連携して、最新の天気表示をします。
テキストのアニメーション表示です。
セクション区切りとは異なり、セクション境界以外の、文章の中など任意の場所に設定できます。
色や大きさを設定で変更できます。