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; |