Skip to content

Instantly share code, notes, and snippets.

Avatar
🐌
work work work

Andreas Kar thexmanxyz

🐌
work work work
View GitHub Profile
@thexmanxyz
thexmanxyz / Config-Explore-Gantry5.html.twig
Created May 26, 2020
Explore Gantry5 configuration in TWIG
View Config-Explore-Gantry5.html.twig
{# retrieve configuration #}
{{ dump(gantry.config) }}
{# retrieve styles configuration #}
{{ dump(gantry.config.styles) }}
{# retrieve breakpoint configuration #}
{{ dump(gantry.config.styles.breakpoints) }}
{# you can also obtain particle configurations via gantry.particles #}
View Multiply-Recursion-JS.js
function multiply(arr, n) {
if (n <= 0) { // return 0 if count is 0 or negative
return 0;
} else { // sum up the next n - 1 elements with the current element
return multiply(arr, n - 1) + arr[n - 1];
}
}
@thexmanxyz
thexmanxyz / Simple-Overlay-Cookie.css
Last active Apr 8, 2020
Simple Overlay with Cookie (only shown once or on action)
View Simple-Overlay-Cookie.css
@thexmanxyz
thexmanxyz / css-loader-all-loader.css
Last active Mar 29, 2020
CSS-Loader - Pure CSS loader - all 8 and small versions (CSS and SCSS) - credits @ https://github.com/lukehaas/css-loaders
View css-loader-all-loader.css
/* All 8 CSS-Loader (plus small version for each) pure CSS loaders in one file */
/* Uses black on white and not white on turquise like the original */
/* Add <div class="load1 loader">Loading...</div> to your HTML markup */
/* You can change the spinner with the classes load1 - load8 and load1-small - load8-small */
/* credits @ https://github.com/lukehaas/css-loaders */
/* load1 */
.async-gmaps-spinner.load1.loader,
.async-gmaps-spinner.load1-small.loader,
.async-gmaps-spinner.load1.loader:before,
@thexmanxyz
thexmanxyz / loading-io-all-loader-primary.scss
Last active Apr 6, 2020
Loading.io - Pure CSS loader - all 12 and small version (CSS, SCSS and SCSS+$primary) - credits @ https://loading.io
View loading-io-all-loader-primary.scss
/* All 12 Loading.io (plus small version for each) pure CSS loaders in one file, combined with $primary using e.g. template primary-color */
/* You can change the spinner with the classes load1 - load8 and load1-small - load8-small */
/* credits @ https://loading.io and https://github.com/loadingio/css-spinner/ */
/* circle */
.lds-circle, .lds-circle-small {
display: inline-block;
width: 64px;
height: 64px;
margin: 8px;
@thexmanxyz
thexmanxyz / WOWjs-Reanimate-Element-delay.js
Last active Mar 29, 2020
WOW.js Reanimate Single Elements without init() - delayed
View WOWjs-Reanimate-Element-delay.js
// If you want to explicitly trigger an animation for certain WOW.js elements again. No need to call `init()` and also not wanted (all elements are reset):
var triggerAnimation = function(selector, animation) {
var $element = $(selector); // get element
// re-apply animation (style and class)
var applyAnimation = function(){
$element = $(selector);
$element.addClass('wow ' + animation + ' animated');
$element.attr('style', 'visibility: visible; animation-name: ' + animation + ';');
};
@thexmanxyz
thexmanxyz / Reset-WOWjs-Animation-On-Leave-Viewport.js
Last active Mar 29, 2020
Reset WOW.js elements for reanimation during scrolling (leaving viewport)
View Reset-WOWjs-Animation-On-Leave-Viewport.js
// This snippet dynamically resets animation after passing the viewport (scrolling, resizing), hence they are reanimated when viewing them again
// Helper function for adding elements to box list in WOW, credits @ https://github.com/matthieua/WOW/issues/46#issuecomment-133760823
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
wow = new WOW();
wow.init();
var checkWOWJsReset = function() {
var resetWOWJsAnimation = function() {
@thexmanxyz
thexmanxyz / WOWjs-Reanimate-Element.js
Last active Mar 29, 2020
WOW.js Reanimate Single Elements without init() - normal
View WOWjs-Reanimate-Element.js
// If you want to explicitly trigger an animation for certain WOW.js elements again. No need to call `init()` and also not wanted (all elements are reset):
var triggerAnimation = function(selector, animation) {
var $element = $(selector); // get element
var element = $element[0]; // get JS element
var newone = element.cloneNode(true); // clone it
element.parentNode.replaceChild(newone, element); // and replace the old with clone
$element = $(selector); // get cloned jQ element
$element.addClass('wow ' + animation + ' animated'); // apply animations
$element.attr('style', 'visibility: visible; animation-name: ' + animation + ';'); // and styles
@thexmanxyz
thexmanxyz / Lazy-Loading-Images-Spinner.html
Last active Mar 16, 2020
Lazy load images and remove BS4 spinner dynamically
View Lazy-Loading-Images-Spinner.html
<div class="lazy-load-ctn">
<div class="spinner-grow loading-img" role="status">
<span class="sr-only">Loading...</span>
</div>
<img data-src="img/yourimage.png" class="img-fluid lazy">
</div>
@thexmanxyz
thexmanxyz / _openinghours.scss
Last active Mar 29, 2020
Startbootstrap - Business Casual - dynamic opening hours
View _openinghours.scss
.opening-hours-section {
&.cta {
padding: 3rem 0 2.5rem 0;
background-color: fade-out($primary, 0.1);
.cta-inner {
position: relative;
padding: 2rem;
margin: 0.5rem;
background-color: fade-out($white, 0.15);
&:before {
You can’t perform that action at this time.