Skip to content

Instantly share code, notes, and snippets.

View Sandstedt's full-sized avatar

Jonas Sandstedt Sandstedt

33 followers · 12 following
View GitHub Profile
@Sandstedt
Sandstedt / SharpImageProps.js
Last active May 20, 2022 12:37
Create an image prop for use with strapi-plugin-local-image-sharp for use with next/image
const CMS_URL = "http://localhost:1337"
/*
Create an image object for strapi-plugin-local-image-sharp
Docs: https://github.com/strapi-community/strapi-plugin-local-image-sharp
Credit: Jonas Sandstedt, Fully Studios
Licence: MIT
Basic Usage:
<Image
@Sandstedt
Sandstedt / SmoothScroll.css
Last active October 1, 2020 06:49
A native CSS adoptation of smooth scroll js libraries
/* Activate a smooth scroll whn using inline anchor links, example: #about */
html {
scroll-behavior: smooth;
}
/* Deactivate the smooth scroll if users has choose to reduce motion in their OS */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
@Sandstedt
Sandstedt / FullyReveal
Last active April 28, 2021 10:15
A helpclass to use IntersectionObserver API to detect if an element is in view or not
/**
* @class FullyReveal
* Use IntersectionObserver to detect if an element
* is in view or not. Then add and delete a class.
* Use this to animate the element
*
* Usage: Add `data-reveal` on the DOM objects you wanna listen to.
* You can also set `data-revealThreshold="0.5"` for a different threshold,
* else it fallbacks to 0.25
* If you only want it to trigger once, write `data-reveal="once"`
@Sandstedt
Sandstedt / detect_full_screen.html
Last active April 10, 2018 09:57 — forked from nathansmith/detect_full_screen.html
Detect full-screen mode for desktop browsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Detect Full-Screen</title>
<style>
* {
font-family: sans-serif;
line-height: 1.5;