This is Speech Synthesis Demo
A Pen by Minoru Hayakawa on CodePen.
(function(){ | |
document.addEventListener('DOMContentLoaded', function(event) { | |
new ActiveForm().onEvent(event.target); | |
}, false); | |
})(); | |
function ActiveForm() { | |
this.submit = document.getElementById('submit'); | |
} |
document.addEventListener("DOMContentLoaded", function(event) { | |
new ShowButton().load(); | |
}); | |
function ShowButton() { | |
this.btn = document.querySelectorAll('.class'); | |
this.target = document.querySelectorAll('input[type="checkbox"]'); | |
} | |
ShowButton.prototype.load = function() { |
- var links = ['//www.google-analytics.com', '//accounts.google.com', '//apis.google.com', '//oauth.googleusercontent.com', '//ssl.gstatic.com', '//www.facebook.com', '//connect.facebook.net', '//static.ak.facebook.com', '//static.ak.fbcdn.net', '//s-static.ak.facebook.com', '//twitter.com', '//cdn.api.twitter.com', '//p.twitter.com', '//platform.twitter.com', '//b.st-hatena.com', '//cdn-ak.b.st-hatena.com', '//cdn.api.b.hatena.ne.jp'] | |
each val in links | |
link(href='#{val}', rel='dns-prefetch') |
// =========== [[CSS Animation]] =========== | |
// Keyframes | |
// Usage: | |
// @include keyframes(name) { | |
// 0% { selector { property: value; } } | |
// 100% { selector { property: value; } } | |
// } | |
@mixin keyframes($name) { | |
@-webkit-keyframes #{$name} { |
This is Speech Synthesis Demo
A Pen by Minoru Hayakawa on CodePen.
$(function(){ | |
var pointer = new PointerEvent(); | |
pointer.load(); | |
}); | |
function PointerEvent(){ | |
this.userAgent = window.navigator.userAgent.toLowerCase(); | |
this.appVersion = window.navigator.appVersion.toLowerCase(); | |
this.target = $('.cp-image'); | |
this.pointer = $('.click-shield'); |
/* | |
Usage: | |
HTML | |
<img class="js-rollover"> | |
JS | |
require jQuery | |
http://jquery.com/download/ | |
Zepto(function($){ | |
var acc = new Accordion(); | |
acc.init(); | |
}); | |
function Accordion(){ | |
this.toggle = $('.mod-accordion_heading_toggle'); | |
this.panel = $('.mod-accordion_panel'); | |
} | |
Accordion.prototype.init = function(){ |
/* | |
* This code is to add or remove class depends on the direction like Smartphone. | |
* The classname is 'isActive'. | |
*/ | |
function toogleClass(){ | |
this.node = document.querySelector(target); | |
} | |
toogleClass.prototype.init = function(){ | |
var self = this; |