Skip to content

Instantly share code, notes, and snippets.

@cyio

cyio/index.html Secret

Created August 29, 2017 09:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cyio/35bb90d1e9ea65980994e47f4de25ef4 to your computer and use it in GitHub Desktop.
Save cyio/35bb90d1e9ea65980994e47f4de25ef4 to your computer and use it in GitHub Desktop.
Download ZIP
www.zigeer.com 自个官网
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="自个，自个网，自个官网，自个创意t恤，zigeer，自己设计T恤，T恤设计网站，个性定制，T恤定制，Tee定制，手机壳定制，手机壳设计，苹果手机壳定制，帆布袋定制，个性化，创造，定制平台，创意礼品，定制礼品，插画师，设计师，原创插画" />
<meta name="description" content="自个网，是一家面向设计师，IP以及企业，专注于原创插画周边产品的在线定制平台。以T恤为主要载体，涵盖手机壳，帆布袋，卫衣，束口包等一系列产品，满足个性化高品质商品的单件订购需求。" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<!--[if gte IE 8]><![endif]-->
<!--[if lt IE 9]>
<![endif]-->
<title>自个</title>
<link href="/Themes/Default/Assets/cssmin/master?v=3cqWRhT8FXX6MsMkyqXQbX6zeGZvcRxtog_k0VUmBuQ1" rel="stylesheet"/>
<link href="/Themes/Default/Assets/Css/animatezg.css" rel="stylesheet" />
<style>
body {
overflow: hidden;
}
#main-content {
padding-bottom: 0px;
}
</style>
<script src="/Themes/Default/Assets/Scripts/jquery.min.js"></script>
<script src="/Themes/Default/Assets/Scripts/wow.min.js"></script>
<script src="/Themes/Default/Assets/Scripts/jquery-extend.js"></script>
<!-- 视差动画 -->
<script type="text/javascript">
$(function () {
/* 绑定滚动事件 */
$(window).bind('scroll', function () {
parallaxScroll();
});
function parallaxScroll() {
var scrolled = $(window).scrollTop();
var alpacolpr = scrolled * 0.0005 + 0.4;
if (alpacolpr > 0.7) {
alpacolpr = 0.7;
}
$('.banVideozz').css('background-color', 'rgba(0,0,0,' + alpacolpr + ')')
if (scrolled > 0) {
$('.topWowqd').removeClass('wow').removeClass('fadeInUp').removeClass('animated');
}
};
$('.banFontonecon').show(100).delay(100);
});
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
new WOW().init();
};
</script>
<script type='text/javascript'>
var _vds = _vds || [];
window._vds = _vds;
(function() {
_vds.push(['setAccountId', '887e607120fe9e33']);
(function() {
var vds = document.createElement('script');
vds.type = 'text/javascript';
vds.async = true;
vds.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'dn-growing.qbox.me/vds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(vds, s);
})();
})();
</script>
</head>
<body>
<!-- 导航 -->
<div>
<div class="ztbox">
<div class="weepr108 clearfix">
<span class="tit">一件即可定制</span>
<div class="headerloginuserinfo">
<div>
<ul class="fr loginbox">
<!-- 登录后此处隐藏 -->
<li class="login-zcdl"><a href="/Account/Login">登录</a></li>
<li class="login-line"></li>
<li class="login-zcdl"><a href="/Account/SignUp">注册</a></li>
</ul>
</div>
</div>
<div class="headmessage login-affont fr">
<span class="msginform">
<i class="summsg" style="display: none;"></i>
</span>
<ul class="msglist">
<li><a class="msglistcon js-xitongmsgcount" href="/UCenter/Message">系统消息<span class="msgnum" style="display: none;">0</span></a></li>
<li><a class="msglistcon borderb0 js-messagecount" href="/UCenter/Message/Comment">留言消息<span class="msgnum" style="display: none;">0</span></a></li>
</ul>
</div>
<a class="sbzin fr" id="songbanzhi" href="/sbztshirt">自个网&左佐匠制 松阪织T恤限量首发</a>
<!-- 5月13日活动 -->
</div>
</div>
<div class="nav">
<div class="weepr108 clearfix">
<div class="hlogo fl">
<a href="/">
<img src="/Themes/Default/Assets/Images/hlogo.png" alt="" />
</a>
</div>
<div class="fr clearfix">
<ul class="nav-list fl clearfix">
<li class="navindex"><a href="/">首页</a></li>
<li class="navproject" id="nav-about" _index="0">
<a href="javascript:void(0)" class="cztxline">开始设计</a>
</li>
<li class="navindex mr36">
<a href="/Mall/Index">自个商城</a>
<i class="news-icon"><img src="/Themes/Default/Assets/images/iconhot4.gif" /></i>
</li>
<li class="navindex mr36">
<a href="/GroupCustomization/Index">团体定制</a>
</li>
<li class="navindex mr36">
<a href="/SNE">798艺术区</a>
</li>
<li class="navindex">
<a href="/Angel/AngelShow">自个秀</a>
</li>
<li class="navproject" _index="1">
<a href="javascript:void(0)">自个是神马</a>
</li>
<!--
<li class="navindex mr16">
<a href="/Ucenter/Message">消息中心</a>
<i class="news-cell msg" style="display: none">0</i>
</li>-->
</ul>
<div class="shopcar fr clearfix">
<span class="shopcarline"></span>
<div class="car-box fr">
<a href="/Cart">购物车(<b></b>)</a>
</div>
</div>
</div>
</div>
<div class="nav-box1" id="nav-box">
<div class="nav-box">
<div class="weepr108">
<ul class="navaboutcon cleafix on">
<li><a href="/Tshirt"><i class="navicon icontx"></i>T恤</a></li>
<li><a href="/PhoneShell"><i class="navicon iconsjk"></i>手机壳</a></li>
<li><a href="/Canvas"><i class="navicon iconfbd"></i>帆布袋</a></li>
<li><a href="/Sweater"><i class="navicon iconwy"></i>卫衣</a></li>
<li><a href="/Pocket"><i class="navicon iconskd"></i>束口袋</a></li>
<li><a href="/PostCard"><i class="navicon iconmxp"></i>明信片</a></li>
<li><a href="/Fpainting"><i class="navicon iconkh"></i>框画</a></li>
<li class="comingsoon">
<a href="javascript:;"><i class="navicon icontl"></i>台历</a>
<span class="comingsooncon">
敬请期待
</span>
</li>
</ul>
<ul class="navaboutcon cleafix knowzigeer">
<li><a href="/Help/About"><i class="navicon iconabout"></i>了解自个</a></li>
<li><a href="/Help/"><i class="navicon iconhelp"></i>帮助中心</a></li>
<li><a href="/Help/Feedback"><i class="navicon iconidea"></i>意见反馈</a></li>
<li><a href="/Help/Disclaimer"><i class="navicon iconstate"></i>免责声明</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="main-content">
<!-- 遮罩 -->
<div class="zgbomb-zz"></div>
<!-- 第一视频弹框 -->
<div class="indxbomb-con indxbomb-con01 clearfix">
<div class="indxbombiframe01">
<iframe src="" name="iframepage" frameborder="0" scrolling="no" width="100%" style="width: 760px; height: 490px" class="fl"></iframe>
</div>
<div class="tkvedioright">
<div class="mt20 mr20 clearfix">
<a href="javascript:void(0)" class="zgbomb-delebtn"></a>
</div>
<div class="tkvediorightcon">
<h3>字体设计师 左佐</h3>
<p>造字对我本身就是生活的一部分</p>
<p>无需坚持，已然习惯。</p>
<p>类似旧日街头卖字的，有点手艺</p>
<p>纷扰里图个安宁，到老太短，至死不休。</p>
<p>一起去创造属于自个的专注。</p>
</div>
<div class="mt50">
<a href="/Tshirt/" class="inbbtn bmiddle">
<span>一起去创造</span>
</a>
</div>
</div>
</div>
<!-- 第二视频弹框 -->
<div class="indxbomb-con indxbomb-con02 clearfix">
<div class="indxbombiframe02">
<iframe src="" name="iframepage" frameborder="0" scrolling="no" width="100%" style="width: 760px; height: 490px" class="fl"></iframe>
</div>
<div class="tkvedioright">
<div class="mt20 mr20 clearfix">
<a href="javascript:void(0)" class="zgbomb-delebtn"></a>
</div>
<div class="tkvediorightcon">
<h3>相辉 & 林Caroline</h3>
<p>真正的生活，没有那么多诗情画意</p>
<p>最美好的是，遇到一个人</p>
<p>他可以在你没说完的时候猜到你的后半句话</p>
<p>让我们一起创造属于自个的生活</p>
</div>
<div class="mt50">
<a href="/Tshirt/" class="inbbtn bmiddle">
<span>一起去创造</span>
</a>
</div>
</div>
</div>
<!-- 第三视频弹框 -->
<div class="indxbomb-con indxbomb-con03 clearfix">
<div class="indxbombiframe03">
<iframe src="" name="iframepage" frameborder="0" scrolling="no" width="100%" style="width: 760px; height: 490px" class="fl"></iframe>
</div>
<div class="tkvedioright">
<div class="mt20 mr20 clearfix">
<a href="javascript:void(0)" class="zgbomb-delebtn"></a>
</div>
<div class="tkvediorightcon">
<h3>插画师 喵魂</h3>
<p>我拥有无限的可能性</p>
<p>如果你身处黑暗</p>
<p>请相信自己的声音，向前走</p>
<p>我愿成为你的黑夜之光</p>
<p>让我们一起去创造，属于自个的独特</p>
</div>
<div class="mt50">
<a href="/Tshirt/" class="inbbtn bmiddle">
<span>一起去创造</span>
</a>
</div>
</div>
</div>
<!-- 视频 -->
<div class="sectionVideo">
<div class="sliderbox">
<div class="sliderarowzg"></div>
</div>
<div class="banVideoBox">
<div class="banVideo">
<video id="banVideoid" src="/Themes/Default/Assets/video/bannerv.mp4"></video>
<div class="banVideozz"></div>
<div class="vmrbg"></div>
</div>
</div>
<div class="banFont">
<section class="banFontone clearfix panel options01" data-section-name="options01">
<div class="wow fadeInUp hinge topWowqd banFontonecon">
<p>自个听取10000+插画师如何创造一件好T恤的建议</p>
<h2>最懂插画师的T恤，轻松一件定制</h2>
<div class="wow fadeInUp hinge topWowqd" data-wow-delay="0.3s">
<a href="/Tshirt/" class="inwbtn mt120" data-wow-delay="0.3s">
<span>一起去创造</span>
</a>
</div>
</div>
</section>
<section class="banFonttow clearfix panel options02" data-section-name="options02">
<div class="banFonttbf">
<p>如果你碰到洗了领子不变形</p>
<p>穿着又舒服、版型又很合适自己</p>
<p>最重要是图案是自己设计的T恤</p>
<p>插画师们，请珍惜！</p>
<div class="mt20">
<a href="/Tshirt/" class="inwbtn">
<span>一起去创造</span>
</a>
</div>
</div>
</section>
</div>
</div>
<section class="sectionThvideo panel options03" data-section-name="options03">
<div class="ThvideoBoxzs">
<div class="ThvideoBox weepr108">
<ul class="ThvideoUl clearfix">
<li class="wow fadeInUp fast" data-wow-delay="0.1s">
<div class="fadimg">
<img src="/Themes/Default/Assets/Images/pzzimg.png" alt="">
<div class="fadbbox">
<div class="fadbfbtn bfbtn01"></div>
<div class="fadfontbg"></div>
<div class="fadfont">
<h2>字体设计师 左佐</h2>
<div class="mt10">
<p>造字对我本身就是生活的一部分</p>
<p>无需坚持，已然习惯。</p>
<p>类似旧日街头卖字的，有点手艺</p>
<p>纷扰里图个安宁，到老太短，至死不休。</p>
<p>一起去创造属于自个的专注。</p>
</div>
</div>
</div>
</div>
<div class="fadhead clearfix mt30">
<div class='fadheadimg'>
<img src="/Themes/Default/Assets/Images/zuozuoman.png" alt="">
</div>
<p>字体设计师</p>
<h2>左佐</h2>
<h4>男 / 朝阳 / 平面设计师　粉丝：39360</h4>
</div>
</li>
<li class="wow fadeInUp fast" data-wow-delay="0.2s">
<div class="fadimg">
<img src="/Themes/Default/Assets/Images/pxhimg.png" alt="">
<div class="fadbbox">
<div class="fadbfbtn bfbtn02"></div>
<div class="fadfontbg"></div>
<div class="fadfont">
<h2>相辉 & 林Caroline</h2>
<div class="mt10">
<p>真正的生活，没有那么多诗情画意</p>
<p>最美好的是，遇到一个人</p>
<p>他可以在你没说完的时候猜到你的后半句话</p>
<p>让我们一起创造属于自个的生活</p>
</div>
</div>
</div>
</div>
<div class="fadhead clearfix mt30">
<div class='fadheadimg'>
<img src="/Themes/Default/Assets/Images/linwoman.png" alt="">
</div>
<p>民俗插画师</p>
<h2>林Caroline</h2>
<h4>女 / 朝阳 / 绘画/插画师　粉丝：10309</h4>
</div>
</li>
<li class="wow fadeInUp fast" data-wow-delay="0.3s">
<div class="fadimg">
<img src="/Themes/Default/Assets/Images/pmhimg.png" alt="">
<div class="fadbbox">
<div class="fadbfbtn bfbtn03"></div>
<div class="fadfontbg"></div>
<div class="fadfont">
<h2>插画师 喵魂</h2>
<div class="mt10">
<p>我拥有 无限的可能性</p>
<p>如果你身处黑暗</p>
<p>请相信自己的声音，向前走</p>
<p>我愿成为你的黑夜之光</p>
<p>让我们一起去创造，属于自个的独特</p>
</div>
</div>
</div>
</div>
<div class="fadhead clearfix mt30">
<div class='fadheadimg'>
<img src="/Themes/Default/Assets/Images/miaowoman.png" alt="">
</div>
<p>现代插画师</p>
<h2>Catsoul喵魂</h2>
<h4>女 / 朝阳 / 绘画/插画师　粉丝：15688</h4>
</div>
</li>
</ul>
</div>
</div>
</section>
<section class="sectionPrudct panel options04" data-section-name="options04">
<div class="weepr108 sectionPrudctBox">
<div class="prudctImg"></div>
<div class="prudcfont">
<div class="prudcfontBox">
<h3 class=" wow fadeInUp ml10" data-wow-delay="0.2s">可自由裁剪的极致T恤</h3>
<div class="prudcNum clearfix mb10">
<div class="shuline01"></div>
<div class="shuline02"></div>
<div class="henline"></div>
<div class="clearfix">
<div class="wow bounceInLeft" data-wow-delay="0.2s">
<div class="prudcNumLiset">
<h3>16</h3>
<p>产品研发</p>
<i>16个月的产品设计</i>
</div>
<div class="prudcNumLiset">
<h3>38</h3>
<p>面料选择</p>
<i>尝试38种面料成分</i>
</div>
<div class="prudcNumLiset">
<h3>14</h3>
<p>版型设计</p>
<i>修改14次版型设计</i>
</div>
</div>
<div class="wow bounceInRight" data-wow-delay="0.2s">
<div class="prudcNumLiset">
<h3>12</h3>
<p>包装创意</p>
<i>推翻了12款包装设计</i>
</div>
<div class="prudcNumLiset">
<h3>24</h3>
<p>辅料搭配</p>
<i>24种洗唛材料选择</i>
</div>
<div class="prudcNumLiset">
<h3>86</h3>
<p>印花测试</p>
<i>86次的印花测试</i>
</div>
</div>
</div>
</div>
<div class="bbtmbox fl ml10">
<a href="/Tshirt/" class="inbbtn wow fadeInUp" data-wow-delay="0s">
<span>一起去创造</span>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="clearfix sectionFicon panel options05" data-section-name="options05">
<div class="weepr108 fiveicon">
<ul class="clearfix">
<li class="wow zoomIn fast" data-wow-delay="0.01s">
<a href="javascript:void(0)" class="yjdzicon"></a>
<p>一件即可定制</p>
</li>
<li class="wow zoomIn fast" data-wow-delay="0.2s">
<a href="javascript:void(0)" class="shmlicon"></a>
<p>奢华面料采用</p>
</li>
<li class="wow zoomIn fast" data-wow-delay="0.3s">
<a href="javascript:void(0)" class="jrfricon"></a>
<p>精益缝纫车工</p>
</li>
<li class="wow zoomIn fast" data-wow-delay="0.4s">
<a href="javascript:void(0)" class="cfbxicon"></a>
<p>超凡版型设计</p>
</li>
<li class="wow zoomIn fast" data-wow-delay="0.5s">
<a href="javascript:void(0)" class="kjyhicon"></a>
<p>科技印花技术</p>
</li>
</ul>
</div>
<div class="sectionScdz">
<div class="sectionScdzfont">
<h3 class="tit wow fadeInUp">上传插画，定制一件属于你自己的T恤</h3>
<div class="mt100">
<a href="/Tshirt/" class="inbbtn wow fadeInUp bmiddle" data-wow-delay="0s">
<span>一起去创造</span>
</a>
</div>
</div>
</div>
</section>
<div class="sectionEsbotom">
<div class="weepr108">
<ul class="sectionEsbotomul clearfix">
<li class="wow fadeInUp fast" data-wow-delay="0.1s">
<a href="/Help/About">
<b class="indexfricon"></b>
<h3>我是谁？</h3>
<p>源于对时尚潮流的感知,对个性化的追求以原创</p>
<p>插画为基本,专注于个性定制事业</p>
</a>
</li>
<li class="wow fadeInUp fast" data-wow-delay="0.2s">
<a href="/Help/About">
<b class="indexonicon"></b>
<h3>做什么？</h3>
<p>让设计师上传原创的插画作品, 体验DIY产品，自个提供</p>
<p>柔性制造、单件的模式帮助其完成出售</p>
</a>
</li>
<li class="wow fadeInUp fast" data-wow-delay="0.3s">
<a href="/Help/About">
<b class="indexthicon"></b>
<h3>为什么做？</h3>
<p>1300万名设计师、画家、摄影师制作原创内容，仅1%获得了</p>
<p>商业回报，99%的创作价值尚未实现，自个想要实现这99%</p>
</a>
</li>
</ul>
</div>
</div>
<div class="panel" data-section-name="options06"></div>
<!-- 右边导航 -->
<ul id="panelnav">
<li class="actvie"><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<!--松坂织-->
<div class="zgbomb-con" style="margin-top:-368px;margin-left:240px;width:0;height:0;overflow:hidden;background:transparent;" id="songbanzhicon">
<a href="javascript:void(0)" class="zgbomb-delebtn" id="sbzclose"></a>
<img class="sbztshirt" src="/Themes/Default/Assets/images/sbztshirt/indexhead.png?v=2" alt="松阪织t恤购买入口"/>
<a class="sbzbuybtnin" href="/SbzTshirt" id="sbzbuybtnin">立即购买</a>
</div>
<div class="zgbomb-zz1" id="sbzzgbomb"></div>
<script src="/Themes/Default/Assets/Scripts/jquery.easing.1.3.js"></script>
<script src="/Themes/Default/Assets/Scripts/scrollify.min.js"></script>
<script>
$(function () {
$.scrollify({
section: ".panel"
});
var songbanzhicon = $('#songbanzhicon'), sbztime = 0, sbzzgbomb = $('#sbzzgbomb');
songbanzhicon.show().animate({
marginTop: '-210px',
marginLeft: '-340px',
width: '640px',
height: '380px',
opacity: 1
}, "easein");
sbzzgbomb.show().css('opacity', 1);
sbzzgbomb.click(function () {
songbanzhicon.animate({
marginTop: '-368px',
marginLeft: '240px',
width: '0',
height: '0',
opacity: 0
}, "easein");
sbztime = setTimeout(function () {
songbanzhicon.hide();
}, 800);
sbzzgbomb.hide();
});
});
$(window).resize(function () {
$.scrollify({
section: ".panel"
});
});
</script>
<!-- 首页播放控制 -->
<script>
var banVideo = document.getElementById('banVideoid')
var tol = 0 //总时长
setTimeout(function () {
$('#banVideoid').animate({ "opacity": "1" }, 1500);
}, 1500);
setTimeout(function () {
banVideo.play()
}, 2000);
banVideo.addEventListener("loadedmetadata", function () {
tol = banVideo.duration;//获取总时长
});
banVideo.addEventListener("timeupdate", function () {
var currentTime = banVideo.currentTime;//获取当前播放时间
var prevTop = 0,
currTop = 0;
$(window).bind('scroll', function () {
currTop = $(window).scrollTop();
//prevTop = currTop; //IE下有BUG，所以用以下方式
setTimeout(function () { prevTop = currTop }, 0);
if (currTop > 900) {
banVideo.pause();
} else if (currTop < prevTop) {
banVideo.play();
}
});
});
//调整首页视频的高度
var _width = $(window).width();
var _height = $(window).height();
var _vdheight = _width * 9 / 16
var _vdwidth = _height * 16 / 9;
if (_width / _height >= 16 / 9) {
$('.banVideo video').width(_width);
$('.banVideo video').height(_vdheight);
$('.banVideo video').css("top", -(_vdheight - _height) / 2 + "px")
$('.banVideo video').css("left", "0");
} else {
$('.banVideo video').height(_height);
$('.banVideo video').width(_vdwidth);
$('.banVideo video').css("top", "0");
$('.banVideo video').css("left", -(_vdwidth - _width) / 2 + "px")
}
$(window).resize(function () {
var _width = $(window).width();
var _height = $(window).height();
var _vdheight = _width * 9 / 16
var _vdwidth = _height * 16 / 9;
if (_width / _height >= 16 / 9) {
$('.banVideo video').width(_width);
$('.banVideo video').height(_vdheight);
$('.banVideo video').css("top", -(_vdheight - _height) / 2 + "px");
$('.banVideo video').css("left", "0");
} else {
$('.banVideo video').height(_height);
$('.banVideo video').width(_vdwidth);
$('.banVideo video').css("top", "0");
$('.banVideo video').css("left", -(_vdwidth - _width) / 2 + "px");
}
});
</script>
</div>
<!-- 全局底部 -->
<script src="/Themes/Default/Assets/Scripts/app/common/designerVideo.js"></script>
<div class="main-footer">
<div class="weepr108 clearfix">
<div class="fl">
<div class="main-footer-hqq clearfix">
<span class="fl">4006-508-550&nbsp;&nbsp;</span>
<a href="http://q.url.cn/s/mFFm6Xm" target="_blank"><img src="/Themes/Default/Assets/Images/qqjt.png"/></a>
</div>
<div class="main-footer-link">
<a href="/Help/About">了解自个</a>
<span>｜</span>
<a href="/Help">帮助中心</a>
<span>｜</span>
<a href="/Help/Feedback">意见反馈</a>
<span>｜</span>
<a href="/Help/Disclaimer">免责声明</a>
</div>
<p class="main-footer-about">自个科技（北京）有限公司 Copyright©2016. All Rights Reserved.</p>
</div>
<div class="main-ewm fr">
<img src="/Themes/Default/Assets/Images/bewm.png" alt="">
</div>
</div>
</div>
<script src="/Themes/Default/Assets/jsmin/footerPartial?v=4FinMCg88qsVuhSiwA3UzA8-Y7Mh1Wh0XSdjbGMMqO81"></script>
<div class="stockhint" id="stockhint">
<i class="stockhintbg stockhinticon"></i>
<i class="stockhintwan stockhinticon"></i>
<span class="hintfont"></span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment