Browse Source

【添加文案】

master
goule 3 years ago
parent
commit
4cc23bfdc7
4 changed files with 10509 additions and 85 deletions
  1. +50
    -21
      css/index.css
  2. +69
    -46
      index.html
  3. +39
    -18
      js/index.js
  4. +10351
    -0
      js/jquery-1.11.3.js

+ 50
- 21
css/index.css View File

@@ -6,7 +6,7 @@ body{
display:none !important;
} */
.headBox{
position:absolute;
position:fixed;
top: 0;
left: 0;
width: 100%;
@@ -27,21 +27,36 @@ body{
float: right;
margin-right: 58px;
margin-top: 35px;
height: 17px;
height: 20px;
line-height: 17px;
color: #fff;
font-size: 18px;
overflow: hidden;
text-align: center
text-align: center;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
width: 36%;
}
.mainBox div{
cursor: pointer;
}
.space{
margin: 0 60px;
}
.mainBox div{
/* .mainBox div{
float: left;
width: 72px;
height: 17px;
} */
.hieBox{
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3)
}
.videoBox{
overflow: hidden;
@@ -93,24 +108,37 @@ body{
background: #13161D;
position: relative;
overflow: hidden;
margin-top: 20px;
}
.coverF{
height: 60px;;
}
.textBox{
position: absolute;
top: 20%;
left: 20%;
width: 489px;
width: 27%;
}
.title{
/* width: 357px; */
height: 69px;
font-size: 72px;
/* height: 69px; */
font-size: 56px;
font-family: OPPOSans;
font-weight: 800;
color: #3ADDEF;
}
.cover{
margin: 20px 0;
font-size: 56px;
font-family: OPPOSans;
font-weight: 800;
color: #3ADDEF;
text-align: center;
}
.fushou{
margin-top: 38px;
font-size: 36px;
font-size: 26px;
font-family: OPPOSans;
font-weight: 500;
color: #FFFFFF;
@@ -125,7 +153,7 @@ body{
}
.item1{
position: absolute;
width: 600px;
width: 30%;
height: 337px;
background: #13161D;
opacity: 0.8;
@@ -139,20 +167,20 @@ body{
height: 522px;
position: absolute;
top: 86px;
left: 360px;
left: 20%;
}
.suxian2{
width: 8px;
height: 522px;
position: absolute;
top: 86px;
right: 360px;
right: 20%;
}
.suxian3{
position: absolute;
width: 1284px;
width: 66%;
height: 8px;
left: 318px;
left: 16%;
top: 559px
}
.name{
@@ -173,7 +201,7 @@ body{
}
.dataText{
margin: 56px auto;
width: 1008px;
width: 54%;
height: 176px;
font-size: 18px;
font-family: Microsoft YaHei;
@@ -219,8 +247,9 @@ body{
color: rgba(255, 255, 255, 0.5);
}
.teamworkBox{
margin-top: 70px;
margin-left: 359px;
/* margin-top: 70px;
margin-left: 359px; */
margin: 5% auto;
width: 1200px;
display: flex;
flex-wrap:wrap;
@@ -248,7 +277,7 @@ body{
}
.wayBox{
float: left;
margin-left: 360px;
/* margin-left: 18%; */
margin-top: 77px;
}
.zhixuantext{
@@ -276,17 +305,17 @@ body{
}
.rqCodeBox{
margin-top: 84px;
width: 777px;
width: 62%;
float: left;
margin-left:40px;
margin-left:7%;
display: flex;
flex-wrap:wrap;
justify-content:space-between;
}
.rq{
width: 180px;
height: 180px;
width: 10rem;
height: 10rem;
background-color: #FFFFFF;
}
.rqBox p{


+ 69
- 46
index.html View File

@@ -1,47 +1,62 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/iti.css">
<link rel="stylesheet" href="./css/index.css">
</head>

<body>
<div class="headBox">
<img class="logo" src="https://formall.oss-accelerate.aliyuncs.com/suimang/logo.png" alt="">
<img class="logo" src="https://formall.oss-accelerate.aliyuncs.com/suimang/logo.png" alt="">
<div class="mainBox">
<div>核销能力</div>
<div class="space">产品服务</div>
<div>关于我们</div>
<div id="ip">数字IP制作</div>
<div id="ai">AI影视应用</div>
<div id="zb">换脸直播</div>
<div id="hz">合作伙伴</div>
<div id="wm">关于我们</div>
</div>
</div>
<div class="videoBox">
<video autoplay loop muted class="video1" id="video1">
<div class="hieBox"></div>
<video autoplay loop muted class="video1" id="video1">
<source src="https://formall.oss-accelerate.aliyuncs.com/suimang/noText.mp4" type="video/mp4" />
</video>
<div class="titleBox">批量制作虚拟IP形象</div>
<div class="titleBox">超写实虚拟IP创造者</div>
<div class="consult">点击咨询</div>
</div>
<video autoplay loop muted class="video2" id="video2">
<source src="https://formall.oss-accelerate.aliyuncs.com/suimang/compound.mp4" type="video/mp4" />
</video>


<div class="itemBox">
<div class="textBox">
<div class="title">影视级效果</div>
<div class="fushou">副标题副标题副标题副标题</div>
<div class="miaosu">文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描</div>
<div class="itemBox" id="aiText">
<div class="textBox">
<div class="title">AI影视抠像应用实例</div>
<div class="fushou">基于图像分割技术的影视级工业生产</div>
<div class="miaosu">对于影视行业传统生产工具和流程的革新,替代重复高人工成本的抠像、擦除、填补背景等工作,大比例降低后期制作成本,生产标准可以达到影视工业的像素级,模型能力全球领跑,工程师团队获得CVPR-2020-The
4th look into person竟赛冠军。</div>
</div>
<video controls class="item1">
<source src="https://formall.oss-accelerate.aliyuncs.com/suimang/all.mp4" type="video/mp4" />
</video>
</div>

<video controls class="item1">
<source src="https://formall.oss-accelerate.aliyuncs.com/suimang/all.mp4" type="video/mp4" />
<div style="position:relative;width: 100%;
height: 1080px;overflow: hidden;">
<div class="coverF"></div>
<div class="cover">短视频数字IP应用实例</div>
<video autoplay loop muted class="video2" id="video2">
<source src="https://formall.oss-accelerate.aliyuncs.com/suimang/compound.mp4" type="video/mp4" />
</video>
<div class="hieBox"></div>
</div>
<div class="itemBox" style="background: #1A1D24;">



<!-- <div class="itemBox" style="background: #1A1D24;">
<div class="textBox">
<div class="title">AI替代传统CG</div>
<div class="fushou">副标题副标题副标题副标题</div>
@@ -61,18 +76,21 @@
<video controls class="item1" >
<source src="https://formall.oss-accelerate.aliyuncs.com/suimang/all.mp4" type="video/mp4" />
</video>
</div>
</div> -->

<div class="itemBox" style="background-image: url(https://formall.oss-accelerate.aliyuncs.com/suimang/-s-home_gywm_bnt.png);background-size: 100% 100%;background-repeat: no-repeat;">
<div class="suimang"></div>
<img class="suxian1" src="https://formall.oss-accelerate.aliyuncs.com/suimang/home_gywm_bnt2.png" alt="">
<img class="suxian2" src="https://formall.oss-accelerate.aliyuncs.com/suimang/home_gywm_bnt2.png" alt="">
<img class="suxian3" src="https://formall.oss-accelerate.aliyuncs.com/suimang/home_gywm_bnt1@2x.png" alt="">
<div class="name">遂芒科技</div>
<div class="dazao">打造数字虚拟IP,加速拓展智能世界</div>
<p class="dataText">公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍公司文案介绍</p>
<div class="dazao">超写实虚拟IP创造者</div>
<p class="dataText">随着元宇宙概念的升温,数字艺人开始广泛的出现在公众面前为人们所习惯。邃芒科技的AI养成路线,致力于打造超写实虚拟形象,解决传统CG模型生产的IP不够真实的痛点,突破恐怖谷,用更低的成本实现影视工业级标准的直播和生产。
对于影视工业的其他痛点,人员密集型劳动高昂的成本,邃芒科技也给出了更有现代感的解决方案,工程师团队对于像素级的影视工业需求,设计出了针对于抠像、擦除、填补背景的专用模型,节约制作成本,缩短制作周期,优化制作流程。 工程师团队由北京邮电大学博士后带队,集合了来自中科院、清华、北京邮电大学等高校的优秀人才。
</p>
<div class="jieshao">视频介绍</div>
</div>
<div class="teamworkBoxtop" style="background-image: url(https://formall.oss-accelerate.aliyuncs.com/suimang/home_hzhb_bnt@2x.png);background-size: 100% 1000px;background-repeat: no-repeat;">
<div class="teamworkName">市场合作伙伴</div>
<div class="teamworkText">成功服务于20+行业2000+知名企业/影视公司</div>
@@ -91,33 +109,38 @@
</div>
</div>
<div class="consultBox">
<div class="wayBox">
<div class="zhixuantext">质询热线</div>
<div class="ph">咨询热线 020-12345678 </div>
<div class="stieText">总部地址</div>
<div class="stie">湖北省武汉市</div>
</div>
<div class="rqCodeBox">
<div class="rqBox">
<div class="rq"></div>
<p>抖音码</p>
</div>
<div class="rqBox">
<div class="rq"></div>
<p>快手码</p>
</div>
<div class="rqBox">
<div class="rq"></div>
<p>B站码</p>
</div>
<div class="rqBox">
<div class="rq"></div>
<p>视频号</p>

<div style="margin:1% auto;overflow: hidden;width: 1200px">
<div class="wayBox">
<div class="zhixuantext">质询热线</div>
<div class="ph">咨询热线 020-12345678 </div>
<div class="stieText">总部地址</div>
<div class="stie">湖北省武汉市</div>
</div>
<div class="rqCodeBox">
<div class="rqBox">
<div class="rq"></div>
<p>抖音码</p>
</div>
<div class="rqBox">
<div class="rq"></div>
<p>快手码</p>
</div>
<div class="rqBox">
<div class="rq"></div>
<p>B站码</p>
</div>
<div class="rqBox">
<div class="rq"></div>
<p>视频号</p>
</div>

</div>
</div>
</div>
<div class="tail">版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息版权信息</div>
</body>

</html>
<script language="javascript" src="./js/jquery-1.11.3.js" ></script>
<script language="javascript" src="./js/index.js"></script>

+ 39
- 18
js/index.js View File

@@ -1,20 +1,41 @@

let video1 = document.getElementById("video1");
let video2 = document.getElementById("video2");
video1.play();
window.onscroll = function () {
var t = document.documentElement.scrollTop || document.body.scrollTop; //变量t就是滚动条滚动时,到顶部的距离

console.log(video2.pause);
// video2.pause()
if (t < 700) {
video2.pause();
video1.play();
} else if (t >= 700) {
video1.pause();
video2.play();
}

}
$(function () {
$("#ip").click(function() {
$("html,body").animate({ scrollTop: $(".videoBox").offset().top }, 1000)

});
$("#ai").click(function() {
$("html,body").animate({ scrollTop: $("#aiText").offset().top }, 1000)

});
$("#zb").click(function() {
$("html,body").animate({ scrollTop: $(".coverF").offset().top }, 1000)

});
$("#hz").click(function() {
$("html,body").animate({ scrollTop: $(".suimang").offset().top }, 1000)

});
$("#wm").click(function() {
$("html,body").animate({ scrollTop: $(".teamworkBoxtop").offset().top }, 1000)

});
let video1 = document.getElementById("video1");
let video2 = document.getElementById("video2");
video1.play();
window.onscroll = function () {
var t = document.documentElement.scrollTop || document.body.scrollTop; //变量t就是滚动条滚动时,到顶部的距离


// video2.pause()
if (t < 700) {
video2.pause();
video1.play();
} else if (t >= 700) {
video1.pause();
video2.play();
}

}
})

+ 10351
- 0
js/jquery-1.11.3.js
File diff suppressed because it is too large
View File


Loading…
Cancel
Save