UX/UI
DESIGNER
I am a Web Designer & Developer based in Omaha, NE. I love crafting beautiful web pages in HTML5, CSS3 and JavaScript or jQuery. My other skills include WordPress, Photoshop, Illustrator.
Gary Marr
UX/UI Designer
$(function() { //Initialize filterizr with default options $('.filtr-container').filterizr(); }); $(function() { //Simple filter controls $('.simplefilter li').click(function() { $('.simplefilter li').removeClass('active'); $(this).addClass('active'); }); //Multifilter controls $('.multifilter li').click(function() { $(this).toggleClass('active'); }); //Shuffle control $('.shuffle-btn').click(function() { $('.sort-btn').removeClass('active'); }); //Sort controls $('.sort-btn').click(function() { $('.sort-btn').removeClass('active'); $(this).addClass('active'); }); });
var sliderSelector = '.swiper-container', options = { init: false, loop: true, speed:800, slidesPerView: 2, // or 'auto' // spaceBetween: 10, centeredSlides : true, effect: 'coverflow', // 'cube', 'fade', 'coverflow', coverflowEffect: { rotate: 50, // Slide rotate in degrees stretch: 0, // Stretch space between slides (in px) depth: 100, // Depth offset in px (slides translate in Z axis) modifier: 1, // Effect multipler slideShadows : true, // Enables slides shadows }, grabCursor: true, parallax: true, autoplay: { delay: 2500, disableOnInteraction: true, }, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, breakpoints: { 1023: { slidesPerView: 1, spaceBetween: 0 } }, // Events on: { imagesReady: function(){ this.el.classList.remove('loading'); } } }; var mySwiper = new Swiper(sliderSelector, options);
// Initialize slider mySwiper.init();
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var starDensity = .416; var speedCoeff = .05; var width; var height = 100; var starCount; var circleRadius; var circleCenter; var first = true; var giantColor = '180,184,240'; var starColor = '226,225,142'; var cometColor = '226,225,224'; var canva = document.getElementById('universe'); var stars = [];
windowResizeHandler(); window.addEventListener('resize', windowResizeHandler, false);
createUniverse();
function createUniverse() { universe = canva.getContext('2d');
for (var i = 0; i < starCount; i++) { stars[i] = new Star(); stars[i].reset(); } draw(); } function draw() { universe.clearRect(0, 0, width, height); var starsLength = stars.length; for (var i = 0; i < starsLength; i++) { var star = stars[i]; star.move(); star.fadeIn(); star.fadeOut(); star.draw(); } window.requestAnimationFrame(draw); } function Star() { this.reset = function() { this.giant = getProbability(3); this.comet = this.giant || first ? false : getProbability(10); this.x = getRandInterval(0, width - 10); this.y = getRandInterval(0, height); this.r = getRandInterval(1.1, 2.6); this.dx = getRandInterval(speedCoeff, 6 * speedCoeff) + (this.comet + 1 - 1) * speedCoeff * getRandInterval(50, 120) + speedCoeff * 2; this.dy = -getRandInterval(speedCoeff, 6 * speedCoeff) - (this.comet + 1 - 1) * speedCoeff * getRandInterval(50, 120); this.fadingOut = null; this.fadingIn = true; this.opacity = 0; this.opacityTresh = getRandInterval(.2, 1 - (this.comet + 1 - 1) * .4); this.do = getRandInterval(0.0005, 0.002) + (this.comet + 1 - 1) * .001; }; this.fadeIn = function() { if (this.fadingIn) { this.fadingIn = this.opacity > this.opacityTresh ? false : true; this.opacity += this.do; } };
this.fadeOut = function() { if (this.fadingOut) { this.fadingOut = this.opacity < 0 ? false : true; this.opacity -= this.do / 2; if (this.x > width || this.y < 0) { this.fadingOut = false; this.reset(); } } }; this.draw = function() { universe.beginPath(); if (this.giant) { universe.fillStyle = 'rgba(' + giantColor + ',' + this.opacity + ')'; universe.arc(this.x, this.y, 2, 0, 2 * Math.PI, false); } else if (this.comet) { universe.fillStyle = 'rgba(' + cometColor + ',' + this.opacity + ')'; universe.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, false); //comet tail for (var i = 0; i < 30; i++) { universe.fillStyle = 'rgba(' + cometColor + ',' + (this.opacity - (this.opacity / 20) * i) + ')'; universe.rect(this.x - this.dx / 4 * i, this.y - this.dy / 4 * i - 2, 2, 2); universe.fill(); } } else { universe.fillStyle = 'rgba(' + starColor + ',' + this.opacity + ')'; universe.rect(this.x, this.y, this.r, this.r); } universe.closePath(); universe.fill(); }; this.move = function() { this.x += this.dx; this.y += this.dy; if (this.fadingOut === false) { this.reset(); } if (this.x > width - (width / 4) || this.y < 0) { this.fadingOut = true; } }; (function() { setTimeout(function() { first = false; }, 50) })() } function getProbability(percents) { return ((Math.floor(Math.random() * 1000) + 1) < percents * 10); } function getRandInterval(min, max) { return (Math.random() * (max - min) + min); } function windowResizeHandler() { width = window.innerWidth; height = window.innerHeight; starCount = width * starDensity; circleRadius = (width > height ? height / 2 : width / 2); circleCenter = { x: width / 2, y: height / 2 }
canva.setAttribute('width', width); canva.setAttribute('height', height); }
(function() {
// detect if IE : from http://stackoverflow.com/a/16657946 var ie = (function(){ var undef,rv = -1; // Return value assumes failure. var ua = window.navigator.userAgent; var msie = ua.indexOf('MSIE '); var trident = ua.indexOf('Trident/');
if (msie > 0) { // IE 10 or older => return version number rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); } else if (trident > 0) { // IE 11 (or newer) => return version number var rvNum = ua.indexOf('rv:'); rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10); }
return ((rv > -1) ? rv : undef); }());
// disable/enable scroll (mousewheel and keys) from http://stackoverflow.com/a/4770179 // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 var keys = [32, 37, 38, 39, 40], wheelIter = 0;
function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; }
function keydown(e) { for (var i = keys.length; i--;) { if (e.keyCode === keys[i]) { preventDefault(e); return; } } }
function touchmove(e) { preventDefault(e); }
function wheel(e) { // for IE //if( ie ) { //preventDefault(e); //} }
function disable_scroll() { window.onmousewheel = document.onmousewheel = wheel; document.onkeydown = keydown; document.body.ontouchmove = touchmove; }
function enable_scroll() { window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null; }
var docElem = window.document.documentElement, scrollVal, isRevealed, noscroll, isAnimating, container = document.getElementById( 'container' ), trigger = container.querySelector( 'button.trigger' );
function scrollY() { return window.pageYOffset || docElem.scrollTop; }
function scrollPage() { scrollVal = scrollY();
if( noscroll && !ie ) { if( scrollVal < 0 ) return false; // keep it that way window.scrollTo( 0, 0 ); } if( classie.has( container, 'notrans' ) ) { classie.remove( container, 'notrans' ); return false; } if( isAnimating ) { return false; } if( scrollVal <= 0 && isRevealed ) { toggle(0); } else if( scrollVal > 0 && !isRevealed ){ toggle(1); } }
function toggle( reveal ) { isAnimating = true;
if( reveal ) { classie.add( container, 'modify' ); } else { noscroll = true; disable_scroll(); classie.remove( container, 'modify' ); }
// simulating the end of the transition: setTimeout( function() { isRevealed = !isRevealed; isAnimating = false; if( reveal ) { noscroll = false; enable_scroll(); } }, 500 );
}
// refreshing the page... var pageScroll = scrollY(); noscroll = pageScroll === 0;
disable_scroll();
if( pageScroll ) { isRevealed = true; classie.add( container, 'notrans' ); classie.add( container, 'modify' ); }
window.addEventListener( 'scroll', scrollPage ); trigger.addEventListener( 'click', function() { toggle( 'reveal' ); } ); })();
// Repeat demo content var $body = $('body'); var $box = $('.box'); for (var i = 0; i < 20; i++) { $box.clone().appendTo($body); } // Helper function for add element box list in WOW WOW.prototype.addBox = function(element) { this.boxes.push(element); }; // Init WOW.js and get instance var wow = new WOW(); wow.init(); // Attach scrollSpy to .wow elements for detect view exit events, // then reset elements and add again for animation $('.wow').on('scrollSpy:exit', function() { $(this).css({ 'visibility': 'hidden', 'animation-name': 'none' }).removeClass('animated'); wow.addBox(this); }).scrollSpy();