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
JavaScript で陥りやすい失敗例を振り返る - Qiita
個人的に今まで JavaScript を書いてて陥った失敗例などを振り返ってみました。 この記事にあるいくつかの失敗例については恐らく殆どの方が経験してるのではないかなと思います。 これから JavaScript 勉強するぞ！！という方や、現在進行形でこのような失敗に陥っている方の助けになれば幸いです。 コードの解説に関しては簡潔に行なっているので、気になった方はググってください。 DOM の取得及び操作 要素を取得して is-close なスタイルを付与したい。 しかし、エラーになってスタイルを付与できない // 失敗例 const hoge = document.getElementsByClassName('hoge'); hoge.classList.add('is-close'); // 正しい例 const hoge = document.getElementsByClassN
JavaScript初心者でもすぐわかる！DOMとは何か？
DOMとはJavaScriptでhtmlの要素を操作するための仕組みのことだ。 JavaScriptを扱っていく上で、絶対に知らないといけない仕組みのひとつだろう。 このページではDOMの仕組みと使い方について初心者の方でもわかるように解説した。 DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組みだ。 例えばブラウザに表示される文字の色を変更したり、大きくしたりと、Webページの見た目をプログラムで処理をしたい場合があるだろう、しかし何もしていない状態のHTMLファイルではJavaScriptから手を出す事が出来ない。そこでファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOMである。 DOMは以下のよう
ブラウザリロード時にスクロールをページトップにもってくる方法 – helog
縦幅の長い、縦スクロールが発生するようなサイトを閲覧しているときにブラウザをリロードすると、画面はページのトップではなく、リロード前の位置で再読み込みされます。 未確認ですが、ここ1年の間での最新のブラウザに機能として追加されたようです。 とりあえず、現時点での最新のブラウザ、IE9、GoogleChrome18、Firefox11で、この動作を確認することができます。 スクロールした後にリロードした場合にも「読んでいたところを再表示する」という親切な機能かもしれませんが、逆に困ることもあります。 例えば最近ではパララックス効果など、意図的に縦長サイトをFlashのようなリッチコンテンツ風に構築されたサイトがあります。オープニングなどの演出で、初期表示は必ずトップを見てほしいという場合です。 JavaScriptでリロード時にトップにくるようにする リロード時にページトップにくるようにする
コンテンツがスクロール可能な場合にヒントを表示する ScrollHint の設定とカスタマイズ方法 | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
レスポンシブデザインの普及により、デバイスの画面サイズに合わせてコンテンツを動的に調整することが一般的になりました。しかし、このアプローチは、特に ＜table＞要素などの広いコンテンツを含むページで課題を生じさせることがあります。 スマートフォンのような狭い画面では、重要な表データを見やすく表示させることが難しく、収まらない部分をスクロールさせることで解決できないかと考え、その際にスクロールできる事を気づいてもらうために、私たちが開発したのがユーザーに視覚的なヒントを提供するJavaScriptライブラリ「ScrollHint」を作りました。 2018年にリリースし、今では多くのサイトで「スクロールできます」を見かけるようになりました。ありがとうございます。また Google や X で ScrollHint を検索してみると、ブログの記事 や 感想の POST を見つけることができ、大
スマホの操作も快適な優れもの！ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider
スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。 他スクリプトへの依存は一切なく、単体で動作し、jQueryのプラグインとして実装することも可能です。 Beer Slider Responsive & Accessible Before-After Slider Beer Slider -GitHub Beer Sliderの特徴 Beer Sliderのデモ Beer Sliderの使い方 Beer Sliderの特徴 Beer Sliderは2枚の画像を使用して、ビフォーとアフターを表示できるスライダーです。 単体で動作するシンプルなスクリプト vanilla JavaScriptで記述されたスライダー。他スクリプトへの依存はありません。 jQuery, Zeptoに
jQueryを使わないスワイプ対応のjavascriptスライダーSwiper の使い方 - Qiita
jQueryを使っていないのでフリクションしにくいのも利点。入れ子でスライダーが組めるところが便利です。 【使い方（Usage）】 GitHubから最新バージョンのSwiperをダウンロードする。 Swiper 下記をHTMLに記載 <head> .... <link rel="stylesheet" href="cssまでのパス/idangerous.swiper.css"> <script defer src="JAVASCRIPTまでのパス/idangerous.swiper-2.x.min.js"></script> .... </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <!--First Slide--> <div class="swiper-slide"> <!-- ここに
【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介 | HPcode（えいちぴーこーど）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="dist/css/swiper.css"> <title>Title</title> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://haniwaman.com/cms/wp-content/uploads/2018/05/swiper01.png" alt="Swiper01"><
レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
【最新バージョン7.3対応】jQuery無しで動く神スライダー［Swiper］が便利すぎて。
今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・
便利すぎ！jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう | WordPressテーマ／DigiPress
汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」 あたりでしょうか。 しかし、これらの名だたるライブラリよりも、総合的に機能が豊富でカスタマイズ性にも富み、しかもjQueryに依存しないJavaScriptスライダーライブラリとして人気を集めているのが、「Swiper.js」です。 試してみたところ、モバイルデバイスとレスポンシブ表示にも対応しているだけでなく、パラメータが豊富で非常に凝ったスライドショーでもあまりに簡単に実装できる優れものだったので、いくつかのサンプルと共にご紹介します。 Swiper.js の基本的な使い方 Swiper.js を使用するには、headセクション内にCSSと、</body>の前にメインのJavaScriptファイルを読み込んでおきます。 ライブラリ自体をダウンロー
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
![[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper](https://cdn-ak-scissors.b.st-hatena.com/image/square/cacff14f89d3ccb1fc0c8101d8047f5b3b8b070e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030201.png)
swiper.js使ってみたからそのオプションについて | なんかいろいろデザインする人
これは旧バージョンのswiperのオプションについて書いた記事です。最新版（6系）のオプションについてはこちらにあります ちょっと機会があって、swiper.js使ったからその時のメモ。 本当は単語ごとにスムーススクロールとか設置した方がいいんだろうけど、めんどく（ ブラウザの検索機能を使ってくだしあ。 ちょくちょく間違ってる可能性があるから、間違ってる箇所があったら教えていただければ気まぐれで修正します。 あと、例が欲しいところがあれば気まぐれで追記します。 これは旧バージョンのswiperのオプションについて書いた記事です。最新版（6系）のオプションについてはこちらにあります swiper.jsってなんぞ？ swiper.jsのダウンロードサイト 簡単に言うと、スライダー系のJS。オプションが多く、個人的にはbxsliderとslickとflexと合わせて神スライダー四天王として認識し
JavaScriptのイベントをたくさん見られるサイト
JavaScriptでよく使うイベントの概要をざっくりまとめ、それぞれのイベントオブジェクトをコンソールで確認できるサイトです。
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript入門
Loading...
Swiper - Most Modern Mobile Touch Slider