Vanta.jsで3Dアニメーションを手軽に実装！
2022年1月25日 JavaScript, jsjs 3Dアニメーションが手軽に実装できるVanta.jsというJavaScriptのライブラリがあります。Webサイト上で色や表示方法をカスタマイズして、コピペするだけで完成です。今回はこのJavaScriptライブラリを紹介します！ ↑私が10年以上利用している会計ソフト！ この記事は動画でも紹介しています。動画派の方はこちらをどうぞ！ 鳥をふわふわ動かしてみよう Vanta.jsのサイトに行くと、デモとして鳥がふよふよ飛んでるような背景が表示されています。この画面右側に、カスタマイズするためのパネルが用意されているので、好みのデザインに変えてみましょう。「Birds」の場合は色や鳥の数、鳥のサイズ、スペース、スピードなどが調整できます。 <div id="bird"></div> <script src="three.r119.min
特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]
当サイトのアイキャッチは主にAdobe Expressで作成しています。Adobe Expressならデザインパーツを並べるだけ、最速1分！ カンタン素早く作成できます♪ >>> Adobe Expressでできることをくわしく タブレイアウトで、別のページから特定のタブへリンクしたい時に。 BootstrapやFoundationを導入して入れば実現するのは優しいですね。こういう時はCSSフレームワークはとても助かります。 Bootstrap4で特定のタブに直接リンクするhttps://getbootstrap.com/ BootstrapのTabは .nav-tabs というclassで実現します。tab用javascriptプラグインが必須です。（コンパイル済みのbootstrap.jsでOK） Bootstrapのタブドキュメントは以下のページ https://getbootstr
![特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]](https://cdn-ak-scissors.b.st-hatena.com/image/square/449c5dbd52b27062a353c9106e2708d1a93db4e4/height=288;version=1;width=512/https%3A%2F%2Ftokushiyo.net%2Fwp-content%2Fuploads%2Ftoku-direct-link-tab.png)
ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
JavaScript library to animate elements as they scroll into view. スクロールして表示される要素をアニメーション化するJavaScriptライブラリ 要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。 「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。 公式サイト：https://scrollrevealjs.org/ ScrollRevealの使い方 ライブラリ読み込み 使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。 CDNは公式サイトのインストールから読み込みます。 // 最新バージョンの場合 <script src="https://unpkg.com/scrollreveal
iPhone SE／5s／5にもう悩まない！Viewport Extraで手軽に縮小表示 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 ここ数年、スマートフォンの画面サイズがどんどん大きくなっていますよね。何年か前までは幅320px表示の端末がほとんどでしたが、今の日本では幅375px表示の端末がもっとも使われているようです（2019年2月現在）。幅375px表示が、他国で圧倒的1位の幅360px表示を大きく上回っているのは、日本人のiPhone好きが表れた結果でしょうか。 これに合わせ、LIGでもスマートフォン表示のデザインは幅375px表示に最適化することがほとんど。でも、その場合に問題となるのが、幅320px表示の端末です。見出しの改行が必要になったり、横並びの要素が収まりきらなくなったり、表示くずれが多々発生します。ブレイクポイントを増やして、スマートフォン表示だけで2種類もスタイルを用意するのは、なかなか大変です。かといって、いまでも見捨てるにはまだ早いシェア
Particle Effects for Buttons | Codrops
A little library that can be used for bursting particles effects. The idea is to disintegrate an element into particles and make it disappear (or vice versa). Today we’d like to share a little effect library with you that can be used to create bursting particle effects. The idea is to desintegrate an element into particles and making it disappear (and vice versa). This effect looks really interest
WordPress にナイトモード機能を入れる | q-Az
ナイトモード、夜間モードが iPhone や Twitter の公式クライアントに搭載されて、夜は暗めの画面で見るという事が増えてきたように感じます。半分お遊びですが WordPress にもナイトモードを搭載して夜でも安心して読めるブログを目指してみようというお話です。 使用中のテーマによって色々な状況が考えられるので、誰でも簡単に夜間モードを搭載できるという訳ではありません。またブログのメインとなる色を変えてしまうので、良いか悪いかよくわかりません。一つのアイデアとして考えてください。 JavaScript if((new Date()).getHours() >= 20 || (new Date()).getHours() < 6 ) { document.body.className += " night-mode"; } JavaScript を直接テーマに入れる場合は上のコード
paroller.js
paroller.js paroller.js is a lightweight jQuery plugin that enables parallax scrolling effect on selected elements. You can use it on elements with background property or on any other element. While scrolling elements can move: vertical, horizontal. Manipulated through html data-* attributes or jQuery options. Mobile ready. Easy to use. GitHub Download | Previous versions Before closing </body> el
jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法｜BLACKFLAG
5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたが、ブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。 【横スライドパターン】 jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法 「横スライドパターン：jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法」サンプルを別枠で表示 まずは横方向にスライドするパターンの実装についてです。 Webページに横に並べられた要素が右から左へ流れ続けます。 動作自体はただひたすら要素が流れ続けるシンプルなものです。 スライド全体にマウスオーバーした際には、スライド動作を一時的に止め、マウスアウトするとスライドが再開します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Canvasで、レーダーチャートに使える正多角形を動的に描画してみた