この記事では主に、HTML5 ジャイロスコープに基づいて ofo ホームページに目の動き効果を実装する例を紹介します。興味のある友人は参照してください。
最近 Ofo Little Yellow Car アプリを使用したときに、スキャンすると、目が動くミニオンに変わります。これは非常に興味深いと思います。HTML5 を使用しています。
ofo eye エフェクト
エフェクト分析
エフェクトから、ジャイロスコープ イベントを使用して達成されたことを確認するのは難しくありません。
まず、HTML5 のジャイロスコープ イベントの概念をいくつか見てみましょう。
ジャイロイベントはdeviceorientation，这里主要获取事件中的alpha,beta,gammaです。
aplha
モバイル デバイスを水平に置いたときの Z 軸を中心とした回転角度。値の範囲は 0 度から 360 度です。
beta
モバイルデバイスを水平に置いた場合、X軸を中心とした回転角度、値は-180度から180度です。
gamma
モバイルデバイスを水平に置いたときのZ軸を中心とした回転角度。値は-90度から90度です。
ここでは、ベータとガンマのみを使用する必要があります。
APKを解凍して目のマテリアルを取得します:
コード実装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title>
<style>
#box{
position: relative;
width: 300px;
margin: 0 auto;
}
#face{
background-image: url(images/face.png);
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
}
#eyeLeft{
background-image: url(images/eye.png);
background-size: cover;
width: 40px;
height: 40px;
position: absolute;
top: 90px;
left: 100px;
}
#eyeRight{
background-image: url(images/eye.png);
background-size: cover;
width: 40px;
height: 40px;
position: absolute;
top: 90px;
left: 190px;
}
#glass{
background-image: url(images/glass.png);
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
}
</style>
</head>
<body>
<p id="box">
<p id="face"></p>
<p id="eyeLeft"></p>
<p id="eyeRight"></p>
<p id="glass"></p>
<p id="log"></p>
</p>
<script>
'use strict';
/*
* author: 王乐平
* date:2017.7.17
*/
var eyeLeftPosition = {
start: [70, 78],
end: [100, 110]
};
var eyeRightPosition = {
start: [150, 78],
end: [190, 110]
};
var eyeLeftCenterPosition = {
x: (eyeLeftPosition.end[0] - eyeLeftPosition.start[0]) / 2 + eyeLeftPosition.start[0],
y: (eyeLeftPosition.end[1] - eyeLeftPosition.start[1]) / 2 + eyeLeftPosition.start[1]
};
var eyeRightCenterPosition = {
x: (eyeRightPosition.end[0] - eyeRightPosition.start[0]) / 2 + eyeRightPosition.start[0],
y: (eyeRightPosition.end[1] - eyeRightPosition.start[1]) / 2 + eyeRightPosition.start[1]
};
var r = 20;
var eyeLeft = document.querySelector('#eyeLeft');
var eyeRight = document.querySelector('#eyeRight');
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function (event) {
let {alpha, beta, gamma} = event;
eyeLeft.style.left = eyeLeftCenterPosition.x + gamma / 90 * r + 'px';
eyeRight.style.left = eyeRightCenterPosition.x + gamma / 90 * r + 'px';
eyeLeft.style.top = eyeRight.style.top
= eyeLeftCenterPosition.y + beta / 180 * r + 'px';
eyeRight.style.transform = eyeLeft.style.transform
= eyeRight.style.WebkitTransform
= eyeLeft.style.WebkitTransform
= 'rotate(' + beta + 'deg)';
}, false);
} else {
document.querySelector('body').innerHTML = '浏览器不支持DeviceOrientationEvent';
}
</script>
</body>
</html>最終効果
以上がHTML5の視線移動エフェクトの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
マスタリングマイクロダタ：HTML5のステップバイステップガイドMay 14, 2025 am 12:07 AMMicrodatainHTML5enhancesSEOanduserexperiencebyprovidingstructureddatatosearchengines.1)Useitemscope,itemtype,anditempropattributestomarkupcontentlikeproductsorevents.2)TestmicrodatawithtoolslikeGoogle'sStructuredDataTestingTool.3)ConsiderusingJSON-LD
HTML5フォームの新しいものは何ですか？新しい入力タイプの調査May 13, 2025 pm 03:45 PMHTML5INTRODUCESNEWINPUTTYPESTENHANCEUSEREXPERIENCE、SIMPRIYIFYDEVELOPMENT、およびIMPROVEACCESSIBILITY.1）自動的にEmailformat.2）FOTIMIZENUMIMERICYPAD.3）およびSimplifyDateAndtimeInputs、reducingEdeDateDateRutedolutution。
H5の理解：意味と重要性May 11, 2025 am 12:19 AMH5はHTML5、HTMLの5番目のバージョンです。 HTML5は、Webページの表現力と相互作用を向上させ、セマンティックタグ、マルチメディアサポート、オフラインストレージ、キャンバス描画などの新しい機能を導入し、Webテクノロジーの開発を促進します。
H5：アクセシビリティとWeb標準のコンプライアンスMay 10, 2025 am 12:21 AMネットワーク標準へのアクセシビリティとコンプライアンスは、Webサイトにとって不可欠です。 1）アクセシビリティは、すべてのユーザーがウェブサイトに平等にアクセスできるようにします。2）ネットワーク標準は、ウェブサイトのアクセシビリティと一貫性を改善するために続きます。3）アクセシビリティには、セマンティックHTML、キーボードナビゲーション、色コントラスト、代替テキストの使用が必要です。
HTMLのH5タグは何ですか？May 09, 2025 am 12:11 AMHTMLのH5タグは、小さいタイトルまたはサブタイトルのタグを付けるために使用される5番目のタイトルです。 1）H5タグは、コンテンツの階層を改良し、読みやすさとSEOを改善するのに役立ちます。 2）CSSと組み合わせて、スタイルをカスタマイズして視覚効果を強化できます。 3）H5タグを合理的に使用して、乱用を避け、論理コンテンツ構造を確保します。
H5コード：Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AMHTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。
H5コード構造：読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1）コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2）FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3）レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。
H5対古いHTMLバージョン：比較May 06, 2025 am 12:09 AMHTML5（H5）以降のバージョンのHTMLの主な違いには、次のものが含まれます。1）H5はセマンティックタグを導入し、2）マルチメディアコンテンツをサポートし、3）オフラインストレージ機能を提供します。 H5は、新しいタグやタグなどのAPIを介してWebページの機能と表現力を高め、ユーザーエクスペリエンスやSEO効果を改善しますが、互換性の問題に注意を払う必要があります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
Dreamweaver Mac版
ビジュアル Web 開発ツール
