网站滑到指定的位置给div添加动画效果

最新推荐文章于 2019-10-27 10:29:40 发布
最新推荐文章于 2019-10-27 10:29:40 发布
阅读量426 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/junyi-bk/p/11327386.html
版权 
<!DOCTYPE html>
<html>
<head>
<style> 
.anim-show
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */

/* 兼容调试如果animation-name执行，那么-wekit-animation-name则不执行 */
-webkit-animation-name:mymove;
-webkit-animation-duration:2s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
}

@keyframes mymove /* 对应animation-name，里面为执行的动画*/
{
from {top:200px;}/*执行动画的初始位置*/
to {top:0px;}/*动画结束位置*/
0% {
opacity: 0.1; /*初始状态 透明度为10%*/
}
50% {
opacity: 0.5; /*中间状态 透明度为50%*/
}
100% {
opacity: 1; /*结尾状态 不透明*/
}
}

@-webkit-keyframes mymove/* 对应-webkit-animation-name，里面为执行的动画*/
{
from {left:200px;}/*执行动画的初始位置*/
to {left:0px;}/*动画结束位置*/
}
</style>
</head>
<body>
    <div style="height: 2000px;">

    </div>

    <div class="anim">
        11111
    </div>
    
    <div style="height: 2000px;">

    </div>

    <div class="anim">
        11111
    </div>


    
    <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
        //滚动监控添加动画

        var anim = $(".anim");//触发遍历所用的类

        setTimeout(function(){

            $(window).scroll(function() {

                roll();

            })

            $(window).resize(function() {

                roll();

            })

            roll();

        },6)

        function roll() {

            var oHeight = $(window).height();

            var ScrVal = $(window).scrollTop();

            anim.each(function(i) {

                if (ScrVal + oHeight > anim.eq(i).offset().top - 50 ){

                    anim.eq(i).addClass("anim-show");

                }

            })

        }
    </script>
</body>
</html>

 

转载于:https://www.cnblogs.com/junyi-bk/p/11327386.html

