スクロールするとアニメーションしながら要素が表示するスクリプト「ScrollReveal」のDEMO
var ScrollrevealFade = { origin: 'left', distance: '0px',//移動範囲 scale: 1,//拡大表示（１で横スクロールが始まる） rotate: { x: 0, y: 0, z: 0 }, //xは縦回転、yは横回転、zは傾き（風車みたいな感じ） duration: 1200, //アニメーションの速度 delay :200 //要素が表示するまでの待機時間（ディレイ） }; sr.reveal('.scrollreveal-fade', ScrollrevealFade, 100); 上記のような形でオプションは記述していきます。scaleを0.8にすれば表示の際に拡大するように表示されたり、1.2にすれば縮小しながら表示されたりします。 rotateの数値をいじると、縦回転・横回転・傾きをしながら表示されるようになります。また、
Jquery で一定範囲のみスクロールに追従させてみる。 ☺ webruary
Jquery で一定範囲のみスクロールに追従させてみる。 2013 - 10 28 Category Web Comments 2 最近ちょくちょくいろんなサイトで見かける仕掛け。 基本は固定表示で、スクロールすると追従するってやつ。 自分もオシャレの一環として（？）←にあるSNSボタンに適用してみました。 見ての通り、記事が書かれている範囲のみスクロールに追従するようになっております。 当初、やり方はちょちょっと調べればすぐ分かるだろうと余裕こいてたら、紹介されてるのがだいたいスクロールすると無限に追従する系で、一定範囲となるとプラグインを使用したり、追加機能や事細かに指定してたりと「単純かつシンプルに一定範囲だけ追従させたい」自分としてはイマイチあわないということで考えてみました。 もし、このやり方が合うサイトを制作してる方がおりましたら、ご参考ください。 ただし、自分の文才がない＋説
ulリスト + jQueryで作る、開閉するアコーディオンメニュー
連動開閉するアコーディオンメニューというものを作ったので、自分の備忘録として。ページ遷移時に該当部分は開いておく機能（WPの条件分岐にて）もおまけで。 サンプル デモ 三角のアイコン部分が開閉します。閉じている時は右向き、開いている時は下向きになります。他を開くと今開いていた所は一緒に閉じます。 参考サイト jQuery（＋CSS3）で作るアコーディオンメニュー（2段アコーディオン対応） [jQuery] クリックで開閉するアコーディオンパネル – かちびと.net こちらを参考にさせていただきました。ありがとうございます！ 三角アイコン素材 デモで使ってる画像です。よかったらお使い下さい。簡単な画像ですのでどこにでも使っていただいて構いません。スマホ対応のため、CSSで1/2サイズで表示します。 コード html <ul class="accordion"> <li class="cur
jQueryを使った一定以上スクロールすると上に固定される横メニュー
jQueryを使った一定以上スクロールすると固定される横メニュー 上にある横メニューはスクロールして見えなくなりそうになると固定されます。作り方等の説明はこちらから → 「jQueryを使った一定以上スクロールすると上に固定される横メニュー」 以下のアコーディオンは、以前書いたjQueryとCSS3を使ったアコーディオンメニューを詳しく説明します｜Webparkの内容です。今回の記事とは関係ありません。 HTML <ul id="accordion"> <li><a href="#">カテゴリー１</a> <ul id="active"> <li><a href="1.html">サブカテゴリー１</a></li> <li><a href="2.html">サブカテゴリー２</a></li> <li><a href="3.html">サブカテゴリー３</a></li> </ul> </li
Animsition
AnimsitionA simple and easy jQuery plugin for CSS animated page transitions.Download on GitHub Tweet 58 different animations Fadefade-infade-outFade Demo Fade upfade-in-up-smfade-in-upfade-in-up-lgfade-out-up-smfade-out-upfade-out-up-lgFade Up Demo Fade downfade-in-down-smfade-in-downfade-in-down-lgfade-out-down-smfade-out-downfade-out-down-lgFade Down Demo Fade leftfade-in-left-smfade-in-leftfade
Windy – A Plugin for Swift Content Navigation
Windy – A Plugin for Swift Content Navigation
Tutorials | Codrops
In this section, you will find a variety of in-depth articles written by skilled front-end developers that cover a range of web development and web design techniques. How to Create a PS1-Inspired Jitter Shader with React-Three-Fiber Sep 3, 2024 by Oguzhan Tufenk Learn how to create a custom jitter shader in React-Three-Fiber, inspired by the visual style of PS1-era games, to add a retro aesthetic
NoCode jQuery Slider : jQuery Slideshow : 2024 WOW!
An image slider is an image slider, and they're all roughly the same, correct? Not so quickly. What are the primary criteria for selecting any kind of web component? Compatibility, simplicity of setup, great performance, and an attractive design and feel. With our Slider we've tried to create the perfect html slider that covers all these needs and even more: Compatibility with the widest feasible
Jennifer Dewalt | 180 Websites
Hi! I'm Jennifer Dewalt and I am making 180 websites in 180 days. You can follow the project here and on the blog. Today's Website Hello World! Day 180 Hello World! Day 179 All Draw Day 178 How We're Feeling Day 177 One Drawing Day 176 Color Jam Day 175 Buggy Day 174 Talking Dude Day 173 Paths Day 172 Chromatones Day 171 Quick Compliments Day 170 GFBOOM! Day 169 Electro Bounce Day 168 Polychrome D
イヌでもわかるJavaScript講座
このJavaScript講座はプログラミング知識がない人もサンプルをただ埋め込めば使えるように作られています。ステップの段階で少しずつJavaScriptを説明していきますので、各ステップの内容がすべて把握できなくても、あとでわかってくると思います。えっ？と思う個所があっても、それはそのステップの趣旨ではないところですので、その個所はどこかのステップで説明します。深く考え込まずに、各ステップを適当にすすめていってください。 なお、本講座のサンプルを使ってＨＴＭＬファイルがぶっ壊れたり、マシンから煙や火が出ても一切責任を負いません。バックアップはこまめにしましょう。(^^; また、サンプルを無断で使用することを禁じるわけがありません。勝手に許可無く使ってください。
[JS]軽快なアニメーションでグリッドに配置したパネルをパズドラのように移動したり、追加・削除できるスクリプト -Gridly
デモのアニメーション Gridlyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script> <script src="javascript/jquery.gridly.js" type="text/javascript"></script> <link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" /> Step 2: HTML 各パネルはdiv要素で実装し、それらをラッパーで包みます。 <div class=
レスポンシブなレイアウトに役立つ２５個のjQueryプラグイン - colopixie
PCやスマートフォンなどに自動的に対応してくれるレスポンシブなサイトに役立つjQueryのプラグインが25 jQuery Plugins to help with Responsive Layoutsにありましたので、紹介したいと思います。 Response.js スマートフォンに最適化してくれるJS Menu to a Dropdown for Small Screens 画面が小さくなると、ドロップダウンのメニューになる Doubletake 画像のサイズを動的に変更してくれる FitText 画面のサイズに合わせてフォントサイズを変更してくれる jFontSize フォントサイズを変更してくれる Elastislide カルーセルメニュー。 スライドショー。 Responsly Blueberry wmuSlider PhotoSwipe FlexSlider Responsive
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
千葉県木更津市の産婦人科 加藤病院｜袖ケ浦 君津
http://kankyo.joshibi.net/
http://www.splashnology.com/article/jquery-plugins-feb-2014/11762/
Loading...
Flipping Circle Slideshow
画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) – かちびと.net
Plinky | Jennifer Dewalt