概述
项目是纯静态的，只有前端，模仿的开眼的官网，模仿程度在90%到95%，有兴趣的可以了解看看，主要用到的是整屏滑动，视频播放等。
详细
项目是纯静态的（主要是一些动态效果的实现），只有前端，模仿的开眼的官网，模仿程度在90%到95%，有兴趣的可以了解看看，主要用到的是整屏滑动，视频播放等。
项目图片（网站挺漂亮的）
部分代码HTML
<div class="index-container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-poster="">
<div class="swiper-video">
<div class="swiper-model">
<h2>可以接的业务，文字描述</h2>
</div>
<video style="width: 100%" loop="loop" muted="muted" controls="false" autoplay="autoplay">
<source src="http://home.eyepetizer.net/_nuxt/videos/eyepetizer-cover.80f1071.mp4"
type="video/ogg"/>
<source src="http://home.eyepetizer.net/_nuxt/videos/eyepetizer-cover.80f1071.mp4"
type="video/mp4"/>
</video>
</div>
<h3>可以接的业务，文字描述</h3>
</div>
<div class="swiper-slide" data-poster="">
<div class="else animation-container">
<div class="chosen-video active">
<header class="header" style="transform: matrix(1, 0, 0, 1, 0, 0);"><h2
class="title">精选创意视频</h2>
<p class="desc"> 汇聚全球优质视频内容，让你大开眼界；了解各领域全新动态，启迪你的生活灵感。</p>
</header>
<main class="content">
<ul class="ul-item ul-active">
<li class="video-item active" style="transition-delay:300ms;">
<a href="./pages/video-detail.html" class="">
<div class="video-box">
<div class="video-hover">
<img src="http://img.kaiyanapp.com/017d62c2cd30d105c36e0d76c2d13331.jpeg?imageMogr2/quality/60/format/jpg"
alt="视频" class="cover">
<video autoplay="autoplay" loop="loop" muted="muted"
src="http://oss-cn-beijing.aliyuncs.com/static-thefair-bj/eyepetizer/pgc_video/video_summary/219301.mp4"
class="preview"></video>
</div>
</div>
<p>GoPro 百万美金挑战赛获奖「热气球跳伞」</p>
<div class="line"></div>
</a>
</li>
<li class="video-item active" style="transition-delay:800ms;">
<a href="./pages/video-detail.html" class="">
<div class="video-box">
<div class="video-hover">
<img src="http://img.kaiyanapp.com/30a606034b25f99f81450d7d64b8a65e.png?imageMogr2/quality/60/format/jpg"
alt="视频" class="cover"> <!---->
<video autoplay="autoplay" loop="loop" muted="muted"
src="http://oss-cn-beijing.aliyuncs.com/static-thefair-bj/eyepetizer/pgc_video/video_summary/219301.mp4"
class="preview"></video>
</div>
</div>
<p>丹麦温情广告，愿你可以成为爱的傻瓜</p>
<div class="line"></div>
</a>
</li>
<li class="video-item active" style="transition-delay:1300ms;">
<a href="./pages/video-detail.html" class="">
<div class="video-box">
<div class="video-hover">
<img
src="http://img.kaiyanapp.com/3cea5ee9eb2fae85379a853351f4551d.jpeg?imageMogr2/quality/60/format/jpg"
alt="视频" class="cover"> <!---->
<video autoplay="autoplay" loop="loop" muted="muted"
src="http://oss-cn-beijing.aliyuncs.com/static-thefair-bj/eyepetizer/pgc_video/video_summary/219301.mp4"
class="preview"></video>
</div>
</div>
<p>美到窒息！德舒特国家森林的心灵奇旅</p>
<div class="line"></div>
</a>
</li>
</ul>
<ul class="ul-item">
<li class="video-item active" style="transition-delay:800ms;">
<a href="./pages/video-detail.html" class="">
<div class="video-box">
<div class="video-hover">
<img src="http://img.kaiyanapp.com/30a606034b25f99f81450d7d64b8a65e.png?imageMogr2/quality/60/format/jpg"
alt="视频" class="cover"> <!---->
<video autoplay="autoplay" loop="loop" muted="muted"
src="http://oss-cn-beijing.aliyuncs.com/static-thefair-bj/eyepetizer/pgc_video/video_summary/219301.mp4"
class="preview"></video>
</div>
</div>
<p>丹麦温情广告，愿你可以成为爱的傻瓜</p>
<div class="line"></div>
</a>
</li>
<li class="video-item active" style="transition-delay:1300ms;">
<a href="./pages/video-detail.html" class="">
<div class="video-box">
<div class="video-hover">
<img
src="http://img.kaiyanapp.com/3cea5ee9eb2fae85379a853351f4551d.jpeg?imageMogr2/quality/60/format/jpg"
alt="视频" class="cover"> <!---->
<video autoplay="autoplay" loop="loop" muted="muted"
src="http://oss-cn-beijing.aliyuncs.com/static-thefair-bj/eyepetizer/pgc_video/video_summary/219301.mp4"
class="preview"></video>
</div>
</div>
<p>美到窒息！德舒特国家森林的心灵奇旅</p>
<div class="line"></div>
</a>
</li>
</ul>
</main>
<nav class="nav" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<ul>
<li class="nav-item active">每日推荐
</li>
<li class="nav-item">旅行
</li>
<li class="nav-item">运动
</li>
<li class="nav-item">摄影
</li>
<li class="nav-item">艺术
</li>
<a href="./pages/video-list.html" class="nav-item"> 查看全部
</a>
</ul>
<img src="https://home.eyepetizer.net/image/home/Scroll.png" alt="scroll"
class="scroll"></nav>
</div>
</div>
</div>
<div class="swiper-slide" data-poster="">
<div class="else animation-container">
<div class="desc-container active">
<div class="content">
<div class="publish item-box">
<img src="https://home.eyepetizer.net/image/home/iphone1.png" alt=""
class="img-1" style="transform: matrix(1, 0, 0, 1, 41.5, 0);">
<img src="https://home.eyepetizer.net/image/home/blue-logo.png"
alt="" class="logo"
style="transform: matrix(1, 0, 0, 1, 41.5, 0) rotate(-7.006deg);">
<div class="desc" style="transform: matrix(1, 0, 0, 1, 37.35, 0);"><p
class="title">
有机社区
</p>
<p class="detail">
优质用户及创作者的集合地。自由分享生活点滴，<br>
随时收获创作灵感，一同共建高品质内容生态。<br> <br>
精选话题、有奖征集，多种形式即时参与。<br>
让你的每一刻精彩瞬间，都被看见。<br></p></div>
</div>
<div class="first-floor">
<h3 class="text text1">Feed your eyes,</h3>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-poster="">
<div class="else animation-container">
<div class="desc-container active">
<div class="content">
<div class="live item-box">
<img src="https://home.eyepetizer.net/image/home/iphone2.png"
class="live-img" style="transform: matrix(1, 0, 0, 1, 16.6, 0);">
<div class="desc" style="transform: matrix(1, 0, 0, 1, 12.45, 0);"><p
class="title">
「在现场」直播
</p>
<p class="detail">
国内外佳片展映、人文艺术领域名人直播，「在现场」邀你与艺术家一起创作，和朋友一起观展看片，来一场身临其境的愉悦体验。
</p></div>
</div>
<div class="first-floor">
<h3 class="text text1">feed your soul.</h3>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-poster="">
<div class="else animation-container">
<div class="desc-container active">
<div class="content">
<div class="brand item-box">
<img src="https://home.eyepetizer.net/image/home/brand-logo.png"
alt="" class="logo"
style="transform: matrix(1, 0, 0, 1, 8.3, 0) rotate(-7.006deg);">
<img src="https://home.eyepetizer.net/image/home/iphone3.png" alt=""
class="brand-1"
style="transform: matrix(1, 0, 0, 1, 8.3, 0);">
<div class="desc" style="transform: matrix(1, 0, 0, 1, 5.81, 0);"><p
class="title">
品牌墙
</p>
<p class="detail">
网罗国内外品牌精选创意视频，用来自世界每个角落的广告创意，为你输送源源不断的创意灵感。一个创意人群不可不知的灵感素材库。
</p>
<a href="./pages/brand-wall.html" class="link"> 查看全部品牌
<img
src="https://home.eyepetizer.net/image/home/icon-link.png" alt=""
class="icon">
</a>
</div>
</div>
<!-- <div class="first-floor">-->
<!-- <h3 class="text text1">Feed your eyes,</h3>-->
<!-- </div>-->
<div class=" footer">
<footer class="footer">
<div class="link">
<a href="mailto:bd@eyepetizer.net?subject=[意见反馈]"
el="nofollow">意见反馈</a> <a
href="./pages/agreement.html"
el="nofollow">用户协议</a>
<a href="./pages/right.html"
el="nofollow">权利声明</a>
<a href="mailto:bd@eyepetizer.net?subject=[商务合作]"
el="nofollow">商务合作</a> <a
href="mailto:bd@eyepetizer.net?subject=[简历投递]"
el="nofollow">加入我们</a> <a
href="./pages/about.html" class="">关于我们</a>
</div>
<div class="company">© 北京牡蛎柠檬科技文化有限公司2020 - 2025京 ICP 备16030848
号京 ICP 证161038 号
</div>
<div class="wangan"><i></i>京公网安备
11010502034149号京网文（2017）1560-134 号
</div>
</footer>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div id="txt"></div>-->
</div>
</div>部分代码CSS
#preload {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 200;
display: flex;
justify-content: center;
align-items: center;
}
.preload-bg {
position: absolute;
width: 100%;
height: 100%;
background: #000;
}
#preload .tip {
display: inline;
color: #fff;
font-size: 4vw;
text-transform: uppercase;
font-weight: bold;
line-height: 1;
position: relative;
overflow: hidden;
}
.swiper-container {
width: 100%;
height: 100%;
z-index: 100;
}
#txt {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.box {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.swiper-model h2 {
margin: 0;
width: 100%;
cursor: pointer;
color: #fff;
font-size: 3vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.top-header, .header .nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-header {
max-width: 1440px;
min-width: 960px;
padding: 0 40px;
height: 8vh;
margin: 0 auto;
z-index: 1000;
position: relative;
}
.top-header .nav .nav-item.active {
font-family: SourceHanSansCN-Medium;
font-weight: 700;
}
.top-header .nav .nav-item {
font-family: SourceHanSansCN-Light;
font-size: 13px;
line-height: 18px;
letter-spacing: 0;
text-align: center;
color: #fff;
margin-left: 68px;
}
.top-header .logo {
display: block;
width: 170px;
height: 20.88px;
-o-object-fit: cover;
object-fit: cover;
}
video::-webkit-media-controls {
display: none !important;
}
h3 {
text-align: center;
color: #ffffff;
}
.index-container {
height: 92vh;
position: relative;
background: #000;
width: 100vw;
overflow: hidden;
color: #fff;
}
.index-container .swiper-container {
margin-left: auto;
margin-right: auto;
overflow: hidden;
list-style: none;
padding: 0;
height: 100%;
}
.swiper-video {
max-width: 842px;
margin: 0 auto;
margin-top: 50px;
position: relative
}
.swiper-model {
position: absolute;
z-index: 99;
width: 100%;
height: 100%
}
/*第二页*/
.animation-container {
flex-shrink: 0;
display: flex;
align-items: center;
}
.chosen-video {
position: relative;
margin-left: 15vw;
margin-right: 200px;
height: 100%;
max-height: 810px;
opacity: 1;
transition-duration: .5s;
transition-delay: .3s;
}
.chosen-video .header {
position: absolute;
left: 0;
top: 140px;
}
.chosen-video .header .title {
font-family: SourceHanSansCN-Normal;
font-size: 26px;
line-height: 39px;
font-weight: 700;
letter-spacing: 2px;
text-align: left;
z-index: 150;
}
.chosen-video .header .desc {
font-family: SourceHanSansCN-Light;
font-size: 14px;
line-height: 15px;
letter-spacing: 1.3966px;
margin-top: 10px;
}
.chosen-video .content {
height: 100%;
margin: 240px 0 0;
position: relative;
}
.chosen-video .nav {
position: absolute;
left: 0;
top: 630px;
z-index: 50;
text-align: center;
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
background: #ffffff;
}
.chosen-video .nav ul {
display: flex;
}
.chosen-video .nav .nav-item.active {
font-family: SourceHanSansCN-Normal;
font-weight: 700;
}
.chosen-video .nav .nav-item {
font-family: SourceHanSansCN-Light;
font-size: 14px;
line-height: 14px;
text-align: center;
letter-spacing: 1.3966px;
cursor: pointer;
position: relative;
}
.chosen-video .nav ul li {
margin-right: 43px;
}
.chosen-video .nav .scroll {
width: 122.7px;
height: 36.66px;
}
.chosen-video .content ul {
display: flex;
position: absolute;
left: 0;
top: 0;
}
.chosen-video .content .ul-item{
opacity: 0;
}
.chosen-video .content .ul-item.ul-active{
opacity: 1;
}
.chosen-video .content ul:first-child {
position: relative;
left: 0;
right: 0;
}
.chosen-video .content ul .video-item.active {
opacity: 1;
z-index: 100;
}
.chosen-video .content ul .video-item {
opacity: 0;
width: 353px;
margin-right: 65px;
transition-duration: 1s;
}
.chosen-video .content ul .video-item .video-box {
display: block;
width: 100%;
height: 202px;
-o-object-fit: contain;
object-fit: contain;
}
.video-hover {
position: relative;
height: 100%;
width: 100%;
cursor: pointer;
}
.video-hover .cover {
height: 100%;
width: 100%;
display: block;
}
.chosen-video .content ul .video-item p {
position: relative;
margin-top: 20px;
margin-bottom: 10px;
font-family: SourceHanSansCN-Normal;
font-size: 13px;
line-height: 14px;
letter-spacing: 1.3966px;
text-align: left;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chosen-video .content ul .video-item .line {
width: 100%;
height: .5px;
background: hsla(0, 0%, 100%, .5);
}
.chosen-video .content ul .video-item:nth-child(2n) {
margin-top: 80px;
}部分代码JS
//预加载图片
slides = $('.swiper-slide');
Img = [];
slides.each(function (index, element) {
Img[index] = new Image();
Img[index].src = slides.eq(index).attr('data-poster');
slidesLength = index
//使用附加文本替换virtualTranslate，避免鼠标滚轮失效
// $("#txt").append('<div class="box">' + slides.eq(index).html() + '</div>')
});
tweenObj = {
translate: 0
};
var canvas = document.getElementById("shows");
ctx = canvas.getContext("2d");
window.onload = function () {
var mySwiper = new Swiper('.swiper-container', {
watchSlidesProgress: true,
// virtualTranslate:true,较好的解决方案但会导致滚轮失效
mousewheel: true,
grabCursor: true,
autoplay: false,
speed: 700,//限制滚轴时间间隔
on: {
init: function () {
resize(this);
/*预加载动画*/
tl = new TimelineMax();
tl.to(".tip-bg", 0, {width: '100%'})
.set(".tiptxt", {autoAlpha: 0})
.to(".tip-bg", 0, {x: '101%'}, "+=0.2")
.to(".preload-bg", 0, {x: '101%'}, "-=0.1")
.set("#preload", {autoAlpha: 0})
},
resize: function () {
resize(this);
},
setTranslate: function () {
draw(this, 1);
},
},
});
}
function resize(swiper) {
clientWidth = document.body.clientWidth
clientHeight = document.body.clientHeight
canvas.width = clientWidth;
canvas.height = clientHeight;
draw(swiper);
}
function draw(swiper, speed) {
if (typeof (speed) == "undefined") {
speed = 0;
}
TweenMax.killAll();
TweenMax.to(tweenObj, speed, {
tlanslate: swiper.translate, ease: Power4.easeOut, onUpdate: function () {
//如果超出显示范围添加黑色背景
if (swiper.progress < 0 || swiper.progress > 1) {
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, clientWidth, clientHeight);
}
tlanslate = tweenObj.tlanslate
for (i = 0; i <= slidesLength; i++) {
modifer = 1
swiper.$el.find('.box').eq(i).transform('translate3d(' + (tlanslate / clientWidth + i) * clientWidth * modifer + 'px, 0, 0)');
}
}
})
}
$(function () {
$(".video-hover").mouseover(function () {
$(this).children("video").trigger('play');
$(this).children("video").show()
})
$(".video-hover").mouseout(function () {
$(this).children("video")[0].currentTime = 0
$(this).children("video").trigger('pause');
$(this).children("video").hide()
})
//切换
$(".nav li").each(function (index) {
$(this).click(function () {
$(".ul-active").removeClass("ul-active");
$(".nav-item").removeClass("active");
$(".content .ul-item").eq(index).addClass("ul-active");
$(this).addClass("active")
});
})
})
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
