CSS3结合jQuery实现动画效果及回调函数的实例
投稿作者：小丽
2025-01-02 02:06:16
5
写期末项目中，朋友提出的 idea ，当用户登录成功时欢迎用户的特效，即欢迎用户信息从底部上升到页面中，之后再退回底部。
他遇到的问题是：从底部能出来提示信息，但是出来之后就下不去了。
听过后，考虑之，想到用回调函数来解决这个Bug，然后模拟登录成功时进入主页（即刷新页面），弹出欢迎信息并消失，写了一个类似这样的动画效果。仅供参考：
效果图：
代码如下：
欢迎动画
这里主要用到了css3中的 animate 动画属性，结合 jQuery 实现动画执行的时间和方向，最后设置回调函数使提示信息回到初始位置即可。
以上这篇CSS3结合jQuery实现动画效果及回调函数的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持亿速云。
个人博客网站背景视觉滚动特效代码
之前一直注重模块的视觉滚动特效以至于忽略了图片背景的视觉差滚动特效，今天把小清新主题更新了图片背景视觉差特效，记录下代码，有喜欢的自己参考自己动手操作下。这是在网络上找到的一款超级轻量级的jQuery视觉滚动特效代码，该插件使用CSS background-position属性和简单的js代码来完成页内滚动时的背景图片视觉差效果，效果演示可以前往 查看！
教程代码如下：
首先我们需要在html中添加视觉差特效的class类和data-paralasic属性，例如：
代码语言：javascript
复制
......代码
其中“paralasic”就是类名称，然后设置“data-paralasic”属性，如果图片高度很高的话，可以设置0.5+甚至更多，如果图片小于500px建议设置小一些，例如 0.25 等，根据实际情况修改。
JS代码：
复制如下代码，放在js中即可或者直接放在网页的底部（记得添加），
代码语言：javascript
复制
jQuery(window).bind('scroll', function () {
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var paralasicValue = $('.paralasic').attr('data-paralasic');
$('.paralasic').css('background-position', '50% -' + scrollTop * paralasicValue + 'px');
});
});
其中“.paralasic”就是类的名称，然后修改对应的css即可，保存代码，刷新前台查看效果！
是不是非常简单，其实就是简单的两步，复制js代码修改class类的名称，然后在div框架添加data-paralasic属性就行了，大功告成，闪人。。。
本站内容来自用户投稿，如果侵犯了您的权利，请与我们联系删除。联系邮箱：835971066@qq.com
本文链接：http://news.xiuzhanwang.com/post/1661.html
