입문

javascript 라이브러리의particle.나는 js를 써 보았다.
도중에 생각대로 하나하나 헷갈리기 때문에 순조로운 방법을 써야 한다.
마우스의 운동 설정에 맞춰 기하학적 무늬와 우주 같은 입자 애니메이션을 즐길 수 있는 녀석이다.

기본값

snow 버전

환경

mac OS 버전 10.15.7
Rails 5.1.6
particles.js 2.0.0

step.1 프레젠테이션 발생기로 원하는 모양 만들기

① 프레젠테이션 사이트에서 애니메이션 제작
프레젠테이션 생성기 링크
https://vincentgarreau.com/particles.js/
에서 설명한 대로 해당 매개변수의 값을 수정합니다.
색상은 말할 것도 없고 애니메이션의 속도와 입자의 방향 등도 설정할 수 있다.
② 설정된 파일 다운로드
Download current config (json)
홈 파일에서 보낼 내용을 보려면 단추를 누르십시오.
③ public/assets에서 다운로드한 JSON 파일 구성
나는 이 파일을 app/assets에 놓았는데, 줄곧 순조롭지 못했다.
JSON은 img 파일과 같습니다.

step.두 개의 소프트웨어 패키지 설치

Packages install

gem 'particles-js-rails', '2.0.0'

bundle install

step.세 개의 코드를 쓰다

body 탭이 닫히기 전에 다음 내용을 기술합니다
application.html.erb

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS.load('particles-js', 'assets/particles.json', function() {
      console.log('callback - particles.js config loaded');
    });
</script>

assets/particles.json의 위치는 설정된 파일의 이름과 일치합니다.
다운로드 다음은particlesjs-config입니다.제이슨처럼.
애니메이션을 설정하고 싶은 곳은 다음과 같습니다.
top.html.erb

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

CSS 파일에 다음과 같이 설명되어 있습니다.
top.scss

#particles-js {
    width:100%;
    height: 100%;
    margin:0 auto;
    background-color: rgb(230, 182, 216)
}

이렇게 하면 갈 수 있을 거야.
precompile 오류가 발생하면 다음 내용을 시도하십시오
config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( particles.js )

참조 (본가)

https://github.com/VincentGarreau/particles.js/
스타까지 붙여서 쓰세요.