2. 程式人生 > >基於HTML5陀螺儀實現ofo首頁眼睛移動效果

基於HTML5陀螺儀實現ofo首頁眼睛移動效果

阿新 • • 發佈：2018-12-27

最近用ofo小黃車App的時候，發現以前下方掃一掃變成了一個眼睛動的小黃人，覺得蠻有意思的，這裡用HTML5仿一下效果。

ofo眼睛效果

效果分析

從效果中不難看出，是使用陀螺儀事件實現的。

這裡先來看一下HTML5中陀螺儀事件的一些概念。

陀螺儀事件為deviceorientation，這裡主要獲取事件中的alpha,beta,gamma。

aplha

行動裝置水平放置時，繞 Z 軸旋轉的角度，數值為 0 度到 360 度。

beta

行動裝置水平放置時，繞 X 軸旋轉的角度，數值為 -180 度到 180 度。

gamma

行動裝置水平放置時，繞 Y 軸旋轉的角度，數值為 -90 度到 90 度。

這裡，只需要用到beta和gamma。

將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>
  <div id="box">
    <div id="face"></div>
    <div id="eyeLeft"></div>
    <div id="eyeRight"></div>
    <div id="glass"></div>
    <div id="log"></div>
  </div>
<script>
'use strict';

/*
* author: 王樂平
* blog: http://blog.csdn.net/lecepin
* 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陀螺儀實現ofo首頁眼睛移動效果

最近用ofo小黃車App的時候，發現以前下方掃一掃變成了一個眼睛動的小黃人，覺得蠻有意思的，這裡用HTML5仿一下效果。 ofo眼睛效果 效果分析 從效果中不難看出，是使用陀螺儀事件實現的。 這裡先來看一下HTML5中陀螺儀事件的一些概念。

Unity3D基於陀螺儀實現VR相機功能（轉）

轉至https://blog.csdn.net/m0_37998140/article/details/78255978?utm_source=blogxgwz7 Unity自帶陀螺儀功能，今天就利用陀螺儀實現一個VR相機功能。步驟如下：   開啟Unity，建立一個新的

MotionManager 陀螺儀實現方式

time current data ble cap ups 場景 影像 val 題外話： 權利的遊戲開播了，引用一句話： 布蘭：一個人如果還把，他還能勇敢麽？ 奈德：人在害怕時候的勇敢，才是真的勇敢。 回歸正題： 說下關於 CMMotionM

使用js實現html首頁圖片輪播效果

第一步：確定事件(onload)併為其繫結一個函式 瀏覽器是邊載入邊執行的，先載入head 再載入body。瞭解body的onload事件的執行時間是非常重要的。onload事件是在網頁載入完畢時執行的。當我們在JavaScript中想要操作某元素時而此元素還沒有載入完成（

分別使用js和JQuery實現html首頁圖片輪播以及廣告圖片定時彈出

主要使用setInterval方法設定更新週期，clearInterval清除週期。（如果不清除會一直週期迴圈執行下去，而setTimeout只是在指定時間後執行一次，這裡完全可以替換為setTimeout方法）   一、js首頁輪播 第一步：確定事件(onload)併為

【javaweb】BootStrap實現網站首頁

運用BootStrap框架對最開始的網站首頁進行一個重寫。 效果如下：  原始碼如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

Unity Gyro之使用陀螺儀實現簡單VR全景環視效果

轉https://jingyan.baidu.com/article/3aed632ec0f421701180914e.html 開啟Unity，新建一個空工程，具體如下圖 在場景中佈置一些物體作為參照，把相機置於其中，便於觀察，具體如下圖 拷貝MainCamer

apicloud與vue實現app首頁和頁面跳轉

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,m

基於HTML5+js+Java實現單檔案檔案上傳到伺服器功能

HTML5程式碼： 方法一：直接表單提交 1 2 3 4 5 6 <form name="upform" action="url" method="POST">       &n

css+html5仿寫淘寶首頁

問題定義 為了鍛鍊自己原生的能力，我決定仿寫一下淘寶的首頁。一下記錄，仿寫的全部步驟。按照軟體工程的方法來實現。（ps,純為學習，沒有什麼不良居心~~） 可行性研究 技術採用原生js+html5+css3實現。完全可行 時間可行性 兩

RecycleView 實現複雜首頁佈局三種方式

做過電商類應用的朋友可能都會遇到一個比較頭疼的問題：複雜的首頁佈局如何實現。參考百度糯米，美團，bilibili等應用，都會發現其首頁的佈局相對複雜，例如下圖bilibili的首頁（第二張是demo實現的效果圖），可以看到在同一個頁面中先是有列表佈局出現，然後出現了2列的網格

用 Flask 來寫個輕部落格 (14) — M(V)C_實現專案首頁的模板

目錄 前文列表 實現所需要的檢視函式 在開始實現首頁模板之前, 我們為了除錯和顯示的方便, 首先偽造一些假資料: fake_data.py import rand

Android UI 之 RecyclerView實現常見首頁佈局

一丶效果演示 實現功能： 1.底部tab欄，切換“首頁”，“我的” 2.頂部banner，APP常見首頁用於展示活動詳情或者近期熱門，這裡用來展示個人“CSDN” “簡書” “github” 3.中間選單欄，導航APP各模組，這裡作為後面將自學的內容模組，“Java基

基於html5、JS實現的二維碼掃碼

原理：調出攝像頭，拍照儲存到畫布，定時傳送到解析函式說明：解析函式是後臺c# .net MVC 實現的，解析函式用到的二維碼解析API依賴於第三方二維碼庫google zxing , 因此需要先引用類庫：zxing.dll、zxing.presentation.dll，如果你

基於html5、JS實現的拍照上傳圖片

原理：調出攝像頭，拍照儲存到畫布，將圖片URi傳送到後臺 前端程式碼（Index.cshtml）： <style> #video,#canvas {display: block;margin:1em auto;width:180px;height:180px

通過(Node Js||.Net)基於HTML5的WebSocket實現實時視訊文字傳輸1

HTML5 擁有許多引人注目的新特性，如 Canvas、本地儲存、多媒體程式設計介面、WebSocket 等等。雖然現在大家把它捧的很火的樣子,但是個人認為它還需要其他平臺的支援才能真正的"火起來"。 原來做web通訊的時候 基於ajax的“輪詢” “長輪詢”等其他的方式 網上有很詳細的解釋 輪詢：

Android使用TabHost實現在首頁tab再次點選首頁tab時，重新整理首頁資料或者recyclerView回到頂部的需求

類似今日頭條，實現這麼一個需求：“在首頁tab時再次點選首頁tab，首頁列表重新整理資料或者列表回到頂部，而從其他tab切換過來時不需要首頁重新整理資料或者列表回到頂部”。1，監聽tab切換private String texts[] = {"首頁", "發現","頻道",

仿支付寶首頁頭部伸縮效果

nat load err 默認 hub pen tle 滑動 bili 原文鏈接：https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Sw 每次打開支付寶首頁滑動，頭部的伸縮動畫甚是吸引人。於是自己決定動手來實現一個。 無圖言虛

Android 仿今日頭條首頁標題欄效果

今天帶來的是仿今日頭條首頁的聯動滑動效果，廢話不多說，先上效果圖： 思路： 做這個我們需要實現的效果有 1、滑動內容區域，標題欄會有變化來顯示當前所處的位置。 2、點選標題欄，內容區域也會隨著滑動並跳到指定欄，標題欄會移動到螢幕中間。 3、當標題欄

jQuery實現選項內容的左右移動效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html