Vue パーティクル エフェクトのサンプル共有

小云云
リリース: 2018-02-08 13:09:35
オリジナル
3190 人が閲覧しました

この記事では主にvueパーティクルエフェクトのサンプルコードを紹介していますが、編集者が非常に良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

達成効果:

はい、上の図にあるコンスタレーション ダイアグラムに似た点と線は vue-particle によって生成され、ユーザーのマウス イベントと相互作用できます。

ポータル: vue-particles

使用方法チュートリアル


npm install vue-particles --save-dev
ログイン後にコピー

main.js ファイル:


import Vue from 'vue' 
import VueParticles from 'vue-particles' 
Vue.use(VueParticles)
ログイン後にコピー

App.vue ファイル - 簡単な例:


<template> 
  <p id="app">
   <vue-particles color="#dedede"></vue-particles>
  </p>
 </template>
ログイン後にコピー

アプリ .vue ファイル -完全な例:


<template> 
  <p id="app">
   <vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >
   </vue-particles>
  </p>
 </template>
ログイン後にコピー

プロパティ:

  • color: 文字列型。デフォルトは「#dedede」です。粒子の色。

  • particleOpacity: 数値タイプ。デフォルトは 0.7 です。粒子の透明度。

  • particlesNumber: 数値タイプ。デフォルトは 80 です。パーティクルの数。

  • shapeType: 文字列型。デフォルトは「円」です。利用可能なパーティクルの外観タイプは、「円」、「エッジ」、「三角形」、「多角形」、「星」です。

  • particleSize: 数値タイプ。デフォルトは 80 です。個々の粒子サイズ。

  • linesColor:文字列タイプ。デフォルトは「#dedede」です。線の色。

  • linesWidth: 数値タイプ。デフォルトは 1。線幅。

  • lineLinked: ブール型。デフォルトは true。ケーブルは利用可能ですか?

  • lineOpacity: 数値タイプ。デフォルトは 0.4 です。線の透明度。

  • linesDistance: 数値タイプ。デフォルトは 150。ラインの距離。

  • moveSpeed: 数値タイプ。デフォルトは 3。パーティクルの移動速度。

  • hoverEffect: ブール型。デフォルトは true。ホバー効果はありますか?

  • hoverMode: 文字列型。デフォルトは true。利用可能なホバー モードは、「グラブ」、「反発」、「バブル」です。

  • clickEffect: ブール型。デフォルトは true。クリック効果はありますか?

  • clickMode: 文字列型。デフォルトは true。利用可能なクリック モードは、「プッシュ」、「削除」、「反発」、「バブル」です。

関連する推奨事項:

Canvas は、めくるめくパーティクルの動きのエフェクトを実現します

threeJS は星空のパーティクルの動きのエフェクトを実装し、サンプルを共有します

Canvas を使用してパーティクルの噴水アニメーションエフェクトを作成する方法

以上がVue パーティクル エフェクトのサンプル共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート