netmin-net’s gists

netmin-net / fullscreen-html5-page-background-video.markdown

Created April 14, 2019 00:20

Fullscreen HTML5 Page Background Video

Technique explained in the related blog post

netmin-net / font-awesome-colored-brand-and-social-icons.markdown

Created April 17, 2019 01:32

Font Awesome Colored - Brand And Social Icons

netmin-net / index.html

Created April 18, 2019 18:00

Stylized Buttons

	<div class="btn from-top">From Top</div>
	<div class="btn from-left">From Left</div>
	<div class="btn from-right">From Right</div>
	<div class="btn from-middle">From Middle</div>
	<div class="btn from-bottom">From Bottom</div>

netmin-net / script.babel

Created April 19, 2019 14:24

Waterdroplet WebGL Shader

	/**
	* Raindrop fragment shader, being used by PIXI.js in the EffectCanvas object
	* {{uniforms: {time: {type: string, value: number}, iResolution: {type: string, value: [*]}}, fragment: string}}
	*/
	const shaderData = {
	uniforms: {
	iResolution: {
	type: 'v2',
	value: [
	window.innerWidth,

netmin-net / index.html

Created April 19, 2019 14:34

Split Slick Slideshow

	<!--

	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">

netmin-net / animated-weather-icons.markdown

Created April 19, 2019 18:56

Animated Weather Icons

netmin-net / index.html

Created April 19, 2019 19:58

VelocityJS demo

	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700,800" rel="stylesheet" type="text/css">

	<div id="js-car1" class="car car--1 c-green-g"></div>
	<div id="js-car2" class="car car--2 c-green-g"></div>
	<div id="js-fast" class="c-green-c-g text text--fast">
	<div class="text__bit text__bit--1">
	<div id="js-bit-inner" class="text__bit__inner"><span id="js-span">f</span></div>
	</div>
	<div class="text__bit text__bit--2">
	<div id="js-bit-inner" class="text__bit__inner"><span id="js-span">a</span></div>

netmin-net / index.html

Created April 19, 2019 21:10

Ken Burns effect with Vegas 2

	<div class="container">
	<h1>Vegas <strong>2</strong></h1>
	<h2>Background slideshow</h2>
	<p>Ken Burns effect</p>
	</div>

	<a href="http://vegas.jaysalvat.com">
	Download VEGAS
	</a>

netmin-net / index.html

Created April 20, 2019 06:47

Ken Burns Effect fullscreen without js

	<h1><small>Fullscreen</small> Ken Burns effect <small>without javascript</small></h1>

	<!-- You can add more ".slideshow-image" elements, but remember to update the "$items" variable on SCSS -->
	<div class="slideshow">
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x1400')"></div>
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/buildings/1600x1400')"></div>
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/food/1600x1400')"></div>
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/technology/1600x1400')"></div>
	</div>

netmin-net / index.html

Created April 20, 2019 06:48

Ken Burns Effect fullscreen without js

	<h1><small>Fullscreen</small> Ken Burns effect <small>without javascript</small></h1>

	<!-- You can add more ".slideshow-image" elements, but remember to update the "$items" variable on SCSS -->
	<div class="slideshow">
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x1400')"></div>
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/buildings/1600x1400')"></div>
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/food/1600x1400')"></div>
	<div class="slideshow-image" style="background-image: url('https://source.unsplash.com/category/technology/1600x1400')"></div>
	</div>