Midnight.js - Switch fixed headers on the fly
Midnight.js lets you switch fixed headers on the fly Scroll to try it out! The Header Create your fixed nav (or header) as you typically would. You can use whatever markup suits you, just make sure the header works well with position:fixed. The Sections After that, take any sections of your page that need a different nav and add data-midnight="your-class" to it, where .your-class is the class you
jQuery UI Touch Punch - Touch Event Support for jQuery UI
Tested on iPad, iPhone, Android and other touch-enabled mobile devices. jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser wil
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
Nex - Api Documentation
1 - Add the following files before the closing <head> tag <link rel="stylesheet" href="nex.min.css" /> <!-- Nex main css file --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- The latest jquery --> <script type="text/javascript" src="Animo.min.js"></script> <!-- The Animo library --> <script type="text/javascript" src="nex.min.js"></script> <!-- Ne
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
jQuery 特定文字列や特定要素の削除及び置換方法 | Stronghold Archive
どうもこんにちは。今回のtipは【jQuery 特定テキストや特定要素の削除方法】です。ちょっとした時に使える方法ですので覚えておいても損は無いかもしれません。 要素の削除 jQueryを使った要素の削除方法、jQueryの読み込みをお忘れなく。 <script src="js/jquery-1.X.X.min.js"></script> 以下の例では【target】というIDを持っている要素を削除します。 $(function(){ $(‘#target’).remove() }); 特定テキストの削除及び置換 jQueryを使った特定テキストの削除方法。以下の例では【target】というclassを持っている要素の中にある【rainbow】というテキストを削除します。 $(function(){ $(‘.target’).each(function(){ var txt = $(thi
animo.js • Labs by Big Room Studios
animo.js A powerful little tool for managing CSS animations Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic. August 13th, 2013 by Daniel Raftery You can easily install animo via the GitHub repo or using bower's package manager. Using First and foremost, animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 be
JS/CSSでふわりとフェードするボタンをつくる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 震災後、なんやかんやで2週間あけてしまいました。こんにちは、私は元気です。 今日は、せっかくCSS3で色々な事が出来るようになってきたところで、 ふわりとフェードするボタンの作りなどを記してみる。 作るもの マウスオーバーすると、ふわーっと表示が切り替わるボタン。 画像を二枚重ね、上の画像の透明度を変化させて表示を切り替える。 こういったUIにあたるエフェクトは好みが別れる気がしますが、 個人的にはリッチな感じがして結構好きです。 HTML <div id="demo" class="fadeButton"> <a href="#">FadeButton</a> </div> 基本となるCSS #demo { display: block; width: 135px; height: 135px; background-posi
Let's get animating! | GSAP | Docs & Learning
Welcome! In this article we're going to cover GSAP's core fundamentals and animate some HTML elements. 🥳 If that's not your end goal, don't worry. Whatever you plan to animate, whichever framework you use - the techniques and principles covered here will serve you well. The GreenSock Animation Platform (GSAP) is an industry-celebrated suite of tools used on over 11 million sites, including a ton
jQuery Image Scale Carousel
What Makes jQuery Image Scale Carousel Different? It auto scales the images you put into it to the appropriate height and width keeping their aspect ratio in place. When working with imagery online keeping the integrity of an images aspect ratio is as important as anything else. This is what's so nice about this jQuery plug-in; you don't have to worry about all of your images being perfectly sized
HTML5のplaceholder属性をjQueryでやってみる
追記：HTML5のplaceholder属性を代替するjQueryプラグイン(ah-placeholder.js) ここと同じ内容のことをjQueryプラグインの体裁に整えたものを，GitHubで公開してます．詳しくは上の記事をご参照のこと． 4.10.7.2 Common input element attributes — HTML5 (including next generation additions still in development) HTML5のinput要素には、placeholder属性があります。input要素に、placeholder属性でテキストを書くと、下のような感じの表現が可能になります。今のところOpera・Safari・Chromeでは、ネイティブに記述しても解釈してくれるようです。 ただし、XHTML 1.1や、HTML 4.01のDTDを宣言した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Barba.js
darsa.in
Going Horizontal - Examples - ScrollMagic
iDangero.us
SweetAlert
jQuery - Simple Screensaver
GitHub - protonet/jquery.inview: A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.
GitHub - dirkgroenen/viewport-checker: Little utility to detect if elements are currently within the viewport :wrench:
Transit - CSS transitions and transformations for jQuery