Skip to content

Instantly share code, notes, and snippets.

View Dexdot's full-sized avatar
🏠
Working from home

Kam Dexdot

🏠
Working from home
View GitHub Profile
@Dexdot
Dexdot / parallax.js
Created July 16, 2019 10:11
animations on scroll
const math = {
map: (x, a, b, c, d) => ((x - a) * (d - c)) / (b - a) + c,
lerp: (a, b, n) => (1 - n) * a + n * b
};
const { body } = document;
// Window
let winsize;
const calcWinsize = () => {
winsize = { width: window.innerWidth, height: window.innerHeight };
// Options
const options = {
threshold: [0, 0.25, 0.5, 0.75, 1]
};
const animateItem = item => item.target.classList.add('visible');
// Create observer
const observer = new IntersectionObserver(items => {
items.forEach(item => {
@Dexdot
Dexdot / scale.js
Created April 25, 2019 23:47
Get element scale value by js
console.log(+getComputedStyle(mainImage)
.transform.slice(7)
.split(',')[0])
@Dexdot
Dexdot / kitchen.js
Created March 14, 2019 14:02
gsap => anime test kitchen
import { TweenMax } from 'gsap';
import anime from 'animejs';
window.anime = anime;
const get = (el, dir) => {
const translate = getComputedStyle(el)
.getPropertyValue('transform')
.match(/(-?[0-9\.]+)/g);
@Dexdot
Dexdot / _dlmenu.sass
Created December 11, 2018 22:47
multi-level dropdown menu
.dl-menuwrapper
// width: 100%
float: left
position: relative
perspective: 1000px
perspective-origin: 50% 200%
button
@Dexdot
Dexdot / snapTranslateXYValsToNearestPixel.js
Created December 5, 2018 09:21
Убирает сглаживание используя translate, если размеры изображения заданы в процентах
function snapTranslateXYValsToNearestPixel(element){
var xTransPos = $(element).offset().left;
var yTransPos = $(element).offset().top;
// turn off any transitions (but save values first):
var transitionVal = $(element).css('transition');
$(element).css('transition', 'none');
// turn off translate:
$(element).css('transform', 'translateX(0) translateY(0)');
var xPosDiff = xTransPos - $(element).offset().left;
var yPosDiff = yTransPos - $(element).offset().top;
@Dexdot
Dexdot / scrollbar-width.js
Created November 3, 2018 18:57
scrollbar-width.js
const outer = document.createElement('div');
const inner = document.createElement('div');
outer.style.overflow = 'scroll';
document.body.appendChild(outer);
outer.appendChild(inner);
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
document.body.removeChild(outer);
@Dexdot
Dexdot / sass-loop.sass
Created October 16, 2018 16:33
Sass for loop css prop
@for $i from 1 through 10
.menu__social-item:nth-child(#{$i})
transition-delay:(#{$i*0.15s})
=margin($side: bottom, $color: darkBlue)
// lvl 5 - darkBlue
@if $color == darkBlue
margin-#{$side}: 64px
@media (max-width: 1920px)
margin-#{$side}: 40px
@media (max-width: 1440px)
@Dexdot
Dexdot / jq.viewport.js
Created May 14, 2018 13:49
jQuery viewport checker
$.fn.isInViewport = function() {
const elementTop = $(this).offset().top;
const elementBottom = elementTop + $(this).outerHeight();
const viewportTop = $(window).scrollTop();
const viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};