下スクロール時の背景パララックス実装ガイド: jarallax.jsを活用した方法｜DAD UNION – エンジニア同盟
Webデザインのトレンドとして人気のあるパララックススクロール。この記事では、jarallax.jsを使用してページ背景にパララックス効果を簡単に実装する方法をご紹介します。さらに、背景にYouTube動画を設定する方法も取り上げます。実際に作成したデモページも公開しているので、ぜひチェックしてみてください。 CSSを用意する まずは、パララックスエフェクトを適用するエリアのスタイリングを行います。以下は.jarallaxクラスを持つエリアの基本的なCSSです。このCSSはカスタマイズ可能なので、デザインに合わせて変更してください。 <style> *, :after, :before { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Splide.jsで実現するスマートなスライダー：初心者から上級者まで使える完全ガイド｜DAD UNION – エンジニア同盟
今回はWebデザインの世界で話題のSplide.jsについて、その魅力と使い方をわかりやすく解説します。Splide.jsは、スワイプやタップに対応したスライダーを簡単に実装できる、使い勝手の良いJavaScriptライブラリです。これからご紹介する手順に沿って、あなたのウェブサイトも一層魅力的なものに変身させましょう。 Splide.jsの基本となるCSSの設定 まず最初に、Splide.jsを使うための土台となるCSSの設定から始めましょう。以下のコードをウェブサイトの適切な場所に追加してください。 splide.min.cssファイルの読み込み：このスタイルシートがSplide.jsの見た目を整えます。 カスタムスタイルの追加：ウェブサイトのデザインに合わせて、基本のスタイルを調整します。 <link rel="stylesheet" href="css/splide.min.css
jquery.qrcode.jsで簡単QRコード作成完全ガイド｜DAD UNION – エンジニア同盟
今回は非常に便利なツール、「jquery.qrcode.js」を使って、簡単にQRコードを生成する方法についてご紹介します。 この記事を読めば、あなたもQRコード生成のプロになれるかもしれませんよ！ はじめに QRコードは、今や私たちの生活に欠かせないものとなりました。店舗の情報、ウェブサイトへのリンク、あるいは個人間での情報共有など、多岐にわたる用途で利用されています。そんなQRコードを自分で生成できたら便利ですよね。今回は、Web開発で広く使われるjQueryのプラグイン「jquery.qrcode.js」を使って、誰でも簡単にQRコードを生成できる方法をご紹介します。 jquery.qrcode.jsとは 「jquery.qrcode.js」は、jQueryを使用してQRコードを簡単に生成できるプラグインです。このプラグインを使えば、複雑なコーディング知識がなくても、ウェブページ上で
Lightbox2完全ガイド：画像をポップアップ（モーダル）表示させる簡単ステップ｜DAD UNION – エンジニア同盟
今回は定番中の定番、Lightbox2を使った画像のポップアップ表示について、基本から応用まで幅広く解説していきます。 Lightboxは有名なのでご存じかと思いますが今まで紹介してなかったのでご紹介します。 CSSでの基本設定 まずは、Lightbox2を使うための基本的なCSSを設定します。ここでは、サムネイル画像に適用するスタイルを定義します。ポイントは、見た目の美しさと使いやすさのバランスを取ることです。 lightbox.min.cssファイルを読み込みます。サムネイル（a[data-lightbox] img）のCSS記述です。 <style> body { margin: 20px 10px; padding: 0; font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 22px;
JavaScriptを使った月・週・時間別表示に対応したカレンダープラグインFullCalendar｜DAD UNION – エンジニア同盟
FullCalendarを使ってJavaScriptを使った月・週・時間別表示に対応したカレンダープラグインをご紹介します。Googleカレンダーにも対応してる様ですが今回はGoogleカレンダーを使用せず月別カレンダー表示の方法をご紹介します。 FullCalendarを使った月・週・時間別表示に対応したカレンダーのCSS記述※main.cssファイルを読み込みます。必要に応じて変更して下さい。 <link href='main.css' rel='stylesheet' /> <style> body { margin: 20px 10px; padding: 0; font-size: 14px; text-align: center; } #calendar { max-width: 1100px; margin: 0 auto; } h1{ text-align: center;
モーダル画面をブラウザ全体に表示する方法【fullmod.js】｜DAD UNION – エンジニア同盟
モーダル画面をブラウザフルで表示するCSSの記述 ※fullmod.min.cssファイルを読み込みます。ブラウザフルで表示されるモーダル画面（.fullmod）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" href="fullmod.min.css"> <style type="text/css"> body{ text-align: center; } h1{ text-align: center; font-size: 22px; padding: 20px 0; line-height: 1.4em; } button{ padding: 10px; font-size: 16px; } .fullmod{ color: #ffffff; background-color: #cccccc; } </style> モーダル画面をブラウ
FullscreenBookBlock：ページめくりを導入する方法｜DAD UNION – エンジニア同盟
過去にページめくり系プラグイン 「pageflip.js：本の様にページめくりを導入する方法」 「JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】」 をご紹介しましたが、今回は別パターンのページめくりを導入する方法をご紹介します。 ページめくりを導入するための読み込むCSSファイル ※jquery.jscrollpane.custom.css、bookblock.css、custom.cssファイルを読み込みます。必要に応じて変更して下さい。 <link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.custom.css" /> <link rel="stylesheet" type="text/css" href="css/bookblock.css" /
pagePiling.js入門：マウススクロールでスムーズなページ切り替えを実現する方法｜DAD UNION – エンジニア同盟
pagePiling.jsを使ってマウススクロールでページを切り替える方法を紹介します。 このライブラリを使用すると、フルスクリーンでスクロールバーが表示されず、マウスのトラックボールやキーボードの矢印キーでページを切り替えることができます。 pCSSの記述 まず、必要なCSSファイルjquery.pagepiling.cssフを読み込みます。次に、メニュー切り替えボタンやページセクション（#section1～4）のスタイルを定義します。必要に応じてこれらのスタイルをカスタマイズしてください。 <link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" /> <style> p{ font-size: 2em; } .section{ text-align: center; } /* menu * --------
JavaScriptアニメーションライブラリTweenMaxを使ってタグ要素を移動する方法｜DAD UNION – エンジニア同盟
JavaScriptを使ったアニメーション方法は色々ありますが。今回アニメーションライブラリTweenMaxを使ってタグ要素を移動するをご紹介します。 アニメーション移動するタグ要素のCSS記述 ※アニメーション移動するタグ要素#pos、#to、#frm、#frmtoを用意します。必要に応じて変更して下さい。 <style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; text-align: center; } h1{ font-size:16px; text-align:
ビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン【TwentyTwenty】｜DAD UNION – エンジニア同盟
2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン（TwentyTwenty）をご紹介します。 「基本的な使用法」「垂直方向」「並んで」、3パターンの利用方法を紹介します。 2枚のビフォー・アフター画像をわかりやすく比較するJavaScriptプラグイン（TwentyTwenty）のCSSファイル読込 ※foundation.css、twentytwenty-no-compass.cssファイルを読み込みます。 <link href="css/foundation.css" rel="stylesheet" type="text/css" /> <link href="css/twentytwenty-no-compass.css" rel="stylesheet" type="text/css" /> 2枚のビフォー・アフター画像をわかりやすく比較するJav
slick.jsを使った複数画像スライダープラグイン｜DAD UNION – エンジニア同盟
slick.jsは広く使用されているjQueryベースのスライダープラグインで、ウェブページに洗練されたスライダーやカルーセルを簡単かつ効率的に実装することができます。様々なオプションと機能を提供しているため、開発者は様々な要件に合わせたスライダーを作成することが可能です。 「複数画像スライダープラグイン【Swiper.js】」に続き、slick.jsを使ってレスポンシブやスマホ・タブレットのスワイプに対応した複数画像スライダープラグインをご紹介します。 slick.jsを使った複数画像スライダープラグインのCSS記述 ※slick.css、slick-theme.cssファイルを読み込みます。その他、必要に応じて書き換えてください。 <link rel="stylesheet" type="text/css" href="./slick/slick.css"> <link rel="st
Swiper.jsを使ったレスポンシブ対応の複数画像スライダープラグイン｜DAD UNION – エンジニア同盟
Swiper.jsは、現在最もポピュラーで使いやすいタッチスライダーの1つです。モダンなサイト制作において、スライドショーはユーザーエクスペリエンスを向上させる重要な要素であり、特にレスポンシブデザインとの組み合わせによって、あらゆるデバイスサイズでコンテンツを効果的に表示することができます。Swiper.jsは、その多機能性と高いカスタマイズ可能性から多くの開発者に利用されています。 今回はそのSwiper.jsを使ったレスポンシブやスマホ・タブレットのスワイプに対応したスライダー方法をご紹介します。 Swiper.jsの特徴 レスポンシブデザイン: Swiperはフルレスポンシブで、デバイスサイズを自動的に認識し、表示を最適化します。 タッチ操作に対応: スワイプジェスチャーを使用してコンテンツを操作できるので、タッチデバイスに最適です。 マルチプラットフォーム対応: Swiperはi
reflection.jsで画像に魅力的な半透明の反射影を追加する方法｜DAD UNION – エンジニア同盟
昨今のWeb開発では、ユーザーの注目を集め、サイトに長く留まってもらうために、ビジュアル要素の魅力が非常に重要になっています。そんな中、画像に美しい影を加えることで、サイトの見た目を格段に向上させることができます。 この記事では、JavaScriptのライブラリであるreflection.jsを使用して、画像に半透明の反転した影を表示させる方法を紹介します。 CSSでの準備 まず初めに、画像を美しく表示させるための基本的なCSSを設定しましょう。ここでは、サイト全体のマージンやパディングを0に設定し、見出しや画像を中央揃えにします。特に、clWrapクラスを使って画像を中央に配置する方法を紹介します。 <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; fo
後ろから前へ回転しながら複数コンテンツエリアを表示【jquery.vortex.js】｜DAD UNION – エンジニア同盟
jquery.vortex.jsを使って後ろから前へ回転しながら複数コンテンツエリアを表示する方法をご紹介します。 後ろから前へ回転しながら複数コンテンツエリアを表示するCSSの記述 ※回転表示させるエリア（#vortex）と複数コンテンツエリア（.square-button）のCSS記述です。必要に応じて変更して下さい。 <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; font-size:18px; font-weight:bold; padding:15px 0 10px 0; line-height:1.4em; } .clWrap{ width:800px; margin:0 auto; } #vortex { width: 350px; hei
約10分で出来るjquery.vaccordion.jsを使って複数コンテンツをアコーディオン表示する方法｜DAD UNION – エンジニア同盟
jquery.vaccordion.jsを使って複数のコンテンツエリアをアコーディオン風に表示する方法をご紹介します。 JavaScript、HTML、CSSの知識がある人なら本記事とデモページを参考に約10分位で出来ると思います。 複数コンテンツをアコーディオン表示するCSSの記述 ※style.css、JavaScriptが効かない時用のstyleNoJS.cssファイルを読み込みます。styleNoJS.cssは無くても良いかもしれません。その他は必要に応じて変更して下さい。 <style type="text/css" media="all"> <!-- h1{ text-align:center; font-size:18px; font-weight:bold; padding:10px 0; line-height:1.4em; text-align:center; } h2
spacegallery.jsを使って奥から前へ整列した複数画像を表示させる方法｜DAD UNION – エンジニア同盟
spacegallery.jsを使って、奥から前へ整列した複数画像を表示させる方法をご紹介します。 奥から前へ整列した複数画像（ギャラリー）を表示します。画像をクリックすると整列した画像が前へ移動します。 奥から前へ整列した複数画像を表示させるCSSの記述 ※複数画像（ギャラリー）エリア.spacegalleryのCSS記述です。必要に応じて変更して下さい。 <style type="text/css"> <!-- body{ margin:0; padding:0; } h1{ font-size:16px; font-weight:normal; line-height:2.0em; text-align:center; padding:15px 0; } #idWrap{ width:700px; margin:0 auto; text-align:left; } .spacegal
JavaScriptでWordファイルを生成・ダウンロード！docx.js活用ガイド｜DAD UNION – エンジニア同盟
JavaScriptを活用して、ユーザーの入力テキストをWordファイルとして生成し、そのファイルをダウンロードする技術についてご紹介します。 これは、ウェブアプリケーションでのレポート生成、フォーム入力結果の文書化、あるいは動的に内容が変わる文書をユーザーに提供する際に役立ちます。 今回は、docx.jsというJavaScriptライブラリを用いる方法を中心に解説します。 はじめに 文書作成の自動化や、ウェブページから直接文書を生成する技術は、多くの業界で需要があります。例えば、オンラインでのアンケート結果をWord文書でダウンロードしたい、またはウェブアプリケーションからレポートを生成し、その場で提供したい場合などです。JavaScriptを用いて、これらのニーズに応える方法を一緒に見ていきましょう。 CSSの基本的な設定 まず、Word文書を生成する前に、ウェブページに必要なスタイリ
easySlider.jsを使って簡単に複数画像のスライド表示を導入する方法｜DAD UNION – エンジニア同盟
easySlider1.7.jsを使って簡単に複数画像のスライド表示を導入する方法をご紹介します。 複数画像を「Prev・Next」「1・2・3…」リンククリックでスライドできます。 easySlider1.7.jsを使って簡単に複数画像のスライド表示を導入するJavaScriptの記述 ※jquery.min.js、easySlider1.7.jsファイルを読み込みます。「Prev・Next」リンククリックでスライドするエリア（#slider）、「1・2・3…」リンククリックでスライドするエリア（#slider2）を用意しました。$(スライドするエリア).easySlider({オプション})で設定します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
emergence.jsを使ってページをスクロールすると要素が画面に表示されているか判別しアニメーションを表示する方法｜DAD UNION – エンジニア同盟
タッチ、スワイプ、マウスホイール、レスポンシブに対応したスライダーOwl Carousel 2【jQueryプラグイン】｜DAD UNION – エンジニア同盟
