supahfunk

uniform float zNear = 0.1;
uniform float zFar = 500.0;

// depthSample from depthTexture.r, for instance
float linearDepth(float depthSample)
{
    depthSample = 2.0 * depthSample - 1.0;
    float zLinear = 2.0 * zNear * zFar / (zFar + zNear - depthSample * (zFar - zNear));
    return zLinear;
}

supahfunk

const hash = value => {
  let hashed = 0;

  for (let i = 0; i < value.length; i += 1) {
    hashed = (hashed << 5) - hashed + value.charCodeAt(i);
    hashed |= 0;
  }

  return `${hashed}`;
};

supahfunk

const scale = (a, b, c, d, e) => {
  return (a - b) * (e - d) / (c - b) + d
}

supahfunk

(function(){
	// Scroll Variables (tweakable)
	var defaultOptions = {
		// Scrolling Core
		frameRate        : 150, // [Hz]
		animationTime    : 400, // [px]
		stepSize         : 120, // [px]

		// Pulse (less tweakable)
		// Ratio of "tail" to "acceleration"

supahfunk

var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
var is_opera = navigator.userAgent.toLowerCase().indexOf("op") > -1;
if ((is_chrome)&&(is_safari)) { is_safari = false; }
if ((is_chrome)&&(is_opera)) { is_chrome = false; }

supahfunk

{"lastUpload":"2020-02-10T09:31:00.287Z","extensionVersion":"v3.4.3"}

supahfunk

// From https://stackoverflow.com/a/13542669
// Made by Monica Dinculescu 
// These are the magical methods!

/* 
 * Darkening/Lightening. Params:
 * -  a color in an rgb format, ex rgb(123,123,123).
 * - a percent, which means how much to darken/lighten the colour.
 * If the percent is positive, you're lightening. Otherwise, it's darkening.
 * 

supahfunk

function init() { if (!document.body) return; var e = document.body; var t = document.documentElement; var n = window.innerHeight; var r = e.scrollHeight; root = document.compatMode.indexOf("CSS") >= 0 ? t : e; activeElement = e; initdone = true; if (top != self) { frame = true } else if (r > n && (e.offsetHeight <= n || t.offsetHeight <= n)) { var i = false; var s = function () { if (!i && t.scrollHeight != document.height) { i = true; setTimeout(function () { t.style.height = document.height + "px"; i = false }, 500) } }; t.style.height = ""; setTimeout(s, 10); addEvent("DOMNodeInserted", s); addEvent("DOMNodeRemoved", s); if (root.offsetHeight <= n) { var o = document.createElement("div"); o.style.clear = "both"; e.appendChild(o) } } if (document.URL.indexOf("mail.google.com") > -1) { var u = document.createElement("style"); u.innerHTML = ".iu { visibility: hidden }"; (document.getElementsByTagName("head")[0] || t).appendChild(u) } if (!fixedback && !disabled) { e.style.backgroundAttachment = "scroll"; t.s

supahfunk

<!--

Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/

-->
<div class="split-slideshow">
  <div class="slideshow">

supahfunk

Image Mask Reveal Animation v.2

Scroll down

Demo: https://codepen.io/supah/pen/MXONQP

A Pen by Fabio Ottaviani on CodePen.

License.