整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
