万奢网-名品奢网名表回收网 › 首页 ›手表回收云资讯› 手表导购 › 查看内容

css 动画滑块滚动到某个位置时候

2023-2-17 15:38| 发布者: wanhu| 查看: 79| 评论: 0

摘要: 标题jsviewScroll(); function viewScroll () { var _ismobile = false; var windowTop = $(window).scrollTop(); var windowBottom = windowTop + $(window).height(); var showNum = !_ismobile ...

标题js

viewScroll();
function viewScroll () {
var _ismobile = false;
var windowTop = $(window).scrollTop();
var windowBottom = windowTop + $(window).height();
var showNum = !_ismobile ? 4 : 16;
$('.ani-view2').each(function () {

var pageQ1 = $(this).offset().top + $(this).height() / showNum;
var pageQ3 = $(this).offset().top + $(this).height() / 1;
if ((pageQ1 <= windowBottom) && (pageQ3 >= windowTop)) {
if ($(this).hasClass("fade-in-down2")) $(this).addClass('fadeInDown2');
if ($(this).hasClass("fade-in-up2")) $(this).addClass('fadeInUp2');
if ($(this).hasClass("fade-in-left2")) $(this).addClass('fadeInLeft2');
if ($(this).hasClass("fade-in-right2")) $(this).addClass('fadeInRight2');
} else {
if ($(this).hasClass('fadeInUp2')) $(this).removeClass('fadeInUp2');
if ($(this).hasClass('fadeInDown2')) $(this).removeClass('fadeInDown2');
if ($(this).hasClass('fadeInLeft2')) $(this).removeClass('fadeInLeft2');
if ($(this).hasClass('fadeInRight2')) $(this).removeClass('fadeInRight2');
}
});
}

html

<div class="productAdvantages">
<div class="productTitle modelTitle">
产品优势
</div>
<div class="productContent">
<div class="productContentInner">
<div class="productContentL ani-view2 fade-in-left2 fadeInLeft2">
<div class="productContentLItem">
<div class="productContentLItemTitle">
党建引领
</div>
<p style="color:#999999;font-size: 13px;line-height: 2;letter-spacing: 1px;">
处处体现党的领导地位，处处发挥党员的先锋作用；红色物业提供代办服务，党员楼栋争创文明社区。
</p>
</div>
<div class="productContentLItem" style="display:flex;align-items: center;">
<div>
<div class="productContentLItemTitle">
视频调解
</div>
<p style="color:#999999;font-size: 13px;line-height: 2;letter-spacing: 1px;">
以线上视频会议的形式进行矛盾调解的预约、组织、调解、记录等过程。
</p>
</div>
</div>
<div class="productContentLItem" style="display:flex;align-items: flex-end;">
<div>
<div class="productContentLItemTitle">
一屏知所有
</div>
<p style="color:#999999;font-size: 13px;line-height: 2;letter-spacing: 1px;">
将社区内数据资源整合汇总，结合GIS，在大屏上实时体现各项数据的详情、分布情况和统计信息，辅助领导指挥决策。
</p>
</div>
</div>
</div>
<div style="padding:30px 0;box-sizing: border-box;">
<div class="productContentC ani-view2 fade-in-down2 fadeInDown2"></div>
</div>
<div class="productContentR ani-view2 fade-in-right2 fadeInRight2">
<div class="productContentLItem">
<div class="productContentLItemTitle">
网格一键呼叫
</div>
<p style="color:#999999;font-size: 13px;line-height: 2;letter-spacing: 1px;">
实现一对多、一对一的在线视频呼叫功能。巡格中心实时视频/语音呼叫正在巡格的网格管理员实现支援调度，或者网格员遇到突发情况也可呼叫巡格中心。
</p>
</div>
<div class="productContentLItem" style="display:flex;align-items: center;">
<div>
<div class="productContentLItemTitle">
律师面对面
</div>
<p style="color:#999999;font-size: 13px;line-height: 2;letter-spacing: 1px;">
群众足不出社区即可预约和接受法律咨询服务
</p>
</div>
</div>
<div class="productContentLItem" style="display:flex;align-items: flex-end;">
<div>
<div class="productContentLItemTitle">
经济生活圈
</div>
<p style="color:#999999;font-size: 13px;line-height: 2;letter-spacing: 1px;">
展示社区（村）内营业门店的介绍、联系方式、位置等信息，居民可直接通过入驻店铺在线购物
</p>
</div>
</div>
</div>
</div>
</div>
</div>

css

/* page animation */

/* 动画函数 */
.ani-view2 {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

/* 向下淡出向上淡入动画函数 */
@-webkit-keyframes fadeInDown2 {
0% {
opacity: 0;
-webkit-transform: translateY(20px)
}

100% {
opacity: 1;
-webkit-transform: translateY(0)
}
}

@-moz-keyframes fadeInDown2 {
0% {
opacity: 0;
-moz-transform: translateY(20px)
}

100% {
opacity: 1;
-moz-transform: translateY(0)
}
}

@-o-keyframes fadeInDown2 {
0% {
opacity: 0;
-o-transform: translateY(20px)
}

100% {
opacity: 1;
-o-transform: translateY(0)
}
}

@keyframes fadeInDown2 {
0% {
opacity: 0;
transform: translateY(20px)
}

100% {
opacity: 1;
transform: translateY(0)
}
}

/* 向下淡出向上淡入class名 */
.ani-view2.fade-in-down2 {
opacity: 0;
opacity: 1\0/IE9;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-ms-transform: translateY(0)\0/IE9;
}

.ani-view2.fadeInDown2 {
-webkit-animation-name: fadeInDown2;
-moz-animation-name: fadeInDown2;
-o-animation-name: fadeInDown2;
animation-name: fadeInDown2;
}

/* 向左淡出向右淡入class名 */
@-webkit-keyframes fadeInLeft2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px)
}

