Range slider | #JS, #Slider

duboloms — Tue, 14 Jul 2020 14:57:54 +0000

Beautiful range-slider for resize text

Custom slider without slider libs - #JS #jQuery

duboloms — Thu, 14 May 2020 15:08:15 +0000

flashlight effect in website - #CSS3 #JS #GSAP

duboloms — Tue, 12 May 2020 19:57:13 +0000

FlashLight in WebSite

JavaScript original Loader (from Medium post) || #JS #AnimeJS #Loader

duboloms — Thu, 07 May 2020 14:26:29 +0000

JavaScript original loader from this medium post:

Js Preloader dots animation - #JavaScript, #GSAP, #Preloader

duboloms — Thu, 30 Apr 2020 12:38:56 +0000

Pure js dots animation in preloader:

Cursor Circle - #JS

duboloms — Mon, 20 Apr 2020 20:27:17 +0000

Custom cursor:

Smooth Scroll JavaScript || #JavaScript #GSAP

duboloms — Mon, 20 Apr 2020 20:23:37 +0000

Smooth Scroll with JavaScript:
Click here to Demo

JavaScript original Loader (from Medium post) || #JS #AnimeJS #Pre-loader #Loader

duboloms — Mon, 20 Apr 2020 18:55:12 +0000

How to make pre-loader?

Today i show you how make this pre-loader:
https://miro.medium.com/max/2712/1*vgP6AbEvZYhdQCfBBLgikg.gif

BUT before I start, I'll tell you that I took the idea from this medium post:

Create a full-screen website pre-loader in a jiffy - codeburst

Vaibhav Khulbe ・ Sep 11, 2018 ・ 5 min read
codeburst.io

and improved it with animejs.

Now, let's go!

Preparation

What do you need to know to make this?

You need HTML, CSS, JS (jQuery) skills.

Libraries

To anime this pre-loader, you need to connect Anime.js in your project:

CDN:

https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js

Import:
```
import anime from 'anime';
```

Coding

This is the pre-loader which i did from the article listed above:

Logic of pre-loader

Now let's parse the code

HTML

In HTML all very very simple. I created primary block div.loader inside which the block is located div.loader__container which i maked for place text in center of loader (with help of css). In div.loader__container located h1.loader_container_counter, he is empty, because here will be placed percent of page load with the help of JavaScript.

CSS (Sass which i processed in css for beginners)

To stretch pre-loader to the full screen, we will need property position: fixed; top: 0; left: 0; width: 100%; height: 100%;. To place him above all elements, we'll need z-index: 99;

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #002155;
  z-index: 99;
}

div.loader__container as i said above necessary for centering elements with help of properties display: flex; position: fixed; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; and z-index:100 to place the text above the loader again, so that we can see it.

.loader__container {
 display: flex
 position: fixed
 flex-direction: column
 justify-content: center
 align-items: center
 width: 100%
 height: 100%
 color: #fff
 z-index: 101
}

div.loader__layer is necessary for us to see as if the loader is filled (depending on the percentage of loading) with water or something else... generally just a cool effect! :) .
I decided not to tell you about the text styles, because they are very simple. If anything, you can view the text styles in the example above (codepen pen).

JavaScript

Let's start by creating variables with elements which we'll need:

const loader = ".loader", 
      loaderCounter = $(".loader__container__counter"),
      loaderContainer = $(".loader__container"),
      loaderLayer = $(".loader__layer");

const loader without jquery symbols $() because animejs not work with jquery and js (querySelector and getElementById...) selectors :(

To make counter of pre-loader, need to create setInterval() function:

 let counter = 0;
const loaderTimer = setInterval(function() {
  counter++;
  console.log(counter);
  if(counter == 100){
   clearInterval(loaderTimer);
  }
}, 35);

This function return from 0 to 100 in browser console.
If in your console the same, all good and you can move on.
Now record counter const in h1.loader_container_counter. Therefore in HTML this tag is empty.
Here is the code that does this:

let counter = 0;
const loaderTimer = setInterval(function() {
  counter++;
  if(counter == 100){
   clearInterval(loaderTimer);
   loader.css({transform: "-100%"});
   loaderLayer.css({transform: "-100%"});
   loaderContainer.css({transform: "-100%"});
  }
  loaderCounter.html(counter + '%');
  loaderLayer.css({width: counter + "%"});
}, 35);

Here I made an animation using the jQuery css() method.
But i want to make more cool animation, therefore i used AnimeJS animation library.
Here is the final JS code:

const loader = ".loader",
      loaderCounter = $(".loader__container__counter"),
      loaderLayer = $(".loader__layer");

// Timer
let counter = 0;
const loaderTimer = setInterval(function() {
  counter++;
  const tl = anime.timeline();
  tl.add({
    targets: ".loader__layer",
    duration: 0,
    width: counter + "%"
  });
  if(counter == 100){
  clearInterval(loaderTimer);
    tl.add({
      targets: [".loader", ".loader__layer", ".loader__container"],
      duration: 700,
      visibility: "hidden",
      translateY: "-100%",
      easing: 'easeInExpo',
      delay: 300
    });
  }
  loaderCounter.html(counter + '%');
  // loaderLayer.css({width: counter + "%"});
}, 35);

Well at the end I would remind you again about that i took the idea from this medium post:

Create a full-screen website pre-loader in a jiffy - codeburst

Vaibhav Khulbe ・ Sep 11, 2018 ・ 5 min read
codeburst.io

and improved it with animejs.
Here is my final example in Codepen:

Bye

Anime.js and GSAP analogue v0.0.2a

duboloms — Sun, 19 Apr 2020 20:28:46 +0000

This is analogue of Anime.js and GSAP animation engines. {Have not a name} v 0.0.2a. Now all plugin parameters can be set in JSON format and it can display his version.

Circle animation for transitions - #GSAP

duboloms — Mon, 27 Jan 2020 15:15:47 +0000

Circle animation for transitions.
This is Gsap animation and i work about it for 4 hours.

DEV Community: duboloms