jeangontijo

document.addEventListener("mousemove", function (event) {
  const x = event.pageX
  const y = event.pageY
 
  document.querySelectorAll("div").forEach(div => {
		const dx = (div.offsetLeft + 50) - x
    const dy = (div.offsetTop + 50) - y
    const dist = Math.sqrt(dx * dx + dy * dy)
    
    const score = Math.exp(dist * -0.003)

jeangontijo

var visible = document.querySelectorAll('.element');

function isInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
      // when any part of element is visible
      rect.top >= -el.clientHeight &&
      rect.left >= -el.clientWidth &&
      rect.bottom <= window.innerHeight + el.clientHeight &&
      rect.right <= window.innerWidth + el.clientWidth

jeangontijo

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    if(scroll > 0){
        document.querySelector('nav').classList.add('scroll');
    } else {
        document.querySelector('nav').classList.remove('scroll');
    }
});

jeangontijo

.element {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.fade {
    opacity: 0;
    transform: translate3d(0, 3rem, 0);
    transition-property: opacity, transform;
    transition-duration: 0.8s, 1.4s;
    transition-timing-function: linear, cubic-bezier(0.175, 0.885, 0.32, 1.275);

jeangontijo

<svg class="blob" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
    <path d="pathA" fill-rule="nonzero">
    <animate dur="5s" repeatCount="indefinite" attributeName="d" values="pathA;pathB;pathA" fill="freeze"
      calcMode="spline"
      keySplines="0.4 0 0.2 1; 0.4 0 0.2 1">
  </path>
</svg>

jeangontijo

body {
  position: fixed;
  overflow: hidden;
}

// That's it ! Tested in iOS 12

jeangontijo

function $(e){
    let el = document.querySelectorAll(e.toString());
    if (el.length > 1) {
        return el;
    } else {
        return document.querySelector(e.toString());
    }
}

$('#element').classList.add('active');

jeangontijo

var el = document.querySelector(".element");
var elX = el.getBoundingClientRect().x + el.offsetWidth / 2;
var elY = el.getBoundingClientRect().y + el.offsetHeight / 2;

function followMouse(e) {
  var moveX = e.clientX - elX;
  var moveY = e.clientY - elY;
  var radians = Math.atan2(moveY, moveX);
  var degrees = (radians * (180 / Math.PI));
  requestAnimationFrame(update.bind(update,moveX, moveY, degrees));

jeangontijo

:root * {
  /* Pause the animation */
  animation-play-state: paused;
  /* Bind the animation to scroll */
  animation-delay: calc(var(--scroll) * -1s);
  /* These last 2 properites clean up overshoot weirdness */
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

jeangontijo

a {
  box-shadow: inset 0 -0.2em white, inset 0 -0.25em blue;
  text-decoration: none;
}