整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
eta Quest瀏覽器是一款經常使用的應用，尤其對于Meta Quest3用戶而言。如今，Quest瀏覽器推出了新更新提高了其可用性。
Meta Quest瀏覽器31.4版本已向用戶推出，需系統軟件版本v62（或更高版本）才能接收更新。
以下是Meta Quest瀏覽器31.4更新的官方發行說明：
新功能：
WebXR：添加對同步手部和手柄操控的支持；
沉浸式選項卡：瀏覽器選項卡將在沉浸式應用中可用。
實驗性功能（并非所有用戶都可用）：
新窗口：通過選項菜單或右鍵單擊鏈接來創建新的Meta Quest瀏覽器窗口；
持續音頻：當切換到同一窗口中的新選項卡時，媒體可繼續播放！你可以通過單擊播放選項卡上的“音量”圖標將選項卡靜音；
改進的新標簽頁：用戶將能看到更快的加載時間、區域內容，并可刪除貨架；
改進的全屏媒體體驗：通過檢測空閑交互，防止屏幕光標和意外的手部交互，增強沉浸式體驗。
除此之外，Meta Quest瀏覽器31.4更新還包含了內容安全性、性能可靠性和修復了Bug。
最后，X用戶Luna演示了Meta Quest瀏覽器31.4更新最重要的改進之一，改進的全屏媒體體驗。
憑借Quest 3及其彩色直通功能，Meta Quest瀏覽器最近獲得了關注：Meta CTO甚至表示該瀏覽器是最流行的混合現實用例之一。
「93913原創內容，轉載請注明出處」
日，圖片社交網站 Instagram 被發現正在測試一種新的全屏模式、并且更新了導航欄，但這明顯讓人聯想到了其想要追趕的競爭對手 TikTok 。Meta 發言人 Seine Kim 表示，作為 Instagram 的最新舉措，這項測試已向少數用戶推送，以期讓平臺上的內容更易被發現、同時讓用戶獲得更具沉浸感的瀏覽體驗。
如果你有幸被圈入本輪小眾測試，那在滾動瀏覽提要時，將可獲得幾乎全屏的觀看體驗（畢竟底部導航欄還在）。
視頻簡介和收藏、評論、分享等按鈕，將被安排在靠近界面底部的位置，同時左上角會打上 Instagram 的水印。
其實上月，Instagram 已經有過一次想要強調視頻體驗的設計嘗試 —— 界面頂部和底部有留空，但主導航欄基本保持不變 —— 此外該公司有意在此處引入發布新內容或消息的快捷方式。
不過早些時候，Meta CEO 馬克·扎克伯格已經在自己的 Instagram 故事中分享了與本次 UI 實驗有關的信息。
盡管其聲稱照片仍是 Instagram 的重要組成部分，但該公司也在努力讓該平臺保持對全屏視頻內容的兼容體驗 —— 至少 Instagram 領導層已明確表示靜態圖像不再是該 App 的一個焦點。
最后，近日有報道稱 Meta 正在對 Facebook 和 Instagram 的底層信息流算法實施變更，以試圖跟上年輕人的社交網絡使用方式。
bootstrap框架中綜合運用fullpage全屏插件、animate.css動畫等知識，可以實現動感炫酷的網頁版個人簡歷。案例整體分為6屏，由于內容較多，本案例講解第1屏，后面的文章陸續介紹其他屏的制作。
案例采用響應式布局，移動端也可以很好的實現信息的展示。第1屏首頁的效果如下：
本案例的代碼注釋比較詳細，大家參照代碼就可以輕松實現案例效果。
網頁文件index.html第1屏的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡歷第1屏</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<!--自定義CSS-->
<link rel="stylesheet" type="text/css" href="css/t1.css"/>
</head>
<body>
<!--導航開始-->
<nav class="navbar navbar-default navbar-fixed-top dh">
<div class="container">
<div class="navbar-header">
<a href="test1.html" class="navbar-brand">斯圖爾特的簡歷</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#dh-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="dh-menu">
<ul class="nav navbar-nav navbar-right" id="dh-menu1">
<li data-menuanchor="p1" class="active"><a href="#p1">首頁</a></li>
<li data-menuanchor="p2"><a href="#p2">基本資料</a></li>
<li data-menuanchor="p3"><a href="#p3">專業技能</a></li>
<li data-menuanchor="p4"><a href="#p4">個人經歷</a></li>
<li data-menuanchor="p5"><a href="#p5">項目經驗</a></li>
<li data-menuanchor="p6"><a href="#p6">自我評價</a></li>
</ul>
</div>
</div>
</nav>
<!--導航結束-->
<!--fullpage開始-->
<div class="ap">
<!--第1屏-->
<div class="section sec1">
<div class="title1">
<span class="p1-title">web前端開發工程師</span>
<span class="hidden-xs">簡歷</span>
<span class="col-xs-12 hidden-sm hidden-md hidden-lg">簡歷</span>
<p class="title2">愛技術，愛生活</p>
<a href="#" class="next-page">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
<!--四個角-->
<div class="corner corner1">
<img src="images/p1/1.png"/>
</div>
<div class="corner corner2">
<img src="images/p1/2.png"/>
</div>
<div class="corner corner3">
<img src="images/p1/3.png"/>
</div>
<div class="corner corner4">
<img src="images/p1/4.png"/>
</div>
</div>
</div>
<!-- 引入jq庫文件-->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--自定義jq-->
<script type="text/javascript" src="js/t1.js"></script>
</body>
</html>
自定義CSS樣式文件t1.css包含第1屏的代碼如下：
body{
font-family:"microsoft yahei";
-webkit-tap-highlight-color:transparent;
}
a{
color:#fff;
}
/*主導航欄*/
#dh-menu1 .active a{
background:rgba(183,4,4,0.9);
color:#fff;
}
.dh{
border:none;
}
.navbar{
background:rgba(0,0,0,0.2);
transition:all 1s ease;
}
.dh .navbar-brand,.dh .navbar-brand:hover,.dh .navbar-brand:visited{
color:#fff;
font-size:19px;
letter-spacing: 0.1em;
}
.dh .navbar-right li a,.dh .navbar-right li a:visited{
color:#fff!important;
}
/*右側導航欄*/
#fp-nav{
/*border:solid 1px #f00;*/
top:80%;
}
#fp-nav ul li{
margin:10px 50px;
width:150%;
height:150%;
vertical-align: middle;
}
#fp-nav ul li a{
display: block;
margin:10px 50px;
width:150%;
height:150%;
/*border:solid 1px #f00;*/
padding:1px;
}
#fp-nav ul li a span{
display: block;
background:#333;
border:none;
width:15px;
height:15px;
}
#fp-nav ul li a.active span{
background: #ddd;
box-shadow: 0px 0px 3px 1px #eee;
}
/*第1屏*/
.p1-title{
display: none;
}
.section{
text-align: center;
font-size:40px;
color:#fff;
}
.sec1{
background:url(../images/p1/bg1.jpg);
background-size:cover;
}
.sec1 .title1{
margin:-10% 0px 0px 0px;
}
.sec1 .title1 > span:first-child{
font-weight: bold;
font-size:45px;
color:#EB9316;
text-shadow:3px -2px 5px #333;
}
.sec1 .title1 > span.hidden-xs,
.sec1 .title1 > span.col-xs-12{
color:#f90;
text-shadow:2px -1px 7px #333;
}
.sec1 .title1 > span:nth-child(1),
.sec1 .title1 > span:nth-child(2){
position: relative;
animation:topmove 2s ease;
}
.sec1 .title1 p{
animation:p-scale 2s ease;
}
.sec1 .title2{
font-size:25px;
}
/**/
.next-page{
margin:0px 0px 0px -35px;
position:absolute;
bottom:15%;
left:50%;
border:solid 2px rgba(255,255,255,.5);
width:70px;
height:70px;
border-radius: 50%;
color:#eee;
line-height:80px;
overflow: hidden;
transition:all 1s ease;
background:rgba(0,0,0,0.5);
}
.next-page:hover{
background:rgba(50,50,50,0.9);
}
.next-page span{
animation: next-page 2s linear infinite;
opacity: 0.7;
font-size:30px;
}
/*4個角*/
.sec1 .corner{
position: absolute;
/*max-width:72px;
min-width: 50px;*/
width:5%;
}
.sec1 .corner img{
width:100%;
}
.sec1 .corner1{
top:10%;
left:10%;
animation: corner1 1s ease;
}
.sec1 .corner2{
bottom:10%;
left:10%;
animation: corner2 1s ease;
}
.sec1 .corner3{
top:10%;
right:10%;
animation: corner3 1s ease;
}
.sec1 .corner4{
bottom:10%;
right:10%;
animation: corner4 1s ease;
}
/*CSS3具體動畫*/
@keyframes next-page{
0%{
top:-35px;
}
100%{
top:30px;
}
}
@keyframes corner1{
from{
opacity:0.1;
transform: rotate(-90deg);
}
to{
opacity: 1;
transform: rotate(0deg);
}
}
@keyframes corner2{
from{
opacity:0.1;
transform: rotate(90deg);
}
to{
opacity: 1;
transform: rotate(0deg);
}
}
@keyframes corner3{
from{
opacity:0.1;
transform: rotate(90deg);
}
to{
opacity: 1;
transform: rotate(0deg);
}
}
@keyframes corner4{
from{
opacity:0.1;
transform: rotate(-90deg);
}
to{
opacity: 1;
transform: rotate(0deg);
}
}
@keyframes topmove{
from{
top:-200px;
}
to{
top:0px;
}
}
@keyframes p-scale{
0%{
transform: scale(3);
}
50%{
transform: scale(0.5);
}
100%{
transform: scale(1);
}
}
自定義Jquery文件t1.js的代碼如下：
$(function(){
$('.ap').fullpage({
sectionsColor:['transparent','transparent','#ccc','rgba(255,255,255,0)','transparent','transparent',],
navigation:true,
anchors:['p1','p2','p3','p4','p5','p6',],
menu:'#dh-menu1',
scrollingSpeed:700,
controlArrowColor:'rgba(245,245,245,0.9)',
normalScrollElementTouchThreshold:5,
easing:'easeInOut',
//頁面渲染后回調
afterRender:function(){
//側邊導航事件
var tooltip1=['首頁','基本資料','專業技能','個人經歷','項目經驗','自我評價'];
$('#fp-nav ul li a').each(function(index){
this.dataset['toggle']='tooltip';
this.dataset['placement']='left';
$(this).attr('title',tooltip1[index]);
});
$('[data-toggle="tooltip"]').tooltip();
$('#fp-nav').addClass('hidden-xs');
//
$('.next-page').on('click',function(){
$.fn.fullpage.moveSectionDown();
});
// 頂部導航欄自動收起事件
/*if($('.navbar-toggle').css('display')=='block'){
$('.navbar-collapse li').on('click',function(){
$('.navbar-toggle').trigger('click');
});
};*/
$('.navbar-collapse').on('click',function(){
$(this).collapse('hide');
});
//
setTimeout(function(){
$('.sec1 .corner').show();
$('.p1-title').show();
},500);
},
//滾動結束時回調
onLeave:function(index,nextIndex,direction){
switch(index){
case 1:
$('.sec1 .corner').hide();
$('.p1-title').hide();
break;
case 2:
if(direction=='down'){
$('.sec2 .p2-icon').addClass('zoomOutUp');
setTimeout(function(){
$('.sec2 .p2-icon').removeClass('zoomOutUp');
$('.sec2 .container').hide();
},300);
}else{
$('.sec2 .container').hide();
}
break;
case 3:
$('.sec3 .container').hide();
break;
case 4:
$('.sec4 .container').hide();
$('.sky').show();
break;
case 6:
$('.sec6 .top').animate({'height':'50%'},700);
$('.sec6 .bottom').animate({'height':'50%'},700);
$('.sky').hide();
break;
}
},
//滾動后回調
afterLoad:function(anchorLink,index){
switch(anchorLink){
case 'p1':
$('.sec1 .corner').show();
$('.p1-title').show();
break;
case 'p2':
$('.sec2 .container').show();
break;
case 'p3':
$('.sec3 .container').show();
break;
case 'p4':
$('.sec4 .container').show();
break;
case 'p5':
break;
case 'p6':
$('.sec6 .top').animate({'height':'30%'},1000);
$('.sec6 .bottom').animate({'height':'30%'},1000);
break;
}
}
//
});
});
至此，第1屏的案例效果制作完成，敬請關注后續文章。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
