Skip to content

Instantly share code, notes, and snippets.

View doc22940's full-sized avatar

Acampbell doc22940

131 followers · 1.9k following
View GitHub Profile
@doc22940
doc22940 / css3-spin-preloader-preload-page.markdown
Created November 27, 2020 22:20
CSS3 spin preloader + preload Page
@doc22940
doc22940 / index.html
Created November 24, 2020 23:09
Swipable Cards 60FPS Animation
<h1>Swipable Cards 60fps animation</h1>
<div class="cards-container">
<div class="card">
<div class="picture"></div>
<div class="text">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
@doc22940
doc22940 / index.html
Created November 4, 2020 21:50
Infinite Lazy load
<body>
<h1>Scroll & Scroll</h1>
<div class="image-container" id="imageContainer">
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="loading" style="margin: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; display: block; shape-rendering: auto;" width="100px" height="100px" viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid">
<path fill="none" stroke="#002663" stroke-width="8" stroke-dasharray="205.271142578125 51.317785644531256" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-linecap="round" style="transform:scale(0.8);transform-origin:50px 50px">
<animate attributeName="stroke-dashoffset" repeatCount="indefinite" dur="1.1904761904761905s" keyTimes="0;1" values="0;256.58892822265625"></animate>
</path>
</svg>
@doc22940
doc22940 / index.html
Created November 4, 2020 21:50
Infinite Lazy load
<body>
<h1>Scroll & Scroll</h1>
<div class="image-container" id="imageContainer">
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="loading" style="margin: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; display: block; shape-rendering: auto;" width="100px" height="100px" viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid">
<path fill="none" stroke="#002663" stroke-width="8" stroke-dasharray="205.271142578125 51.317785644531256" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-linecap="round" style="transform:scale(0.8);transform-origin:50px 50px">
<animate attributeName="stroke-dashoffset" repeatCount="indefinite" dur="1.1904761904761905s" keyTimes="0;1" values="0;256.58892822265625"></animate>
</path>
</svg>
@doc22940
doc22940 / index.html
Created November 4, 2020 21:49
Social Media Icons - Animated
<body>
<section class="layering">
<ul>
<li>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<span><i class="fab fa-facebook-f"></i></span>
@doc22940
doc22940 / index.html
Created November 4, 2020 21:49
Social Media Icons - Animated
<body>
<section class="layering">
<ul>
<li>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<span><i class="fab fa-facebook-f"></i></span>
@doc22940
doc22940 / index.html
Created October 31, 2020 22:46
Theme switch / Theme changer
<label class="switch">
<input id="switch" onclick="changeBg()" type="checkbox">
<span class="slider round"></span>
</label>
@doc22940
doc22940 / index.html
Created October 31, 2020 21:59
Nice buttons
<div id="top">
<button class="one" id="oneFirst"><i class="far fa-envelope"></i> messages</button>
<button class="one" id="oneSecond"><i class="far fa-bell"></i>notifications</button>
</div>
<div id="middle">
<button class="two" id="twoFirst"><i class="fas fa-snowflake fa-x2"></i> Weather</button>
<button class="two" id="twoSecond"><i class="fas fa-brain"></i> Memory</button>
<button class="two" id="twoThird"><i class="fas fa-bus"></i> Transport</button>
</div>
@doc22940
doc22940 / index.html
Created October 31, 2020 11:23
Vincent van Git w/ GSAP 🎨
<svg class="vvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="vvg" viewBox="0 0 104.211 178.897">
<defs>
<clipPath id="b">
<path d="M242.822 893.869c0 61.251-36.059 106.284-94.208 106.284-54.326 0-91.436-45.033-91.436-106.284 0-61.252 37.668-85.951 90.973-85.951 53.306 0 94.67 24.699 94.67 85.95z" fill="red"/>
</clipPath>
<clipPath id="d">
<ellipse ry="23.111" rx="23.762" cy="827.682" cx="68.304"/>
</clipPath>
<clipPath id="e">
<ellipse transform="scale(-1 1)" cx="-231.243" cy="827.682" rx="23.762" ry="23.111" fill="#803300"/>
@doc22940
doc22940 / index.html
Created October 31, 2020 07:14
Vincent van Git w/ GSAP 🎨
<svg class="vvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="vvg" viewBox="0 0 104.211 178.897">
<defs>
<clipPath id="b">
<path d="M242.822 893.869c0 61.251-36.059 106.284-94.208 106.284-54.326 0-91.436-45.033-91.436-106.284 0-61.252 37.668-85.951 90.973-85.951 53.306 0 94.67 24.699 94.67 85.95z" fill="red"/>
</clipPath>
<clipPath id="d">
<ellipse ry="23.111" rx="23.762" cy="827.682" cx="68.304"/>
</clipPath>
<clipPath id="e">
<ellipse transform="scale(-1 1)" cx="-231.243" cy="827.682" rx="23.762" ry="23.111" fill="#803300"/>