这非常具有挑战性。我已经在这个codepen中获得了我想要的主要功能。 SVG主要分为3个部分,当您单击“查找更多”按钮时,中间部分会滑离其他部分。
我的主要问题是我需要它作为浏览器的完整视口。我似乎无法调整大小以匹配任何屏幕大小,我需要使用SVG作为内联元素,以便我可以做动画。
我的代码(与上面的笔相同)如下所示:
HTML
<div class="home-overlay">
<svg width="100vw" height="100vh" viewBox="0 0 1440 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Desktop HD</title>
<desc>Created with Sketch.</desc>
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="100%" width="100%">
<image x="0" y="0" height="100%" width="100%" xlink:href="https://hd.unsplash.com/photo-1465281508053-aee07fc08957" />
</pattern>
</defs>
<polygon id="lines-left" fill="url(#image)" points="0 0 310 0 400 1024 0 1024"></polygon>
<polygon id="lines-right" fill="url(#image)" points="1040 0 1440 0 1440 1024 1130 1024"></polygon>
<polygon id="lines-center" class="lines-center" fill="url(#image)" points="310 0 1040 0 1130 1024 400 1024"></polygon>
<polygon id="lines-center-image" class="lines-center" fill="rgba(255,255,255,0.2)" points="310 0 1040 0 1130 1024 400 1024"></polygon>
</svg>
<button id="clear_overlay">Find out more</button>
</div>
SCSS
.home-overlay {
z-index: 9999;
width: 100%;
height: 100%;
// position: fixed;
display: block;
&.clearitout {
svg {
polygon#lines-left {
transform: translate(91px, 1024px);
transition: transform 1s ease;
}
polygon#lines-right {
transform: translate(91px, 1024px);
transition: transform 1s ease;
}
polygon.lines-center {
transform: translate(-91px, -1024px);
transition: transform 1s ease;
}
}
}
button#clear_overlay {
position: absolute;
top: 300px;
left: 35%;
}
}
的jQuery
$('#clear_overlay').on('click', function(){
$('.home-overlay').addClass('clearitout');
$('.home-overlay').fadeOut(800);
});
答案 0 :(得分:0)
如果删除SVG的宽度和高度会怎样?
jQuery('#clear_overlay').on('click', function() {
jQuery('.home-overlay').addClass('clearitout');
jQuery('.home-overlay').fadeOut(800);
});
&#13;
.home-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: hidden;
&.clearitout {
svg {
polygon#lines-left {
transform: translate(91px, 1024px);
transition: transform 1s ease;
}
polygon#lines-right {
transform: translate(91px, 1024px);
transition: transform 1s ease;
}
polygon.lines-center {
transform: translate(-91px, -1024px);
transition: transform 1s ease;
}
}
}
}
button#clear_overlay {
position: absolute;
top: 300px;
left: 35%;
}
svg {
width: 100%
}
body {
margin: 0
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home-overlay">
<svg viewBox="0 0 1440 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Desktop HD</title>
<desc>Created with Sketch.</desc>
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="100%" width="100%">
<image x="0" y="0" height="100%" width="100%" xlink:href="https://hd.unsplash.com/photo-1465281508053-aee07fc08957" />
</pattern>
</defs>
<polygon id="lines-left" fill="url(#image)" points="0 0 310 0 400 1024 0 1024"></polygon>
<polygon id="lines-right" fill="url(#image)" points="1040 0 1440 0 1440 1024 1130 1024"></polygon>
<polygon id="lines-center" class="lines-center" fill="url(#image)" points="310 0 1040 0 1130 1024 400 1024"></polygon>
<polygon id="lines-center-image" class="lines-center" fill="rgba(255,255,255,0.2)" points="310 0 1040 0 1130 1024 400 1024"></polygon>
</svg>
</div>
<button id="clear_overlay">Find out more</button>
&#13;