100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}

@-moz-keyframes fadeInLeft2 {
0% {
opacity: 0;
-moz-transform: translateX(-100px)
}

100% {
opacity: 1;
-moz-transform: translateX(0)
}
}

@-o-keyframes fadeInLeft2 {
0% {
opacity: 0;
-o-transform: translateX(-100px)
}

100% {
opacity: 1;
-o-transform: translateX(0)
}
}

@keyframes fadeInLeft2 {
0% {
opacity: 0;
transform: translateX(-100px)
}

100% {
opacity: 1;
transform: translateX(0)
}
}

.ani-view2.fade-in-left2 {
opacity: 0;
opacity: 1\0/IE9;
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-o-transform: translateX(-100px);
transform: translateX(-100px);
-ms-transform: translateX(0)\0/IE9;
}

.ani-view2.fadeInLeft2 {
-webkit-animation-name: fadeInLeft2;
-moz-animation-name: fadeInLeft2;
-o-animation-name: fadeInLeft2;
animation-name: fadeInLeft2;
}

/* 向右淡出向左淡入动画函数 */
@-webkit-keyframes fadeInRight2 {
0% {
opacity: 0;
-webkit-transform: translateX(100px)
}

100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}

@-moz-keyframes fadeInRight2 {
0% {
opacity: 0;
-moz-transform: translateX(100px)
}

100% {
opacity: 1;
-moz-transform: translateX(0)
}
}

@-ms-keyframes fadeInRight2 {
0% {
opacity: 0;
-ms-transform: translateX(100px)
}

100% {
opacity: 1;
-ms-transform: translateX(0)
}
}

@-o-keyframes fadeInRight2 {
0% {
opacity: 0;
-o-transform: translateX(100px)
}

100% {
opacity: 1;
-o-transform: translateX(0)
}
}

@keyframes fadeInRight2 {
0% {
opacity: 0;
transform: translateX(100px)
}

100% {
opacity: 1;
transform: translateX(0)
}
}

.ani-view2.fade-in-right2 {
opacity: 0;
opacity: 1\0/IE9;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
-ms-transform: translateX(0)\0/IE9;
}

.ani-view2.fadeInRight2 {
-webkit-animation-name: fadeInRight2;
-moz-animation-name: fadeInRight2;
-o-animation-name: fadeInRight2;
animation-name: fadeInRight2;
}

/* 向上向下3d函数 */

@-webkit-keyframes fadeInUp2 {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInUp2 {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

.fadeInUp2 {
-webkit-animation-name: fadeInUp2;
animation-name: fadeInUp2;
}

.ani-view2.fade-in-up2 {
opacity: 0;
opacity: 1\0/IE9;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-ms-transform: translateY(0)\0/IE9;
}

.ani-view2.fadeInUp2 {
-webkit-animation-name: fadeInUp2;
-moz-animation-name: fadeInUp2;
-o-animation-name: fadeInUp2;
animation-name: fadeInUp2;
}

我建了一个前端小白交流群，添加进入交流群。我会给大家分享我收集整理的各种学习资料，组织大家一起做项目练习，帮助大家匹配一位学习伙伴互相监督学习，欢迎加入

作者：探索未知zxx
链接：css 动画滑块滚动到某个位置时候