Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
TristanJo
Experienced
Topic Author
Posts: 116
Joined: 10 Apr 2018, 02:57

Page intro effect~(?)

30 Nov 2020, 22:18

Thank you always.
 
Is it possible to add this effect to the page intro? 

https://codepen.io/tomwitkovsky/pen/zezQLe 

 I tried was a custom(css+js) code.

Where is div?  Please help me.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Page intro effect~(?)

30 Nov 2020, 22:20

When you say "page intro", do you mean image intro like this?
https://demo.photo.gallery/examples/plu ... tro-image/

It makes a difference, because there is also slideshow-intro and video-intro, and to use the particles effect, we need to hi-jack one of the existing elements in X3.

Or did you want to add it somehow independently from other X3 plugins?
 
User avatar
TristanJo
Experienced
Topic Author
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Page intro effect~(?)

01 Dec 2020, 05:27

mjau-mjau wrote: "페이지 소개"라고하면 이와 같은 이미지 소개를 의미합니까?
https://demo.photo.gallery/examples/plu ... tro-image/

슬라이드 쇼 소개 및 비디오 소개도 있기 때문에 차이가 있으며 입자 효과를 사용하려면 다음 중 하나를 하이 잭해야합니다. X3의 기존 요소.

아니면 다른 X3 플러그인과는 별도로 추가하고 싶습니까?
스크린샷 2020-12-01 오후 7.27.32.png
스크린샷 2020-12-01 오후 7.27.32.png (66.47 KiB) Viewed 1470 times
 
User avatar
TristanJo
Experienced
Topic Author
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Page intro effect~(?)

01 Dec 2020, 05:30

mjau-mjau wrote: When you say "page intro", do you mean image intro like this?
https://demo.photo.gallery/examples/plu ... tro-image/

It makes a difference, because there is also slideshow-intro and video-intro, and to use the particles effect, we need to hi-jack one of the existing elements in X3.

Or did you want to add it somehow independently from other X3 plugins?
I'd like to apply the effect on the top of the intro Img
스크린샷 2020-12-01 오후 7.27.32.png
스크린샷 2020-12-01 오후 7.27.32.png (66.47 KiB) Viewed 1469 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Page intro effect~(?)

01 Dec 2020, 08:09

Image

1. Go to Settings > Custom > Custom <head>, add this:
Code
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
2. Create a page and assign the page-intro plugin as normal.

3. Goto page settings > Page > Advanced > Page Javascript, add this:
Code
var intro = document.getElementsByClassName('image-background')[0];
intro.insertAdjacentHTML('afterbegin', '<div class="particles-wrapper" style="width:100%;height:100%;position:absolute;"><div id="particles-js"></div></div>');
particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 400,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#fff"
    },
    "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": true,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 500,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "bottom",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "bubble"
      },
      "onclick": {
        "enable": true,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 0.5
        }
      },
      "bubble": {
        "distance": 400,
        "size": 4,
        "duration": 0.3,
        "opacity": 1,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});
Configure your options from here:
https://vincentgarreau.com/particles.js/

Click "Download current config (json)" to export the settings. Then open the downloaded JSON file, and copy-paste the config into your the options.
 
User avatar
TristanJo
Experienced
Topic Author
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Page intro effect~(?)

01 Dec 2020, 10:38

Wooooow~~~~ Thx~~!! :thumbsup::thumbsup::thumbsup: