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：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
Cloudflare を辞めたので、別の方法で WordPress ブログのページ表示を高速化【目標未達成】
何回か計測していると、4s台が出るようになったけど、時間帯による誤差だよねこれ。 そろそろめんどくさがらずに、テーマの方に手をいれないと。 Contact From 7 の JS , CSS の読み込み調整 WordPress を使ってる方は、Contact From 7 をインストールしている方も多いのではないかと思いますが、GTMetrix Waterfall を見ていると、Contact From 7 の JS , CSS が全てのページで読み込まれているのを確認しました。（多くの人は「お問い合わせページ」というページを作って、そこにフォームを置いているのではないでしょうか。） functions.php に追記するだけで、読み込みを分岐させることができるようです。 function my_contact_enqueue_scripts(){ wp_deregister_script
Animsition
Overlay Mode InstallationStep 1: Link required files<!-- animsition.css --> <link rel="stylesheet" href="../dist/css/animsition.min.css"> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- animsition.js --> <script src="../dist/js/animsition.min.js"></script> Step 2: HTML markup<body> <div class="animsition"> <a href="./page1" class="anim
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scroll Fixed Navigation
