Skip to content

Instantly share code, notes, and snippets.

Avatar

Franco Moya iamravenous

View GitHub Profile
@iamravenous
iamravenous / nifty-animate.beta.js
Last active Oct 30, 2019
Micro library to animate elements with CSS based on scroll position
View nifty-animate.beta.js
/*
* Nifty Animate
* Micro library to animate elements with CSS based on scroll position
* Requires: Lodash throttle & debounce
* Author: Franco Moya - @iamravenous
* Version: 1.1 Beta
*/
const offset = el => {
const rect = el.getBoundingClientRect();
View _bem-builder.scss
@mixin element($name) {
@at-root #{&}__#{$name}{
@content;
}
}
@mixin modifier($name) {
@at-root #{&}--#{$name} {
@content;
}
@iamravenous
iamravenous / _mediaqueries.scss
Created Mar 8, 2017
Mobile-first breakpoints and mediaqueries mixins
View _mediaqueries.scss
// Functions
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min !=0, $min, null);
}
@iamravenous
iamravenous / _mediaqueries.scss
Created Sep 21, 2016
Sass mobile-first media queries mixins
View _mediaqueries.scss
/*
* Sass mobile-first media queries mixins
* @author Franco Moya - @iamravenous
*/
/* Breakpoints list map based on Bootstrap 4 grid */
$breakpoints: (
xs: 0,
sm: 544px,
@iamravenous
iamravenous / _easings.scss
Last active Jun 8, 2020
Animation timing functions variables in Sass
View _easings.scss
/*
* Animation timing functions variables in Sass
* Based on Easings by Andrey Sitnik (Autoprefixer / PostCSS) and Matthew Lein's easing animation tool.
* Also used on Velocity.js animation library.
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* http://easings.net/
* https://matthewlein.com/ceaser
* http://velocityjs.org/
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
@iamravenous
iamravenous / img-background.js
Created Aug 12, 2016
Hide images and place as background-images
View img-background.js
/*
* Image as background
* Hide images and place as background-images
* Author: Franco Moya - @iamravenous
*/
document.addEventListener("DOMNodeInserted", function() {
var imgSrc = document.querySelectorAll("[data-img-src]");
for (var i = 0; i < imgSrc.length; i++) {
@iamravenous
iamravenous / format-numbers.js
Last active Dec 19, 2020
A handy and fast way to format numbers as currency
View format-numbers.js
/*
* Format Numbers
* A handy and fast way to format numbers as currency
* Author: Franco Moya - @iamravenous
* Version: 0.1.1
*/
function formatNumbers(value) {
var a = value.toString();
var b = '';
@iamravenous
iamravenous / jquery.highlight-element.js
Last active Mar 3, 2021
Highlight element on hover and fade all the same elements, except the current
View jquery.highlight-element.js
/*
* Highlight Element
* Highlight element on hover and fade all the same elements, except the current
* Recommended for use in galleries or in grids with many items or cards
* Author: Franco Moya - @iamravenous
*/
var highlight = $('.grid-item');
highlight.hover (
@iamravenous
iamravenous / jquery.smooth-scroll-to-top.js
Last active Mar 18, 2016
Easy and reusable script for smoothing scroll to top
View jquery.smooth-scroll-to-top.js
/*
* Smooth scroll to top
* Easy and reusable script for smoothing scroll to top
* Author: Franco Moya - @iamravenous
* Usage: Add data-scroll="top" to the link or element you want to scroll to top
*/
$('[data-scroll="top"]').click(function(e){
e.preventDefault();
$('body,html').animate({
@iamravenous
iamravenous / jquery.smooth-scroll-anchor-link.js
Last active Jun 25, 2021
Automatically detects the hash and scroll smoothly to anchor link with URL hashchange
View jquery.smooth-scroll-anchor-link.js