Reveal js is a JavaScript package to create web slides.  official website itself a presentation demo.  it also provides a free online editor to create slides . but it needs an account to start. just go to slide.com for making one.  lets see how we can create a web slide using a markdown file.

Build Presentations with Reveal.js and markdown

Before we start we have to install the following packages into the system.

execute these commands to install the packages in Ubuntu. Other operating systems have there own package manager commands.

git : sudo apt-get install git
pandoc : sudo apt-get install pandoc

step 1 : Create a Markdown File with headings and list items. an example here

django-intro.md

% Django Introduction
% Mujeeb Rahman K
% February 09, 2020

# Django

## Why Django
* Django is a Web framework written in Python
* Don't reinvent the wheel.
* 216 K packages in python package index

step 2 : clone or download Revealjs into the same folder which contains the above markdown file

git clone https://github.com/hakimel/reveal.js.git

Step 3 : convert markdown (.md) file to html file using pandoc utility

pandoc -t revealjs -s -o djangoslide.html django-intro.md -V revealjs-url=./reveal.js

This will convert md file to html and use reveal js from our current folder. if you don’t cloned reveal js you can use direct url like below.

pandoc -t revealjs -s -o djangoslide.html django-intro.md -V revealjs-url=https://revealjs.com

now we have got a djangoslide.html file. just open that file in any browser and see the magic..!! your web slide is ready.  remember that, if you didn’t download or clone reveal js in same folder the html wont render correctly.

The is a very quick and simple way to create a presentation because it only need very simple utilities like git, pandoc and a simple markdown file. Markdown can be created using a very simple text editor. We have very nice presentation with all the effects. It is html so simply works everywhere.

The post Create A Simple Presentation using Reveal js and Markdown appeared first on IB Computing.

Letter Animations using Javascript Library

This javascript library can be used to animate words and letters. This will be very useful to create websites for games, parties, events etc. Tympanus created a set of very nice animations using Anime.js. The animation slideshow used in the demo created by Tympanus includes very nice effects to play with.

The main idea of the implementation includes creating an SVG for each word. Then place circle, square or triangle shapes relative to SVG. With a couple of effects, the letter animation will be formed with stunning effects using simple shapes. To showcase the effects, there is a small slideshow with different kind of letters and animations. Letter Animations using Javascript Library is also available for download.

• Animation Slideshow
• Source Code of the Slideshow on Github
• Animation Article

Main features of Anime.js

• Keyframes: Chain multiple animation properties.
• Timeline: Synchronize multiple instances together.
• Playback controls: Play, pause, restart, seek animations or timelines.
• CSS transforms: Animate CSS transforms individually.
• Function-based values: Multiple animated targets can have individual value.
• SVG Animations: Motion path, line drawing, and morphing animations.
• Easing functions: Use the built-in functions or create your own Cubic Bézier curve easing.

Full Documentation is available with examples.

Anime.js Demos and Animation Examples

• CodePen demos and examples
• animejs.com
• Stress test

Anime.js Browser Support

Anime.js is supported by Google Chrome 24+, Safari 6+, IE 10+, Firefox 32+ and Opera 15+. So in the modern world, it is safe to use for a professional project and it works on almost all devices.

Anime.js is released under MIT license and the current version is 2.2. The development is going on in GitHub repository and 380 commits are now live. Anime.js is inspired by Animate Plus and Velocity. Animate Plus is another animation library and Velocity is a very nice feature rich animation framework that intended to replace the jQuery animate function.

The post Letter Animations using Javascript Library Anime.js appeared first on IB Computing.