jQuery文章中章节全屏动画切换
1、新建html文档。
2、准备好需要用到的字体图标。
3、书写hmtl代码。
<main>
<section class="main">
<div class="container mainContent">
<div class="zzsc">
<h1>jQuery文章章节平滑切换动画特效 <span>Section Transition With jQuery Animation</span></h1>
</div>
第一个切换
<button class="about">About</button>
</div>
</section>
</main>
<section class="aboutSection">
<div class="container aboutContent">
<h1>About</h1>
第一2个切换
<button class="home">Home</button>
</div>
</section>
4、书写css代码。
* { -web kit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; }
body { text-align: center; -webkit-font-smoothing: antialiased; color: #fff; padding: 0; margin: 0; }
.container { width: 80%; margin: 0 auto; }
body h1 { font-size: 40px; font-weight: 300; letter-spacing: 1px; word-spacing: 2px; text-align: center }
body p { line-height: 1.8em; font-size: 18px; color: #eee; letter-spacing: 1px; font-weight: 300; margin: 50px auto; }
button { padding: 9px 40px; border: none; background: #fff; font-size: 15px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; border-bottom: 2px solid #ddd; color: #4089A6; font-weight: 400; text-transform: uppercase; cursor: pointer }
button.home { color: #3bb17c }
section { padding: 30px 0; margin: 0; position: absolute; overflow: hidden; height: 100vh; top: 0; left: 0; }
section.main { background: #4089A6; height: 100vh; z-index: 99; border-top: 1px solid #4089A6; border-bottom: 1px solid #4089A6; }
section.aboutSection { background: #3bb17c; height: 2px; padding: 0; top: 50vh; left: 50%; width: 5px; display: none; border-top: 1px solid #3bb17c; border-bottom: 1px solid #3bb17c; }
@media screen and (max-width: 830px) {section { overflow-y: scroll; }}
5、书写并添加js代码。
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(function () {
'use strict';
var main = $('.main'), about = $('.aboutSection');
$('.about').click(function () {
main.animate({
'height': '0',
'top': '50vh',
'padding': '0'
}, 300).animate({
'width': '2px',
'left': '50%'
}, 900).fadeOut(200, function () {
about.fadeIn(200);
about.animate({
'width': '100%',
'left': '0'
}, 900);
about.animate({
'min-height': '100vh',
'top': '0',
'padding-top': '50px',
'padding-bottom': '50px'
}, 300);
});
});
$('.home').click(function () {
about.animate({
'min-height': '0',
'height': '0',
'top': '50vh',
'padding': '0'
}, 300).animate({
'width': '2px',
'left': '50%'
}, 900).fadeOut(200, function () {
main.fadeIn(200).animate({
'width': '100%',
'left': '0'
}, 900).animate({
'height': '100vh',
'top': '0',
'padding-top': '100px',
'padding-bottom': '100px'
}, 300);
});
});
});
</script>
6、代码整体结构。
7、查看效果。