weixin_38170829
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生css页面滑动到指定位置开始动画_html/css 滚动到元素位置，显示加载动画
weixin_39806818的博客
12-22 1821
每次滚动到元素时，都显示加载动画，如何添加？元素添加初始参数以上图中的动画为例，添加俩个左右容器，将内容放置在容器内部。添加初始数据，默认透明度0、左右分别移动100px。1 //左侧容器2 .item-leftContainer{3 opacity:0;4 transform:translateX(-100px);5 }6 //右侧容器7 .item-rightContainer{8 opa...
HTML div动画
遗声落西秦
11-28 885
没动作 鼠标放上去 .div01 { width: 882px; height: 86px; background-color: brown; margin: 0 auto; padding: 0px; position: absolute; overflow: hidden; border:
当页面滑到指定位置时触发css3动画效果
weixin_44356616的博客
05-24 1万+
$(window).scroll(function(){ if($(window).scrollTop() > 100){//这里100代表你要动画的元素离最顶层的距离，console.log一下就知道了。 $('.box').addClass('active') }else{ $('.box').removeClass('active') } }); 就这么简单O(∩_∩)...
屏幕滚动到相应位置，执行css动画
11-06
当屏幕滚动到相应的位置之后，css animation动画再开始执行
实现滚到div时淡入效果
weixin_43966635的博客
10-27 1899
首先实现淡入的动画 CSS代码如下： @keyframes float { from { position: relative; margin-top:200px; opacity: 0; } to { position: relative; margin-top: 50px; opacity:...
滚动至DIV后，动画显示
12-11
插件描述：页面滚动至特定DIV后之后，div动画显示. 参考示例：http://www.jq22.com/jquery-info5108
elementUI滚动条,点击dom元素滚动到指定位置.pdf
12-16
ElementUI 滚动条点击 DOM 元素滚动到指定位置的实现细节需要考虑多个方面，包括滚动条的状态、事件处理函数和动画效果。通过使用 ElementUI 的滚动条组件和 Vue.js 的 Composition API，我们可以快速实现滚动条的...
纯CSS3实现的响应鼠标滑过DIV元素旋转动画效果源码.zip
11-20
在本资源中，我们关注的是一个使用纯CSS3实现的响应式鼠标滑过DIV元素时的旋转动画效果。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新特性，包括动画和转换，使得网页设计更加丰富多彩...
基于css3 animate制作绚丽的动画效果
09-24
一旦引入了这个库，你就可以为任何HTML元素添加动画效果。例如，如果你想要一个元素在页面上从左向右弹出，你可以这样写： ```html <div class="animated bounceOutLeft"></div> ``` 在这里，“animated”是基础...
使用Angular 6创建各种动画效果的方法
10-17
Angular 6提供了一个强大的动画框架，使得开发者能够轻松地为Web应用添加丰富多样的动画效果，从而提升用户体验。在这个框架下，我们可以利用Angular的内置API来定义元素从一个状态过渡到另一个状态的过程，创造出...
js跳转到指定div位置
07-21
网页不刷新跳转到指定位置
css怎么让div动起来，实现动画效果一直在动
廖圣平
09-24 1万+
div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite alternate; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow;
Javascript定义类（class）的三种方法
zw946的专栏
09-03 991
Javascript定义类（class）的三种方法 将近20年前，Javascript诞生的时候，只是一种简单的网页脚本语言。如果你忘了填写用户名，它就跳出一个警告。 如今，它变得几乎无所不能，从前端到后端，有着各种匪夷所思的用途。程序员用它完成越来越庞大的项目。 Javascript代码的复杂度也直线上升。单个网页包含10000行Javascript代码，早就司空见惯。
JavaScript实现页面滚动到div区域div以动画方式出现
weixin_30270561的博客
10-12 783
用JavaScript实现页面滚动效果，以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域，该区域以动画方式出现。 这个效果需要二点： 一：我们要先写好一个css动画. 二：用js的监听页面滑动的距离在div刚出现时给div添加动画。 css动画 /*设置动画*/ @keyframes key { ...
CSS3实现div滑入滑出效果（从下往上）
热门推荐
Amy_cloud的博客
08-13 6万+
1，首先需要用的是 CSS3的 target 选择器，配合a标签指定id选择器切换目标元素，用于选取当前活动的目标元素。 2，CSS3 的 transition 动画，这里不做详细介绍 看一下效果图： 点击滑出按钮，元素从底部匀速滑入到页面一定高度；再点击滑入，元素从当前位置匀速滑入期初位置。 直接上代码： &lt;h1&gt;CSS3滑入/滑出效果&lt;/h1&gt; &...
jquery鼠标滚动某个位置触发css3动画特效
@必意玲
12-12 6358
jquery鼠标滚动某个位置触发css3动画特效
cocos creator Animation常用的控制函数
唯一的信仰
05-23 1万+
        原文地址[http://docs.cocos.com/creator/manual/zh/animation/scripting-animation.html#动画事件]　　发现官方文档写的很全，也有很多实例，所以直接搬过来。播放var anim = this.getComponent(cc.Animation); // 如果没有指定播放哪个动画，并且有设置 defaultCli...
ScrollView滚动到指定位置 （平滑 慢速 动画）
丿灬安之若死
07-16 4588
首先 private Runnable runnable = new Runnable() { @Override public void run() { scrollToPosition(0,600); } };1234567812345678 其次 handler.post(runnable);11
3、Animation使用脚本控制动画
lianghui0811
07-11 2424
播放 var anim = this.getComponent(cc.Animation); // 如果没有指定播放哪个动画，并且有设置 defaultClip 的话，则会播放 defaultClip 动画 anim.play(); // 指定播放 test 动画 anim.play('test'); // 指定从 1s 开始播放 test 动画 anim.play('test', ...
滑到制定位置，饼图开始加载到制定数值
最新发布
06-06
要实现滑到指定位置时，饼图开始加载到指定数值，可以使用JavaScript的事件处理机制和CSS的动画效果。 首先，我们需要给滑动条添加一个事件监听器，监听滑动事件。当滑动到指定位置时，我们就可以触发饼图的加载动画。 下面是一个示例代码，可以根据需要进行调整： ```html <div class="slider-container"> <input type="range" min="0" max="100" value="0" class="slider" id="slider"> <div class="pie-chart"> <div class="pie-chart-inner"></div> <div class="pie-chart-label">0%</div> </div> </div> ``` ```css .pie-chart { position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #eee; overflow: hidden; } .pie-chart-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; clip: rect(0, 100px, 200px, 0); background-color: #f00; transform-origin: center center; transform: rotate(0deg); transition: transform 1s ease-out; } .pie-chart-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: bold; color: #000; } .slider-container { width: 200px; margin: 50px auto; } .slider { width: 100%; } ``` ```javascript const slider = document.getElementById("slider"); const pieChart = document.querySelector(".pie-chart"); const pieChartInner = document.querySelector(".pie-chart-inner"); const pieChartLabel = document.querySelector(".pie-chart-label"); slider.addEventListener("input", () => { const value = slider.value; const angle = (value / 100) * 360; pieChartInner.style.transform = `rotate(${angle}deg)`; pieChartLabel.textContent = `${value}%`; }); ``` 解释一下代码： 首先，我们创建了一个包含滑动条和饼图的容器div，它的class为slider-container。滑动条使用了HTML5中的<input type="range">元素，它的min属性设置最小值，max属性设置最大值，value属性设置默认值，class属性设置样式。 饼图使用了两个div元素，一个用来表示饼图的外框，另一个用来表示饼图的填充部分。外框的class为pie-chart，它的position属性设置为relative，宽度和高度设置为200px，border-radius属性设置为50%，background-color属性设置为灰色，overflow属性设置为hidden。填充部分的class为pie-chart-inner，它的position属性设置为absolute，top和left属性设置为0，宽度和高度设置为100%，border-radius属性设置为50%，clip属性设置为rect(0, 100px, 200px, 0)，这样它只显示了右半边的饼图。background-color属性设置为红色，transform-origin属性设置为中心点，transform属性设置为rotate(0deg)，transition属性设置为transform 1s ease-out，这样它就会在1秒内平滑地转动到指定角度。label部分的class为pie-chart-label，它的position属性设置为absolute，top和left属性设置为50%，transform属性设置为translate(-50%, -50%)，这样它就可以居中显示。font-size属性设置为24px，font-weight属性设置为bold，color属性设置为黑色。 在JavaScript中，我们使用document.getElementById()方法获取到滑动条元素和饼图元素。然后，我们使用addEventListener()方法给滑动条添加一个input事件监听器，当滑动条的值变化时，就会触发这个事件。在事件处理函数中，我们首先获取滑动条的值，然后根据值计算出饼图需要转动的角度，最后使用style.transform属性将饼图内部元素的角度设置为计算出的角度，同时更新饼图标签的内容。这样，我们就可以实现滑动到指定位置时，饼图开始加载到指定数值的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值