6가지 매우 흥미롭고 창의적인 자바스크립트 라이브러리

빠르게 성장하는 인터넷 세상에서는 매일 새로운 것들이 많이 있습니다. 저처럼 빠르게 찾을 수 있는 지름길은 없는지 궁금하실 것입니다.

저는 최근에 흥미로운 자바스크립트 라이브러리를 여러 개 수집했는데, 각 라이브러리는 특히 독창적입니다. 사용하지 않아도 될 수도 있지만 이러한 라이브러리를 프로젝트에 추가하면 즉시 프로젝트를 매력적으로 만들 수 있습니다.

1. 반응 마우스 입자

react-mouse-particles is a react mouse particle effect component.

깃허브 https://github.com/lindelof/react-mouse-particles

유성이나 불덩이처럼 멋진 마우스 입자 효과를 만드는 데 사용할 수 있는 매우 재미있는 반응 라이브러리입니다. 나는 종종 반응을 사용하여 재미있는 일을 하고 싶습니다. 이 구성 요소를 사용하면 페이지를 즉시 멋지게 만들 수 있습니다.

npm install --save react-mouse-particles

import React, { Component } from 'react'

import MouseParticles from 'react-mouse-particles'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <MouseParticles g={1} color="random" cull="col,image-wrapper"/>
      </>
    )
  }
}

2. 입자-bg

particles-bg is a React particles animation background component.

깃허브 https://github.com/lindelof/particles-bg

이력서나 프로필이 눈에 띄지 않을까 걱정되신다면 딱입니다. 페이지에 입자 애니메이션을 추가하면 웹사이트가 즉시 반짝거립니다. 매우 놀라운

npm install --save particles-bg

import React, { Component } from 'react'

import ParticlesBg from 'particles-bg'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <ParticlesBg type="circle" bg={true} />
      </>
    )
  }
}

3. 입자-bg-vue

particles-bg-vue is A vue.js particles animation background component.

깃허브 https://github.com/lindelof/particles-bg-vue

위의 효과가 정말 마음에 들지만 사용 중인 프레임워크가 vue.js인 경우가 있습니다. 그런 다음 걱정하지 마십시오. 이 라이브러리를 사용하면 요구 사항도 충족할 수 있습니다.

npm install --save particles-bg-vue

<particles-bg type="lines" :bg="true" />
...

import { ParticlesBg } from "particles-bg-vue";
export default {
  name: "App",
  components: {
    ParticlesBg
  }
};

4. 반응 시차

A React Component for parallax effect.

깃허브 https://github.com/rrutsche/react-parallax

패럴랙스 스크롤링으로 인터랙티브 웹사이트를 쉽게 만들 수 있는 훌륭한 프로젝트입니다. 자신만의 모바일 홈페이지를 확실히 갖고 싶어한다면 그것은 당신에게 완벽합니다.

npm install --save react-parallax

import React from 'react';
import { Parallax, Background } from 'react-parallax';

const MyComponent = () => (
    <div>
        {/* -----basic config-----*/}
        <Parallax
            blur={10}
            bgImage={require('path/to/image.jpg')}
            bgImageAlt="the cat"
            strength={200}
        >
            Put some text content here - even an empty div with fixed dimensions to have a height
            for the parallax.
            <div style={{ height: '200px' }} />
        </Parallax>

        {/* -----dynamic blur-----*/}
        <Parallax
            blur={{ min: -15, max: 15 }}
            bgImage={require('path/to/another/image.jpg')}
            bgImageAlt="the dog"
            strength={-200}
        >
            Blur transition from min to max
            <div style={{ height: '200px' }} />
        </Parallax>

5. 반응 쉬머

React Image Loader component that simulates a shimmer effect.

깃허브 https://github.com/gokcan/react-shimmer

강력하고 사용자 정의 가능한 <img> 로드하는 동안 쉬머 효과를 시뮬레이트하는 구성 요소입니다. (종속성이 0입니다!) 현재 React와 호환되지만 RN 호환성도 진행 중입니다.

npm i react-shimmer

6. react-native-3dcube 탐색

a great page turning effect

깃허브 https://github.com/zehfernandes/react-native-3dcube-navigation

반응 네이티브로 무언가를 하고 싶다면. 그렇다면 이것은 매우 좋은 일입니다. 그는 당신에게 적합할 수 있습니다. 훌륭한 페이지 넘김 효과입니다.

npm i react-native-3dcube-navigation --save

import { CubeNavigationHorizontal } from 'react-native-3dcube-navigation'

<View style={styles.father} >
  <CubeNavigationHorizontal ref={view => { this.cube = view; }}>
    <View style={[styles.container, { backgroundColor: '#5CDB8B' }]}>
      <Text style={styles.text}>Horizontal Page 1</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#A3F989' }]}>
      <Text style={styles.text}>Horizontal Page 2</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#CBF941' }]}>
      <Text style={styles.text}>Horizontal Page 3</Text>
    </View>
  </CubeNavigationHorizontal>
</View >

이 기사를 읽은 후 기다려 주셔서 감사합니다. 이런 것들을 모으는 것을 좋아하신다면 앞으로도 더 좋은 것들을 모아 여러분과 함께 나누겠습니다. 좋은 꿈 꾸세요.