Skip to content

Instantly share code, notes, and snippets.

@A973C
A973C / auto-type-css.markdown
Created September 21, 2017 06:06 — forked from CodeMyUI/auto-type-css.markdown
Auto Type CSS !
@A973C
A973C / index.html
Created September 21, 2017 06:04 — forked from CodeMyUI/index.html
Material Design Bubble Animation
<body>
<div class="background"></div>
<div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
</body>
@A973C
A973C / glitch-effect.markdown
Created September 21, 2017 06:00 — forked from CodeMyUI/glitch-effect.markdown
Glitch Effect
@A973C
A973C / index.pug
Created September 21, 2017 05:57 — forked from CodeMyUI/index.pug
Smooth 3d perspective slider
- var images = ["https://lh3.googleusercontent.com/aC9nyW5dhaYFmWD8fcf8DApjpH08eHEkbCHqmUPHRQ5T3jK-QyNKZYVMehmrvyPdEA_KxWvgZ3_kyOOYOAv99Ow3UoKSvEloleVKGSfLOwOyDV3Q6Dwi1G-NYoa9-t_ofmmskE6BYnVIOnIz2HWlMcijzIEwvKAL_R4z63DaLgG0z_OcGiSQHunwGAPXrBQUv42ZXuIMODq4zxDHczSxJ72b0-_udtdQK3JuT2X8nXCwFoF7GxmOpzXS0H5f50DuCbXoXcx-O7bgBMCXZdMpTxB27-wdXeLmxpYUySXgjSN2NAKmK16DmGLYvw5tMlrqwb8h4MJEEbXjP1pjPxXsahb7UZseEGyn80uLjATANJvusyJWCtzkkxYXPz-yI1rDvfEJKe2eyA-5AvFlzFBSwBMASn8f7mXinUrXMMREkJQjoi89NfZ91G7253OEVQOqcWxddiYtcHCO5v6Pl3QfV2SUTWXgggscDSY2ezjSPpYERNTXnIM_aCyWmIG7ybrfqOB0eVYBAgynyuPVbjd4KuZWZq2Dfu33HX1RuPKglbOuZGD1QbpJnruvUVkAmjDXI40ENN7X=w1600-h766","https://lh3.googleusercontent.com/4Bn4zdADhWhegRcmxS1xmHxbxIBzEgB8ADfeaCmiwT9iF7y2mN9Wc5L7gFLxUo2bgl3V-97EFrOyE9OXfkvip3pkpNxYe50GiapeT41p7D7tNJm3oEdV8Y-7toGyvz0UZ8VgDACVTUEdzzVVm2NtQSCroSvmo4gL3u0ty-KAyKnah9vIitfw2Rs1MuNzQq6vmzUcw1_4obGAKmk_Nx0dD33RSy1jbT8D61kxERbOu0pHUciywIO2EeUX8iOcJfHHQwVW3lGYcZKSiimGjBUvzHILrSpVZQ1xUlj0U21EeY4Hil1ZaJQaX47hQezcxZj7H8GyWhNv2TzQ7EU8DS3_M
@A973C
A973C / jquery.addrule.js
Created April 24, 2017 12:09 — forked from yckart/jquery.addrule.js
Add css-rules to an existing stylesheet - http://stackoverflow.com/a/16507264/1250044
/*!
* jquery.addrule.js 0.0.2 - https://gist.github.com/yckart/5563717/
* Add css-rules to an existing stylesheet.
*
* @see http://stackoverflow.com/a/16507264/1250044
*
* Copyright (c) 2013 Yannick Albert (http://yckart.com)
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
* 2013/11/23
**/
@A973C
A973C / box-shadow.html
Last active April 8, 2017 10:17 — forked from ocean90/box-shadow.html
CSS3 Box Shadow, only top/right/bottom/left and all
<!DOCTYPE html>
<html>
<head>
<title>Box Shadow</title>
<style>
.box {
height: 150px;
width: 300px;
margin: 20px;
@A973C
A973C / BookMarklet Get YouTube poster image.html
Created September 4, 2016 08:46 — forked from luisnomad/BookMarklet Get YouTube poster image.html
Get the current YouTube video's poster image (highest resolution available) with this simple Bookmarklet
<a href ="javascript:(function()%7Bfunction%20getParameterByName(name)%20%7Bname%20%3D%20name.replace(%2F%5B%5C%5B%5D%2F%2C%20%22%5C%5C%5B%22).replace(%2F%5B%5C%5D%5D%2F%2C%20%22%5C%5C%5D%22)%3Bvar%20regex%20%3D%20new%20RegExp(%22%5B%5C%5C%3F%26%5D%22%20%2B%20name%20%2B%20%22%3D(%5B%5E%26%23%5D*)%22)%2Cresults%20%3D%20regex.exec(location.search)%3Breturn%20results%20%3D%3D%20null%20%3F%20%22%22%20%3A%20decodeURIComponent(results%5B1%5D.replace(%2F%5C%2B%2Fg%2C%20%22%20%22))%3B%7Dvar%20id%20%3D%20getParameterByName%20(%22v%22)%3Bif%20(typeof%20id%20!%3D%3D%20null%20%26%26%20id%20!%3D%3D%22%22)%20%7Bvar%20url%20%3D%20%22http%3A%2F%2Fimg.youtube.com%2Fvi%2F%22%20%2B%20id%20%2B%20%22%2Fmaxresdefault.jpg%22%3Bwindow.open(url%2C'_blank')%3B%7D%20else%20%7Balert%20(%22Activate%20the%20tab%20in%20your%20browser%20where%20the%20YouTube%20video%20is%20loaded%20and%20try%20again!%22)%3B%7D%7D)()">Grab Poster Image</a>
@A973C
A973C / index.html
Last active July 10, 2016 07:19 — forked from luruke/smashingmagazine.js
Source code of the demo "Improving User Flow Through Page Transitions" on Smashing Magazine.
<header>
</header>
<main>
<div class="cc">
</div>
</main>

Modal Animations

Most of the time these slide in or fade in - just playing with other instantiation animations.

All animations are class-driven, and are animating the exact same HTML elements.

A Pen by Jesse Couch on CodePen.

License.