Skip to content

Instantly share code, notes, and snippets.

View iamravenous's full-sized avatar

Franco Moya iamravenous

View GitHub Profile
@iamravenous
iamravenous / jquery.smooth-scroll-to-top.js
Last active March 18, 2016 13:31
Easy and reusable script for smoothing scroll to top
/*
* 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 / img-background.js
Created August 12, 2016 20:25
Hide images and place as background-images
/*
* 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 / _mediaqueries.scss
Created March 8, 2017 18:44
Mobile-first breakpoints and mediaqueries mixins
// 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 / nifty-animate.beta.js
Last active October 30, 2019 00:42
Micro library to animate elements with CSS based on scroll position
/*
* 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();
@iamravenous
iamravenous / _bem-builder.scss
Last active February 28, 2020 09:47
Sass BEM Mixins
@mixin element($name) {
@at-root #{&}__#{$name}{
@content;
}
}
@mixin modifier($name) {
@at-root #{&}--#{$name} {
@content;
}
@iamravenous
iamravenous / _easings.scss
Last active June 8, 2020 14:08
Animation timing functions variables in Sass
/*
* 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 / jquery.scrollspy-hashchange.js
Last active November 6, 2020 05:05
Hash change on scroll with Bootstrap 3 Scrollspy
/*
* Scrollspy Hashchange
* Hash change on scroll with Bootstrap 3 Scrollspy
* Author: Franco Moya - @iamravenous
*/
$(window).on('activate.bs.scrollspy', function (e) {
history.replaceState({}, "", $("a[href^='#']", e.target).attr("href"));
});
@iamravenous
iamravenous / format-numbers.js
Last active December 19, 2020 03:57
A handy and fast way to format numbers as currency
/*
* 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 March 3, 2021 01:51
Highlight element on hover and fade all the same elements, except the current
/*
* 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 / _mediaqueries.scss
Created September 21, 2016 19:50
Sass mobile-first media queries mixins
/*
* Sass mobile-first media queries mixins
* @author Franco Moya - @iamravenous
*/
/* Breakpoints list map based on Bootstrap 4 grid */
$breakpoints: (
xs: 0,
sm: 544px,