网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
基于JavaScript(jQuery)和CSS实现的全屏动画垂直演示应用程序(也称为全屏滑块)。
1. 在html网页添加演示文稿代码。
<!--Page 1-->
<section id="page_1" class="page">
<h1>Welcome To My Presentation</h1>
<p>
Presentation 1
</p>
<a href="#page_2" class="btn"
>Next Page
</a>
</section>
<!--Page 2-->
<section id="page_2" class="page">
<h1>Welcome To Page-2</h1>
<p>
Presentation 2
</p>
<div>
<a href="#page_1" class="btn btn_dark"
>Prev Page>
</a>
<a href="#page_3" class="btn"
>Next Page
</a>
</div>
</section>
<!--Page 3-->
<section id="page_3" class="page">
<h1>Welcome To Page-3</h1>
<p>
Presentation 3
</p>
<div>
<a href="#page_2" class="btn btn_dark"
>Prev Page <i class="fas fa-arrow-circle-up"> </i>
</a>
</div>
</section>
2. 布局主要css代码
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
color: #fff;
margin: 0;
padding: 0;
overflow: hidden;
}
.page {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 4rem;
}
.page h1 {
font-size: 4rem;
line-height: 1.2;
margin: 1rem;
}
.page p {
font-size: 1.3rem;
}
.btn {
display: inline-block;
padding: 1rem 2rem;
background: #f4f4f4;
color: #333;
border-radius: 5px;
border: none;
margin-top: 1rem;
font-size: 1.1rem;
text-decoration: none;
transition: all ease-in 0.3s;
}
.btn:hover,
.btn_dark {
background: #333;
color: #fff;
}
.btn_dark:hover {
background: #f4f4f4;
color: #333;
}
3. 自定义背景样式代码:
#page_1 {
background: '#222';
}
#page_2 {
background: '#333';
}
#page_3 {
background: '#444';
}
4.使用CSS3制作内容动画。
#page_1 h1 {
transform: translateY(-1000px);
animation: heading 1s forwards ease-in;
}
@keyframes heading {
to {
transform: translateY(0);
}
}
#page_1 p {
transform: translateX(-2000px);
animation: text 2.7s forwards ease-in;
}
@keyframes text {
to {
transform: translateX(0);
}
}
5. 添加切换代码。
$(".btn").on("click", function(event) {
if (this.hash !== "") {
event.preventDefault();
const hash = this.hash;
$("html, body").animate(
{
scrollTop: $(hash).offset().top
},
800
);
}
});
转载请注明来源:jQuery+CSS页面全屏动画垂直滑块
本文永久链接地址:https://www.moyouyouw.cn/code/780.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论