[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src='js/css3-animate-it.js'></script> </body> Step 2: HTML HTMLはまずは、通常通りに各エレメントを配置します。 <div> <h2>見出し</h2> </div> 親要素に「.animat
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link rel="stylesheet" href="slidebars.min.css"> <head> <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="slidebars.min.js"></script> </body> St
CSSのcounter-incrementを使ってリスト以外に番号を付ける方法
あまり使っているのを見たことがないマイナーなCSSプロパティ「counter-increment」を使ったサンプルを紹介します。 「counter-increment」というプロパティを初めて聞いたという方も多いかもしれません。「counter-increment」は、サンプルのように番号を自動的に付けるときに使われます。リスト（list-style-type: decimal）のような感じですね。「counter-increment」で番号を付ける対象を指定して、疑似要素を使って表示することになります。 疑似要素を使っているため、IE7以下は非対応ですのでご注意ください。 今回サンプルを２つ用意しました。 ではHTMLから順番に解説していきます。 HTML HTMLはどちらのサンプルも同じで以下のようになっています。 <div class="divCount"> <h4><a href=
HTML5 × CSS3 × jQueryを真面目に勉強 – #10.1 CSS3 Transforms(3D) | DevelopersIO
matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ではサンプルコードを交えながら順に見てくとします。 matrix3dですが、こちらもmatrix 2Dと同様、複雑な理屈で取っ付きにくいうえに、rotateや3dやperspectiveといった関数で充分に代替可能なため、今回の記事では割愛させて頂きます。 m(_ _)m Transforms 3D - 事始め 端的に言うならば、Transform 3D は要素を3次元に移動ならびに回転、拡大縮小できるというものです。更に後述するperspectiveを使うことで、要素に奥行きのある表現を持たせることが可能となります。 3DではX軸とY軸に加えて、Z軸が追加されます。Z軸はウィンドウからユーザーに向かう方向が正の値で、ユーザーからウィンドウに向
[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し：slide
単純だけど簡単な背景画像のパララックスを実現するjQueryのスクリプト | Web Mugen
スクロールで背景画像がズレるやつを制作しました。パララックスとか言うやつですね。まあコンテンツごとの背景がズレるだけなので、視差と呼べるかは微妙ですけれど、他のをみるとそう呼んでもいい感じですね。 とりあえず今回のウリはタイトル通り単純だけど簡単ってところです。パララックスする要素をまとめて指定するだけでOK。あとは動きの量を調整したければする位です。まあ、大したモノではありませんし、もう新しいって程でもありませんが、チョット試してみようかなって思ってる方にはイイかもしれません。 Demo 必要なファイル jquery.js 対応ブラウザ Google Chrome Safari Firefox Internet Explorer7～ Opera ※Windowsのみの確認です。また、Internet Explorer以外は記事投稿時の最新版を対象にした確認です。 コーディング＆設定 HT
[JS]スライダーやタブやページネーションなど便利な機能を少ないコードで実装する超軽量（8kb）のスクリプト -vanity
スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。 vanity jquery toolset [ad#ad-2] vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。 機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。 以下、7つのツールとそのコードを紹介します。 ※外部ファイル・スタイルシートは省略 スライダーのデモページ div要素やリスト要素で実装するスライダーです、スライドのエフェクトやスピードも調整できます。 HTML <!-- the slider content holder --> <div class="slider"> <!-- the elements inside the s
拡大時にアコーディオンのように画像が広がるカルーセルを実装するjQueryプラグイン・Accarousel
クリックで画像を拡大する際に アコーディオンのように広がる カルーセルを実装するjQueryの プラグイン・Accarousel。機能 はシンプルですが、動きが好み だったので備忘録。 カルーセルを実装するjQueryプラグインです。 見た目は普通のカルーセルですが、画像をクリックすると以下のように拡大されます。 なんと言うか、横にブワッと広がる感じ。ブワッと。 頭悪いから上手く言えないのでサンプル見てください。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.cjAccarousel.min.js"></scri
[JS]アコーディオンとカルーセルが合体したスライダーのスクリプト -Accarousel
伸び縮みするアコーディオンと回転木馬のようにスライドするカルーセルを合体させたスライダーを実装するjQueryのプラグインを紹介します。 jQuery Accordion with Carousel – Accarousel [ad#ad-2] Accarouselのデモ Accarouselの使い方 Accarouselのデモ デモはFirefox, Chrome, Safari, Opera, IE7+でご覧ください。 デモページ：4枚目をアコーディオン カルーセルは右下のナビゲーションでサムネイル画像をスライドさせます。 起点と終点があるのがちょっと残念。 [ad#ad-2] Accarouselの使い方 実装は簡単で、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 ※スタイルシートはLESS版も用
CSS3の:nth-childセレクタで、3n+2とかを計算するやつ
あんまり使わないような使うようなセレクタ の:nth-childですが、自分の頭が宜しくない ようで、適応させたい箇所の計算で混乱しま す・・面倒くさいと思っていたのでいいツール ないかなと思ってたんですがシンプルでいい のがあったので同じく計算嫌いな方向けに シェアします。 E:nth-child(n)は、親要素のn番目の子要素であるE要素にスタイルを適応させます。とは理解しつつも、(2n+5)とかになってくるとなんか混乱するんですよね。なんで混乱するんだろｗ Nth-Child Visual Calculator n+2とか3n+8とか入れるだけで適応される箇所を明示してくれる、ってだけのシンプルなものです。何度か使って計算の仕方をおさらいしました。使ってないとまた忘れそうですけどね・・ こうやって見てみると8n+5なら5個目スタートで8を足していけばいいだけ、って分かるんですけど。ア
[JS]リスト要素で簡単に実装できるニュースティッカー -jQuery News Ticker
アニメーションで次々に表示するニュースティッカーを実装するjQueryのプラグインを紹介します。 IE6+をはじめ、スマフォ用のSafari Mobileにも対応しています。 jQuery News Ticker デモ [ad#ad-2] jQuery News Tickerの実装 jQuery News Tickerの実装 外部ファイル スタイルシートとスクリプトを外部ファイルとして指定します。 <link href="styles/ticker-style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script src="in
jQuer基礎：attrを学ぶ
また基礎的な事を勉強。 今までしっかり勉強していなかった分、 基礎の学習は本当にいろいろな事を学ぶ。 今回はattrを勉強 DOMの属性関連を扱うattr 例えば、titleのないところにtitleをつけたりできる。 ■サンプル１ソース $(document).ready(function(){ $("input.samp1").click(function(){ $("p.addtitle").attr({title:"タイトルを付けました"}); var title = $("p.addtitle").attr("title"); $("span.sp1").text(title); }); }); ■サンプル１ HTMLソース <p class="addtitle">ここのタイトルが変化します→ <span class="sp1">変化後のタイトル名をここに表示</span> </p
画像を矩形以外の形状で表示したい人のためのチュートリアル
画像にPNGマスクを使用して、ブラシストローク状、サークル状など、矩形とは異なる形状で表示するチュートリアルを紹介します。 デモページ もう一つのサークル状のデモは、下記ページのギャラリーのサムネイルとして使用されています。 Roundfolio 画像の枚数が少ないのであれば個別に画像を作成してもよいかもしれませんが、このデモのように数多くあると、このテクニックを使用した方がより効率よく実装できます。 [ad#ad-2] 画像の作り方 画像は3種類が必要で、全て同じサイズにします。 ロールオーバー用の画像 ※透過PNG画像 マスク用の画像 ※透過PNG画像 ベースとなる画像 サークル状に使用する画像3種類 制作：HTML, CSS, JavaScript HTML ロールオーバーとマスク用に2つの空span要素を使用します。 <a href="images/gallery-full.jpg
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
