Blogs

Hello everybody,

A small post to explain how to create a vanilla javascript native fragment in Liferay in few minutes.

I want to create a small animation for this winter... a Snow Flakes animation on all of my site pages.

For this, I decide to create a fragment and put it on the master page of my site.

I simply go on github and find this repository :  https://github.com/le-pepe/snow-effect

With the associated Code Pen : https://codepen.io/codebubb/pen/LYqovoV

Here is the fragment I have created :

And after I have add some configurations :

{
    "fieldSets": [
        {
                    "fields": [
                 {
                     "dataType": "string",
                     "defaultValue": "100",
                     "label": "number-of-snow-flakes",
                     "name": "numberOfSnowFlakes",
                     "type": "text"
                 },
                 {
                     "dataType": "string",
                     "defaultValue": "5",
                     "label": "max-snow-flake-size",
                     "name": "maxSnowFlakeSize",
                     "type": "text"
                 },
                 {
                     "dataType": "string",
                     "defaultValue": "2",
                     "label": "max-snow-flake-speed",
                     "name": "maxSnowFlakeSpeed",
                     "type": "text"
                 },
                 {
                     "defaultValue": "#DDDDDD",
                     "label": "snow-flake-color",
                     "name": "snowFlakeColor",
                     "type": "colorPicker"
                 }
            ]
        }
    ]
}

And I put it on my master page and configure it :
 

That's all !

Enjoy, it is free (and the source using MIT Licence)
Eric