Skip to content

Instantly share code, notes, and snippets.

View Fanckler's full-sized avatar

Serhii Fanckler

View GitHub Profile
@Fanckler
Fanckler / index.js
Created July 20, 2018 21:08
Particles text
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var mask;
var pointCount = 500;
var str = "Cool";
var fontStr = "bold 128pt Helvetica Neue, Helvetica, Arial, sans-serif";
ctx.font = fontStr;
ctx.textAlign = "center";
@Fanckler
Fanckler / index.html
Created June 4, 2018 07:52
slick progressbar
<div class="slider-wrapper" id="slick-1">
<div class="slider">
<div class="slide">your content</div>
<div class="slide">your content</div>
<div class="slide">your content</div>
</div>
<div class="slider-progress">
<div class="progress"></div>
</div>
</div>
@Fanckler
Fanckler / app.js
Created May 23, 2018 08:34
Волнистая картинка с маской (THREE/Fragment/Vertex shader)
//import 'pixi.js';
//import * as filters from 'pixi-filters';
import * as THREE from 'three';
import {TimelineMax} from 'gsap';
import fragment from './fragment.glsl';
import vertex from './vertex.glsl';
var container;
@Fanckler
Fanckler / PIXI.JS
Last active May 17, 2018 13:10
Шаблон PIXI. с размытием картинок.
import 'pixi.js';
import * as filters from 'pixi-filters';
import {TimelineMax} from 'gsap';
var tl = new TimelineMax();
var app = new PIXI.Application(window.innerWidth, window.innerHeight, {backgroundColor : 0x1099bb}); //создаем сцену с цветом, шириной и высотой
document.body.appendChild(app.view); //добавляем в body созданую сцену.
var container = new PIXI.Container(); // создаем один общий контейнер
@Fanckler
Fanckler / _common.sass
Last active July 16, 2018 10:57
Transition Page (Barba)
body
background: #252627
line-height: 1.4
.barba-container
transition: all 1s ease-in-out
#nav-bar
height: 100vh
width: 60px
position: fixed
left: 0
@Fanckler
Fanckler / video_canvas.js
Created March 31, 2018 15:35
draw video to canvas
//video canvas
var canvas = document.getElementById('canV');
var ctx = canvas.getContext('2d');
var video = document.createElement('video');
video.src = '../video/product.mp4';
video.addEventListener('loadeddata', function() {
video.play(); // start playing
update(); //Start rendering
});
function update() {
@Fanckler
Fanckler / scroll_indicator.js
Created March 31, 2018 12:23
Scroll indicator
//scroll indicator
$(window).scroll(function() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.querySelector('.scroll-bar span').style.height = scrolled+'%';
});
@Fanckler
Fanckler / common.js
Last active March 25, 2018 00:21
CSS triangles SVG animation
var i = 0;
function changeClass(){
$("body").removeClass("figure" + i)
i = (i==4)?1:i+1;
$("body").addClass("figure" + i);
}
var gogo = setInterval(changeClass, 2500);
setTimeout(changeClass, 500);
$('#svg').click(function(event) {
clearInterval(gogo);
@Fanckler
Fanckler / index.pug
Last active March 22, 2018 21:57
mouse move
//- Обязательные вложения ointin.fixpoint > fixtarget
li.fb.pointin.fixpoint
a.fixtarget(href='#')
$('.first').css({
left: -e.pageX / 10 + 100,
top: -e.pageY / 10 + 100
});
$('.second').css({
left: e.pageX / 50 + 200,
top: e.pageY / 50 + 200
});