All Projects → chokcoco → Boomjs

chokcoco / Boomjs

JavaScript实现一个有趣的浏览器图片爆炸动画效果

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Boomjs

Dynamic.css
🚀 Awesome Library of CSS3 animations 🎉
Stars: ✭ 38 (-89.97%)
Mutual labels:  css3, animate
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-66.49%)
Mutual labels:  animate, css3
Dynamic effect
平时练习的一些前端动效,基于HTML5,CSS3,Canvas,Svg
Stars: ✭ 264 (-30.34%)
Mutual labels:  css3
React Awesome Resume
a resume by using Luy/React
Stars: ✭ 337 (-11.08%)
Mutual labels:  animate
Codrops Scribbler
A responsive HTML template for coding projects with a clean, user friendly design. Crafted with the latest web technologies, the template is suitable for landing pages and documentations.
Stars: ✭ 302 (-20.32%)
Mutual labels:  css3
Html Css
Curso de HTML5 e CSS3
Stars: ✭ 4,917 (+1197.36%)
Mutual labels:  css3
Tween One
Animate One React Element
Stars: ✭ 310 (-18.21%)
Mutual labels:  animate
Sequent
A simple continuous animation library for Android UI.
Stars: ✭ 263 (-30.61%)
Mutual labels:  animate
Photon
Clone native desktop UI's like cocoa and develop native feeling applications using web technologies
Stars: ✭ 369 (-2.64%)
Mutual labels:  css3
T Shirts
The first OpenSource t-shirts (probably)
Stars: ✭ 300 (-20.84%)
Mutual labels:  css3
Vue3 Jd H5
🔥 Based on vue3.0.0, vant3.0.0, vue-router v4.0.0-0, vuex^4.0.0-0, vue-cli3, mockjs, imitating Jingdong Taobao, mobile H5 e-commerce platform! 基于vue3.0.0 ,vant3.0.0,vue-router v4.0.0-0, vuex^4.0.0-0,vue-cli3,mockjs,仿京东淘宝的,移动端H5电商平台!
Stars: ✭ 328 (-13.46%)
Mutual labels:  css3
Swiftui
Examples projects using SwiftUI released by WWDC2019. Include Layout, UI, Animations, Gestures, Draw and Data.
Stars: ✭ 3,579 (+844.33%)
Mutual labels:  animate
Css Protips
A collection of tips to help take your CSS skills pro
Stars: ✭ 20,279 (+5250.66%)
Mutual labels:  css3
Filters.css
CSS only library to apply color filters.
Stars: ✭ 318 (-16.09%)
Mutual labels:  css3
You Need To Know Css
💄CSS tricks for web developers~
Stars: ✭ 3,777 (+896.57%)
Mutual labels:  css3
Vue Shiyanlou
😘基于vue2和vuex的复杂单页面应用,20+页面53个API(仿实验楼)✨✨
Stars: ✭ 342 (-9.76%)
Mutual labels:  css3
Qinvideo
基于node.js开发的一套CMS后台管理系统,支持番剧,漫画,文章,弹幕等等
Stars: ✭ 264 (-30.34%)
Mutual labels:  animate
Jianshu
仿简书nx+nodejs+nestjs6+express+mongodb+angular8+爬虫
Stars: ✭ 296 (-21.9%)
Mutual labels:  css3
Pattern.css
CSS only library to fill empty background with beautiful patterns.
Stars: ✭ 3,481 (+818.47%)
Mutual labels:  css3
Theme Bmw
✋ Smart Voice: Voice for yourself | 微声: 请为自己发声
Stars: ✭ 373 (-1.58%)
Mutual labels:  css3

boomJS

一个有趣的动画效果,用 JavaScript 配合 CSS3 实现让图片爆炸的动画。

Demo演示戳我

Example

Boom效果演示图

Boom效果演示图

Usage

<!-- style -->
<link rel="stylesheet" type="text/css" href="Boom.css" />
<!-- scripts -->
<script src="jquery.js"></script>
<!-- scripts -->
<script src="boom.js"></script>

<script>
// 调用方法:
//法一:传入图片的 jQuery 对象
boom($('img')) 

// 法二:构建 boom 实例,传入图片的 jQuery 对象
var bom = boom();
bom.boom($('img'));
</script>

API

boom($('img'),{
  // 缩放值
 'scaleLevel' : 3,
  // 模糊值
 'blurLevel': 9,
  // 弹射距离 
 'boomLevel': 4,
  // 爆炸时长
 'boomTime':800,
  // 是否打开日志
 'isOpenLog':true
});

温馨提示,不建议将 scaleLevel 的值设太高 :) 。

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].