DEV.XFOR.TOP

Email: dev@xfor.top Skype: utz0r2 Github: utz0r2
CSSHTMLPHPJSVideoNoty
E-commerce Scripts: vvStore | vvShop | Avox
© 2008 – 2020
» » » Страница 10

Rallax.js - js плагин для создания паралакс эффекта

import rallax from 'rallax.js'

document.addEventListener('DOMContentLoaded', () => {
  window.onbeforeunload = () => {
    window.scrollTo(0, 0)
  }

  const dead = rallax('.dead', {speed: 0.55, mobilePx: 600})
  const simple = rallax('.simple', {speed: 0.7, mobilePx: 600})
  const parallax = rallax('.parallax', {speed: 0.6, mobilePx: 600})
  const scrolling = rallax('.scrolling', {speed: 0.75, mobilePx: 600})

  const objects = [dead, simple, parallax, scrolling]

  objects.forEach(obj => {
      obj.when(
        () => obj.scrollY() > 750,
        () => obj.stop()
      )
      obj.when(
        () => obj.scrollY() <= 750,
        () => obj.start()
      )
    })

  const image = document.querySelector('.parallax-image')
  const imageContainer = document.querySelector('.container')
  const imageContainerRect = imageContainer.getBoundingClientRect()
  const winHeight = window.innerHeight

  const imageTop = -(window.innerHeight * 0.3) * 2
  const imageHeight = imageContainerRect.height + (winHeight * 0.3)
  const imageWidth = imageContainerRect.width + 200
  const imageLeft = -100

  Object.assign(image.style, {
    position: 'relative',
    top: `${imageTop}px`,
    left: `${imageLeft}px`,
    height: `${imageHeight}px`,
    width: `${imageWidth}px`,
  })

  const imageParallax = rallax(image, {mobilePx: 600})
})

https://chriscavs.github.io/rallax-demo/

oussamahamdaoui/forgJs - js валидатор объекта

 const passwordRule = new Rule({
    type: 'password',
    minLength: 8,
    uppercase: 1,
    numbers: 1,
    matchesOneOf: ['@', '_', '-', '.', '!'],
  }, null);

  passwordRule.test('@_-bddcd6A'); // returns true

https://github.com/oussamahamdaoui/forgJs

lovell/sharp - процессор картинок для node.js

Умеет работать с JPEG, PNG и WebP. В 4 раза быстрей чем GraphicsMagick
const roundedCorners = Buffer.from(
  '<svg><rect x="0" y="0" width="200" height="200" rx="50" ry="50"/></svg>'
);

const roundedCornerResizer =
  sharp()
    .resize(200, 200)
    .overlayWith(roundedCorners, { cutout: true })
    .png();

readableStream
  .pipe(roundedCornerResizer)
  .pipe(writableStream);

https://github.com/lovell/sharp

TarekRaafat/autoComplete.js - простой скрипт автозавершения на чистом js

TarekRaafat/autoComplete.js - простой скрипт автозавершения на чистом js

https://github.com/TarekRaafat/autoComplete.js

chrisdiana/cms.js - js генератор Markdown сайтов на стороне клиента

chrisdiana/cms.js - js генератор Markdown сайтов на стороне клиента

https://github.com/chrisdiana/cms.js

nodkz/lvovich - js библиотека склонение названий городов, определения пола по ФИО, склонения имен по падежам

nodkz/lvovich - js библиотека склонение названий городов, определения пола по ФИО, склонения имен по падежам

https://github.com/nodkz/lvovich
Вверх