Posts

Showing posts from April, 2019

editor.js---a Block-Styled editor with multiple ready-to-use Plugins

Image
Editor.js is a Block-Styled editor. Blocks are structural units, of which the Entry is composed. For example,  Paragraph ,  Heading ,  Image ,  Video ,  List  are Blocks. Each Block is represented by Plugin. We have  many  ready-to-use Plugins and a  simple API  for creating new ones. My deom is the text editor which can display saved data on screen. Step1: link latest editor.js in body,and each plugin you need attached. from cdn Step2: html two sections display:left is editor,right is display board. Step3: scss rendering Step4: js Grab the click save button. Init the EditorJS with default objects. There are ten types of plugins: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Laxxx.js ---a light weight Plugin to create animation when scrolling

Image
It's a imple & light weight (<3kb gzipped) vanilla javascript plugin to create  smooth  & beautiful animations when you scrolllll!  How I create this animated page with the Plugin? Step1:  Link the lax.js file to your website ,which is the eaiest way to apply. Or with the npm install to apply especially with React and so on. Step2: JS  Add the script in the body  for init the plugin. Step3: HTML Select the tags which you want to add animations and attach the classname and attributes. Set the classname to lax to point the animation tags. And data-lax-preset is the default animation setting which is easier and quick apply. Or you can customize the animation attributes with custom data setting. Supported preset values from official: Default Strength linger n/a lazy 100 eager 100 lazy 100 slalom 50 crazy n/a spin 360 spinRev 360 spinIn 360 spinOut 360 blurInOut 40 blurIn 40 blurOut 40 fadeInOut n/a fadeIn n/a fadeOu