tehnokv/picojs - js технология распознавания лиц

На JS написанная функция распознавания лица, как утверждает автор вмещается в 200 строк кода.
tehnokv/picojs - js технология распознавания лиц

Скрипт позволяет распознаванать лица по фото так и в реальном режиме онлайн. Смотрите примеры.
https://github.com/tehnokv/picojs

headroom.js - скрипт прячет шапку при скроле

headroom.js - скрипт прячет шапку при скроле

https://wicky.nillia.ms/headroom.js/

legendary-cursor - js красивый эффект шлейфа за курсором

legendary-cursor - js красивый эффект шлейфа за курсором

https://github.com/Domenicobrz/legendary-cursor

Функция CROP изображения на JS

/**
 * @param {string} url - The source image
 * @param {number} aspectRatio - The aspect ratio
 * @return {Promise<HTMLCanvasElement>} A Promise that resolves with the resulting image as a canvas element
 */
function crop(url, aspectRatio) {
    
    // we return a Promise that gets resolved with our canvas element
    return new Promise(resolve => {

        // this image will hold our source image data
        const inputImage = new Image();

        // we want to wait for our image to load
        inputImage.onload = () => {

            // let's store the width and height of our image
            const inputWidth = inputImage.naturalWidth;
            const inputHeight = inputImage.naturalHeight;

            // get the aspect ratio of the input image
            const inputImageAspectRatio = inputWidth / inputHeight;

            // if it's bigger than our target aspect ratio
            let outputWidth = inputWidth;
            let outputHeight = inputHeight;
            if (inputImageAspectRatio > aspectRatio) {
                outputWidth = inputHeight * aspectRatio;
            } else if (inputImageAspectRatio < aspectRatio) {
                outputHeight = inputHeight / aspectRatio;
            }

            // calculate the position to draw the image at
            const outputX = (outputWidth - inputWidth) * .5;
            const outputY = (outputHeight - inputHeight) * .5;

            // create a canvas that will present the output image
            const outputImage = document.createElement('canvas');

            // set it to the same size as the image
            outputImage.width = outputWidth;
            outputImage.height = outputHeight;

            // draw our image at position 0, 0 on the canvas
            const ctx = outputImage.getContext('2d');
            ctx.drawImage(inputImage, outputX, outputY);
            resolve(outputImage);
        };

        // start loading our image
        inputImage.src = url;
    })
    
}

Пример использования
crop('path/to/our/image.jpeg', 1)
crop('path/to/our/image.jpeg', 16/9)
crop('path/to/our/image.jpeg', 16/9).then(canvas => {
  // `canvas` is the resulting image
})
const canvas = await crop('path/to/our/image.jpeg', 16/9)

Sal.js - скрипт создания анимации при скроле

Sal.js - скрипт создания анимации при скроле

<div
  data-sal="slide-up"
  data-sal-delay="300"
  data-sal-easing="ease-out-back"
></div>

https://mciastek.github.io/sal/

SortableJS/Sortable - js скрипт создания перетаскиваемых списков без зависимостей

Пример исопльзования
<ul id="items">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>
var el = document.getElementById('items');
var sortable = Sortable.create(el);

https://github.com/SortableJS/Sortable
Вверх