particles.js is a lightweight JavaScript library for creating particles.
particles.js - A lightweight JavaScript library for creating particles
particles.js is a lightweight JavaScript library for creating particles.
【jQuery】ウィンドウをスクロールすると下からふわっとコンテンツがフェードインする実装 | Recooord | Web制作で扱うコーディングスニペットを紹介
HOMEJavaScript【jQuery】ウィンドウをスクロールすると下からふわっとコンテンツがフェードインする実装 【jQuery】ウィンドウをスクロールすると下からふわっとコンテンツがフェードインする実装 JavaScript ※文章・コード見直しの為、2020年10月30日に更新しました。 フェードインアニメーションのサンプルは以下を参照してください 上記のフェードインアニメーションのサンプルを下にスクロールしてみてください。下からふわっと要素が表示されていると思います。 今回はこのような実装ができるように紹介していきます。 HTMLの記述 <ul> <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li> <li class="animation"><img src="https://uns
パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
jQuery：マウスオーバーした画像をメインの画像に反映 | raining
jQueryでサムネイル画像にマウスを置いた場合、メイン画像と差し替えて表示したい場合があります。 ショップシステムなどの商品画像の表示で見かけることが多いです。 また、写真などのギャラリーページなどでも同じような表示の仕方をしていることがあります。 jQueryを使用すれば簡単にサムネイル画像とメイン画像を入れ替えることが可能です。 下記にjQueryの「hover」を利用してサムネイル画像をマウスオーバーした際に、メイン画像と差し替えて表示する方法を記述します。 ■ マウスオーバーした画像をメインの画像に反映 【HTML】 メイン画像とサムネイル画像を表示します。 「mainImage」の箇所に最初に表示する画像を設定します。 <div id="mainImage"> <img src="sample1.jpg" /> </div> <div id="imageList"> <ul>
JavaScriptによる画像切り替え
JavaScriptを使って画像を切り替えるボタンを設置する方法です。この方法だとページ自体を更新しないので比較的軽くなると思います。 <SCRIPT type="text/javascript"> <!-- function showimg1(){ document.area1.src = "画像1のURL"; } function showimg2(){ document.area1.src = "画像2のURL"; } function showimg3(){ document.area1.src = "画像3のURL"; } --> </SCRIPT> <img src="最初に表示する画像のURL" name="area1"> <input type="button" onclick="showimg1()" value="画像1"> <input type="button" o
「クリップボードにコピー」を実装する - Qiita
<html> <head> <meta charset="UTF-8" /> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script> <script> $(function () { var clipboard = new Clipboard('.btn'); }); </script> </head> <body> <!-- コピー対象 --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" size="60"> <!-- コピーボタン --> <bu
ituore.com - ituore リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
【JavaScript】ウェブサイトに「印刷する」ボタンを設置する方法。
ブラウザでのウェブサイト観覧時も含め、通常、印刷する際は［⌘ + P］（Command + P）でプリントアウトすることができますが、これと同じ挙動を JavaScript で実装することができます。 記述するコードは非常に簡単で、基本的に必要なのは以下の１行のみ。 window.print(); windowオブジェクトのprintメソッドを呼ぶだけ。これで印刷ダイアログを表示させることができます。 具体的に「このページを印刷」ボタンを作るには、HTMLを以下のように書けばＯＫです。 ボタンで設定する場合 <form> <input type="button" value="このページを印刷する" onclick="window.print();" /> </form> リンクで設定する場合 <a href="javascript:void(0)" onclick="window.pri
tableの行と列を固定してスクロール！！Super Tables | バシャログ。
6月に入り、欧州サッカーの移籍情報が気になってしょうがないishidaです。 WEB制作に携わっていると、表組みだらけのWEBサイトの担当に 長い人生に一度や二度はなる（?）と思います。 tableによる表組みは、行や列が増えすぎるとコンテンツからはみ出したりして 見栄えが悪くなりますよね。 そんな迷える子羊たちを助けてくれるjavascriptライブラリ Super Tables を今回ご紹介いたします。 まずは以下のサンプルをご覧くださいませ。 Super Tables サンプルデモ サンプルのような感じで、ヘッダー部分を固定したり、列を固定できます。 Super Tables 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <link rel="stylesheet" href="superTables.css" typ
テーブル(表)の表示／非表示
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 テーブル(表)表示／非表示を切り替える オンマウスでテーブル(表)を表示します。 display='block' display='none' 価格表 サンプルソース <html> <head> <title>テーブル表示／非表示</title> </head> <body> <a href="#" onmouseover="document.getElementById('tbl').style.display='block'" onmouseout="document.getElementById('tbl').style.display='none'">価格表</A> <table id="tbl" style="display:non
Never Ever - javascript でテーブルの行の表示・非表示について
javascript でテーブルの行の表示・非表示ではまったので、ここにメモときます。 参考：http://tenmon.g.hatena.ne.jp/aql/20080910/1221048984 (thanks) 1行目 開閉 ／ 2行目 開閉 TEST 1 TEST 2 TEST 3 TEST 4 1行目 あああ いいい ううう 2行目 セル結合 3行目 かかか ききき くくく function open_close_row1(elm) { var row = document.getElementById(elm); if (row.style.display == 'none') { row.style.display = 'block'; } else { row.style.display = 'none'; } } display = 'block' FireFox
Tips1-1 | リンクをクリックすると表示・折りたたみをする | rifan
文章が多いコンテンツの場合、だらだらと長く書いていると見ている人はめんどくさくなって、読んでくれないかもしれません。 サンプルのように、文章などを折りたたんで隠しておくと、すっきりします。 point1 ページをロードする時に動くスクリプトです。ロード時には、「ele[i].style.display」には何も入っていないので、初期化する必要があります。こうすることで、ページ全体から「div」タグの「oritatami」クラスを非表示にします。 point2 リンクをクリックした時に動くスクリプトです。こうすることで、リンクをクリックした親ノードから「div」タグの「oritatami」クラスのスタイルを変更します。 point3 「getElementsByTagName」を使用してクラス名と合致するノードを返却します。 point4 ＣＳＳで、「oritatami」ク
[JavaScript] JKL.Calender
Kawa.netxp [JavaScript] JKL.Calendar／ポップアップするカレンダー表示クラス JKL.Calendar は、ポップアップでカレンダー表示を行うクラスです。 2006年10月にクラス名を変更しましたが、2005年4月のリリース当初のクラス名 JKL.Calender も 別名定義してあるので、こちらも利用可能です。半年前にご指摘いただいた typo でした。 合わせて、選択可能な日付範囲指定用のプロパティ min_date／max_date を追加しました。 Yahoo! UI ライブラリのカレンダー機能がかなり強力なので、 最近なら YUI もオススメできそうですが、 実は JKL.Calendar の方が日本語環境では使いやすかったりするかもしれません。 JavaScript ソースのダウンロードはこちら： jkl-calendar.js JavaScr
YUIのJavaScriptカレンダーを日本語化＆ポップアップ対応＆祝日も表示 - Yahho Calendar [ゼロと無限の間に]
コメントと更新履歴の参照はゼロと無限の間のログ » Yahho Calendarでどうぞ。 Webのformで日付を入力する際に日付の選択をしやすくするためのポップアップカレンダー（Datepikcer）を表示するJavaScriptライブラリです。別Windowで開くのではなく、form上に表示します。（サンプルを見てもらうと分かりやすいと思います。） カレンダーはYUI 2 (Yahoo! UI Library version 2)のカレンダーを日本語を含む多国語化してポップアップ対応にしたものです。 また、これと合わせてGCalendar Holidaysを使うとカレンダー上に祝日の表示もできてます。 Yahoo!の日本版ということでヤッホーという名前にしました。（昔、Yahho!てサイトありましたね。）
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
JavaScript(mootools)で映りこみを表現する（Reflection.js for mootools） - webデザイナーのナナメガキ
Home > JavaScript > JavaScript(mootools)で映りこみを表現する（Reflection.js for mootools） Newer Older web2.0おなじみの映りこみをJavaScriptで表現できるライブラリはReflection.jsが有名でかつ軽いですが、mootoolsでもできるみたいです。「Reflection.js for mootools」というプラグインでmootools.jsと一緒に使います。 Reflection.js for mootoolsはデモがよく出来ているので以下にほぼそのまま載っけます。透明度や高さ、背景色も変えられるので機能が一発でわかるようになってます。デモって大事ですね。 使い方は簡単で「reflection.js」と「mootools.js」を読み込んで、映りこみさせたい画像に「class=”reflec
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Wicked CSS3 Animations
サービス終了のお知らせ