jQuery の animate の縦方向の出現や隠す動作
jQuery の animate の縦方向の出現や隠す動作は、height に、show、hide、toggle などを指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の height: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、上方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、下方向へ動きながら出現。速度( duration )は、slow を指定してある。
簡単に設定できてしかも無料！モーダルウィンドウ用ライブラリとプラグイン12選
speckyboy Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web. 最近ではJavascriptの技術の進化とオープンソースコミュニティーのおかげで、モーダルウィンドウが簡単に設定できるようになりました。本記事では、様々なスタイルの無料モーダルウィンドウ用プラグインを一挙ご紹介します。 １．jQuery Modal：軽量でシンプルなデザイン http://jquerymodal.com/ クリーンでシンプルなものを探しているなら、こちらがおすすめ。 ESCキーなどのショートカットや、タ
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
jQuery・CSSで作るランダム表示アニメーション ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
こんにちは、ウラカワです。 今回はタイトル通りjQuery・CSSを使って、ランダムで表示するアニメーションを作ってみました。 背景に円をランダムで表示 マップにマーカーをランダムで表示 という簡単なものです。
写真が画面の端から端へ流れる無限ループするアニメーション 4種 | TIPS
For web developers. React, Next.js, TypeScript, JavaScript, CSS and Web Development.
inview.jsとAnimate.cssでCSSアニメーション
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
【jQuery & CSS】2016年申年のおみくじ
Posted on 2015年12月17日2018年12月12日 by ofuta / Posted in CSS, jQuery, おみくじ 今年もおみくじを作成しました。 cssアニメーションによるホバーの動き・クリック時の回転、CSVでの文章の読み込み処理など、技術学習のために作成したページです。 閲覧タイミングによっては、出力結果のCSVがまだダミーテキストになっています…。（2016/01/01までにすべてのテキストを公開しました。） リンク：2016年申年のおみくじ 参考と素材 ホバーの動き：Hover.css クリック時の回転：CSS3でアニメーション【vol.4】- クリックでアニメーションを実行させる方法（複数同時実行例含む） おみくじの筒画像：おみくじの入っている筒を描いたイラスト。お正月の初詣のデザインに。 CSVの読み込みについて：jQueryでCSVを読み込んでみ
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
[jQuery] 画像や背景画像をグルグルできる jQuery.Simple3D プラグインを作りました
基本的な動きは以前と同じくカーソルの動きに合わせて画像がグルグル動くというものですが、プラグイン化するにあたって、背景画像を動かしたり、逆方向に動かしたりできるオプションを作りました。 動作確認ブラウザ IE7+、GoogleChrome、Firefox、Opera サンプルデモ サンプル1 画像を動かすサンプルデモ 並べた画像がカーソルに合わせて動きます。デフォルトの動きです。 jQuery.Simples3D.js Sampledemo | Example1 サンプル2 背景画像を動かすサンプルデモ 背景画像に設定した画像がカーソルの動きとは逆方向へ動きます。 jQuery.Simples3D.js Sampledemo | Example2 bgImage:true ダウンロード 以下よりダウンロードできます。 github.com/SaoriMiyazaki/jQuery.Simp
![[jQuery] 画像や背景画像をグルグルできる jQuery.Simple3D プラグインを作りました](https://cdn-ak-scissors.b.st-hatena.com/image/square/4372a15652e4c6925ea4e0797eedcf01107385db/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F04%2Ficon.png)
クリックするとアイコンが変化するiconate.jsを使ってみた - ハイパーニートプログラマーへの道
デモページを見てみると一発でわかるのですが、 iconate.js アイコンをクリックすると別のアイコンに変化します。 使い方 https://github.com/bitshadow/iconate#basic-usage 公式ページより インストール 以下の３つの方法があります。 NPM: npm install iconate Bower: bower install iconate Download zip. Note: iconate.js also supports AMD and commonJS module pattern. 今回はCodepenでやってみましたのでRawGitを使用しました（あんまりよくないかもしれんけど） スタイルシートとjsファイルの設定 <link rel="stylesheet" href="iconate.min.css"> <script t
[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js
オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。 実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。 「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="iconate.min.css"> </head> <body> ... コンテンツ ... <script type="text/javascript" src="iconate.min.js"> </body> Step 2: HTML アイコンを配置します。 デモではFont Awesomeのアイ
![[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e52b762682773fbeb81c27963f72395fbbf5fea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015052611.png)
jQueryとCSS3で手軽に実装できるスクロールエフェクト
2015年10月6日 CSS, JavaScript, jQuery 近頃Webデザインのギャラリーサイトで見かける素敵Webサイトって、どれもアニメーションなどのエフェクトがかっこいいですよね。という事で今回は、中でも簡単に実装できそうな効果をひとつ。スクロールすることで要素が可視範囲に表示されると、CSS3のアニメーションを使ったエフェクトが実行される、というのを実装してみようと思います。なんだか難しそう…と、食わず嫌いでいた人でも、基本さえおさえておけば、あとはアイデア次第で自分好みにカスタマイズできると思いますよ！ ↑私が10年以上利用している会計ソフト！ 基本：スクロールでテキストをぼわ〜んと表示 画面をスクロールすると、下からぼわ〜んとテキストが表示されるエフェクトを実装してみましょう！ HTML まずはエフェクトを与える要素をHTMLに記述。安心してください、まだ何も変わった
【jQuery】スクロール量に連動したアニメーションを追加する［ScrollMe］の使い方
ウェブサイトに「スクロール・エフェクト」を導入したい。 そんな要望を叶えるためのオススメのjQueryプラグイン［ScrollMe］を紹介します。 このプラグインをオススメする最大の理由は、わずか1行のJavaScriptのコードも必要なく機能すること。 基本的にはスクリプトファイルを読み込むだけで、あとはカスタムデータ属性によるマークアップで設定していきます。 ほんとうにJavaScriptのコードは1文字も書きません。 公式サイトにてサンプルと実装方法が紹介されていますね。 ScrollMe : http://scrollme.nckprsn.com 詳しい使い方は以下より。 ［ScrollMe］のダウンロード まずはGitHubからスクリプト本体ファイルをダウンロードします。 https://github.com/nckprsn/scrollme 上記サイトより、右上にある「Down
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
写真が画面の端から端へ流れる無限ループするアニメーション – chocolat
https://blog.mismithportfolio.com/web/20150617lazy-line-painter
Puffing Smoke Effect in jQuery
cow2design.com