React logo reacting
A Pen by Nathan Blenke on CodePen.
Nathan Blenke nblenke
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import express from 'express' | |
| import * as path from 'path' | |
| import cors from 'cors' | |
| const app = express() | |
| const PORT = process.env.PORT || 5000 | |
| const __dirname = path.resolve(path.dirname('')) | |
| app.use(cors()) | |
| app.use(express.static(path.join(__dirname, 'public'))) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .spacer { | |
| height: 2800px; | |
| } | |
| #test { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 80px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .spacer { | |
| height: 2800px; | |
| } | |
| #test { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 80px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.8/css/swiper.min.css"> | |
| <style> | |
| .swiper-container img { | |
| max-width:100%; | |
| } | |
| .swiper-slide { |
nblenke
/ gist:5796232fb6b322e1cafa
Last active
January 4, 2017 16:19
Boom - Explode elements using Web Animations - https://rawgit.com/nblenke/5796232fb6b322e1cafa/raw/0574d42d12f60e9c6cdde33776a1e19e5381ccac/gistfile1.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <style> | |
| .boom { | |
| width:40px; | |
| height:40px; | |
| position:relative; |
nblenke
/ gist:33871970008561ec8049
Last active
August 29, 2015 14:19
Android/iTunes App Download Notification
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* jshint strict: true */ | |
| /* globals $ */ | |
| /* | |
| * Show a "Download App" notification on Android and iPhone. | |
| * Notification will appear once per page every 30 days unless dismissed, | |
| * once dismissed, it won't show again for 30 days | |
| */ | |
| (function () { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var tapFlag = 0, | |
| tapping = function (ev) { | |
| var bool = false; | |
| if (ev.type === 'touchstart') { | |
| tapFlag = 1; | |
| } | |
| if (ev.type === 'touchmove') { | |
| tapFlag = 0; | |
| } | |
| if (ev.type === 'touchend') { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| var el = document.querySelector('#header'), | |
| className = 'fixed', | |
| offset = (el.offsetTop + el.offsetHeight), | |
| scrollTop = function () { | |
| return document.body.scrollTop || document.documentElement.scrollTop; | |
| }; | |
| if (scrollTop() > offset) { | |
| el.className = className; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| domModified | |
| Add mutation listener to DOM element and trigger callback once it has completed | |
| https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver | |
| Usage: | |
| domModified({ | |
| selector: '#selector', |
NewerOlder