الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

جزيئات.js

مكتبة جافا سكريبت خفيفة الوزن لإنشاء الجزيئات.

Demo / Generator

قم بتكوين وتصدير ومشاركة تكوينجزيئات.js الخاصة بك على CodePen:
http://vincentgarreau.com/particles.js/

العرض التوضيحي لـ CodePen:
http://codepen.io/VincentGarreau/pen/pnlso

Usage

قم بتحميلجزيئات.js وقم بتكوين الجسيمات:

Index.html 

 < div id =" particles-js " > </ div >

< script src =" particles.js " > </ script >

app.js 

 /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS . load ( 'particles-js' , 'assets/particles.json' , function ( ) {
  console . log ( 'callback - particles.js config loaded' ) ;
} ) ;

جزيئات.json 

 {
  "particles" : {
    "number" : {
      "value" : 80 ,
      "density" : {
        "enable" : true ,
        "value_area" : 800
      }
    } ,
    "color" : {
      "value" : "#ffffff"
    } ,
    "shape" : {
      "type" : "circle" ,
      "stroke" : {
        "width" : 0 ,
        "color" : "#000000"
      } ,
      "polygon" : {
        "nb_sides" : 5
      } ,
      "image" : {
        "src" : "img/github.svg" ,
        "width" : 100 ,
        "height" : 100
      }
    } ,
    "opacity" : {
      "value" : 0.5 ,
      "random" : false ,
      "anim" : {
        "enable" : false ,
        "speed" : 1 ,
        "opacity_min" : 0.1 ,
        "sync" : false
      }
    } ,
    "size" : {
      "value" : 10 ,
      "random" : true ,
      "anim" : {
        "enable" : false ,
        "speed" : 80 ,
        "size_min" : 0.1 ,
        "sync" : false
      }
    } ,
    "line_linked" : {
      "enable" : true ,
      "distance" : 300 ,
      "color" : "#ffffff" ,
      "opacity" : 0.4 ,
      "width" : 2
    } ,
    "move" : {
      "enable" : true ,
      "speed" : 12 ,
      "direction" : "none" ,
      "random" : false ,
      "straight" : false ,
      "out_mode" : "out" ,
      "bounce" : false ,
      "attract" : {
        "enable" : false ,
        "rotateX" : 600 ,
        "rotateY" : 1200
      }
    }
  } ,
  "interactivity" : {
    "detect_on" : "canvas" ,
    "events" : {
      "onhover" : {
        "enable" : false ,
        "mode" : "repulse"
      } ,
      "onclick" : {
        "enable" : true ,
        "mode" : "push"
      } ,
      "resize" : true
    } ,
    "modes" : {
      "grab" : {
        "distance" : 800 ,
        "line_linked" : {
          "opacity" : 1
        }
      } ,
      "bubble" : {
        "distance" : 800 ,
        "size" : 80 ,
        "duration" : 2 ,
        "opacity" : 0.8 ,
        "speed" : 3
      } ,
      "repulse" : {
        "distance" : 400 ,
        "duration" : 0.4
      } ,
      "push" : {
        "particles_nb" : 4
      } ,
      "remove" : {
        "particles_nb" : 2
      }
    }
  } ,
  "retina_detect" : true
}

Options

مفتاح نوع الخيار / الملاحظات مثال
particles.number.value رقم 40
particles.number.density.enable منطقية true / false
particles.number.density.value_area رقم 800
particles.color.value سداسي عشري (سلسلة)
RGB (كائن)
إتش إس إل (كائن)
اختيار المصفوفة (HEX)
عشوائي (سلسلة)		 "#b61924"
{r:182, g:25, b:36}
{h:356, s:76, l:41}
["#b61924", "#333333", "999999"]
"random"
particles.shape.type خيط
اختيار المصفوفة		 "circle"
"edge"
"triangle"
"polygon"
"star"
"image"
["circle", "triangle", "image"]
particles.shape.stroke.width رقم 2
particles.shape.stroke.color سداسي عشري (سلسلة) "#222222"
particles.shape.polygon.nb_slides رقم 5
particles.shape.image.src رابط المسار
إس في جي / png / gif / jpg		 "assets/img/yop.svg"
"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width رقم
(بالنسبة لنسبة العرض إلى الارتفاع)		 100
particles.shape.image.height رقم
(بالنسبة لنسبة العرض إلى الارتفاع)		 100
particles.opacity.value الرقم (0 إلى 1) 0.75
particles.opacity.random منطقية true / false
particles.opacity.anim.enable منطقية true / false
particles.opacity.anim.speed رقم 3
particles.opacity.anim.opacity_min الرقم (0 إلى 1) 0.25
particles.opacity.anim.sync منطقية true / false
particles.size.value رقم 20
particles.size.random منطقية true / false
particles.size.anim.enable منطقية true / false
particles.size.anim.speed رقم 3
particles.size.anim.size_min رقم 0.25
particles.size.anim.sync منطقية true / false
particles.line_linked.enable منطقية true / false
particles.line_linked.distance رقم 150
particles.line_linked.color سداسي عشري (سلسلة) #ffffff
particles.line_linked.opacity الرقم (0 إلى 1) 0.5
particles.line_linked.width رقم 1.5
particles.move.enable منطقية true / false
particles.move.speed رقم 4
particles.move.direction خيط "none"
"top"
"top-right"
"right"
"bottom-right"
"bottom"
"bottom-left"
"left"
"top-left"
particles.move.random منطقية true / false
particles.move.straight منطقية true / false
particles.move.out_mode خيط
(خارج القماش)		 "out"
"bounce"
particles.move.bounce منطقية
(بين الجزيئات)		 true / false
particles.move.attract.enable منطقية true / false
particles.move.attract.rotateX رقم 3000
particles.move.attract.rotateY رقم 1500
interactivity.detect_on خيط "canvas", "window"
interactivity.events.onhover.enable منطقية true / false
interactivity.events.onhover.mode خيط
اختيار المصفوفة		 "grab"
"bubble"
"repulse"
["grab", "bubble"]
interactivity.events.onclick.enable منطقية true / false
interactivity.events.onclick.mode خيط
اختيار المصفوفة		 "push"
"remove"
"bubble"
"repulse"
["push", "repulse"]
interactivity.events.resize منطقية true / false
interactivity.events.modes.grab.distance رقم 100
interactivity.events.modes.grab.line_linked.opacity الرقم (0 إلى 1) 0.75
interactivity.events.modes.bubble.distance رقم 100
interactivity.events.modes.bubble.size رقم 40
interactivity.events.modes.bubble.duration رقم
(ثانية)		 0.4
interactivity.events.modes.repulse.distance رقم 200
interactivity.events.modes.repulse.duration رقم
(ثانية)		 1.2
interactivity.events.modes.push.particles_nb رقم 4
interactivity.events.modes.push.particles_nb رقم 4
retina_detect منطقية true / false

Packages install

npm

https://www.npmjs.com/package/particles.js 

 npm install particles.js
باور 
 bower install particles.js --save
أصول القضبان 
 gem 'rails-assets-particles.js'
نيزك

https://atmospherejs.com/newswim/particles 

 meteor add newswim:particles

Hosting / CDN

الرجاء استخدام هذا المضيف أو المضيف الخاص بك لتحميل الجسيمات.js على مشاريعك

http://www.jsdelivr.com/#!particles.js

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل