パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js
ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。 実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax.jsの特徴 simpleParallax.jsのデモ simpleParallax.jsの使い方 simpleParallax.jsの特徴 simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。
Pythonバックエンドエンジニアが1ヶ月でフロントエンドを学んだ話
この記事について Pythonバックエンドエンジニアが1ヶ月でフロントエンドを学んだ話を共有する。 どういう勉強をしたかのラーニングパスを某所で話したら興味があるというコメントがあったので、自分の振り返りも兼ねて共有することにした。 TL;DR 学習期間は1ヶ月、30時間程度 TypeScript → Next.js → MDNでHTML+CSS → TailwindCSS の順に勉強した JavaScript、React.jsはほぼすっ飛ばした(というより上記ラーニングパスの中で派生して習得した) できるようになったこと: 簡単な処理であればテストつきでTypeScriptのコードが書けるようになり、UIの基本的な設計ができるようになった DISCLAIMER 筆者の経験を記したものであり、ベストプラクティスではありません。 筆者の開発スキルセット（勉強前時点） バックエンドが得意領域
Next.js+microCMS+Vercel面白い - ゆーすけべー日記
Next.js と microCMS と Vercel が面白い。それぞれ面白いし、組み合わせるとさらに面白い。なにせ、メディアサイトがデプロイも含めて 2 時間で出来る。 Next.js + microCMS + Vercel すごいな。メディアサイト（中身スッカスカだけど）がものの 2 時間でデプロイまでできた。 https://twitter.com/yusukebe/status/1435708770705760256 ということで、メディアサイトを作りながら、Next.js と microCMS と Vercel の面白さをまとめる。 2 時間で作るメディアサイト 例として「ラーメンまとめ！」というメディアサイトを作ってみる。このサイトには ラーメン屋 ラーメン屋のまとめ記事 の 2 つの種類のコンテンツがある。「ラーメン屋」が「名前」「場所」「ラーメン写真」というプロパティを持
「Angular」「React」「Vue」の3大フレームワークに集約 ICSの代表が教える「フロントエンド技術」のトレンド
「キャッチアップしておきたいウェブ制作の最前線」というテーマで、Vue.jsなどJavaScriptを駆使したユーザーインターフェイスの開発を主に担当してきた池田泰延氏が、Webのフロント周りの近年の技術的な動向を解説します。前半はフロントエンド技術のトレンドについて。 スピーカー自己紹介、『JavaScript コードレシピ集』を出版 池田泰延 氏（以下、池田）：みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こ
ブログやWebサイトに年表を貼り付ける”Timeline JS”がすごい！ - roombaの日記
（↑：イメージ画像） 歴史の資料集にある年表や、企業パンフレットの「○○グループの歩み」のような年表をブログ等に貼り付けられたら便利だと思いませんか？ 例えば、 好きな作家や画家の作品を年代順に並べる（「モネの作品集」など） ある国際問題に関するここ数年の状況をまとめる（「イスラム国の概要」など） 話題になったニュースの流れを時系列で紹介する（「STAP細胞問題の推移」など） などなど様々な利用例が考えられます。 そんな年表を簡単に作れないかな、と探していたところ”Timeline JS”という便利なものを見つけました。 Timeline JSとは？ だれでもオシャレでインタラクティブな年表をつくれるオープンソースのツールです。 このページの一番下に実際にTimeline JSでつくったサンプルを貼り付けています。 文字だけでなく画像や動画・地図・Wikipediaを載せることができ、年表
jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」
jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ
簡単にサムネイルやバナーをスライドにするCarouFredSelの使い方！
バナーをたくさん貼りたいけど、あまりベタベタたくさん貼りたくない場合によく使う手なのですが、バナーをスライド風にして、自動でローテーションさせたりします。そんな時にこのjQueryカルーセルプラグイン「CarouFredSel」が便利です。オプションでいろいろな動き方を設定できますので、これ一つでいろいろな場面で使えますよ！ 【更新履歴】 2013年02月22日 WordPressへの使い方追加 2013年09月05日 トップイメージによく使うオプションcrossfadeを追加 jQueryプラグインのダウンロード Circular, Responsive jQuery Carousel – CarouFredSel （機械日本語訳はこちら） 上記サイトよりプラグインをダウンロードして下さい。 「jquery.carouFredSel-*.*.*.js」もしくは「jquery.carouF
JavaScript プログラミング講座
以下の主要ブラウザで動作確認しています。少しでも古いブラウザだと動作しない可能性が考えられますが、特に言及しません。常に最新のブラウザを使用する事を必須とします。
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
[JS]超軽量だけど、高性能なモーダルウインドウを実装するスクリプト -TinyBox2
jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量（5KB）のスクリプトを紹介します。 JavaScript Modal Windows – TinyBox2 デモページ [ad#ad-2] TinyBox2のデモ デモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。 ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応しています。 デモページ：No Animation, No Close Button, Auto Width/Height, Custom Styling アニメーション：無し、クローズボタン：無し、幅と高さ：自動、カスタムスタイリング
簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」｜BLACKFLAG
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
JavaScriptの落とし穴
4. JSのオブジェクトは 連想配列みたいなもの 1 // 空のオブジェクトを作成 2 var dog = {}; 3 4 // プロパティをひとつ追加 5 dog.name = "Pochi"; 6 7 // ブラケットでもアクセスできる 8 dog['breed'] = "Shih Tzu"; 9 10 // 関数をひとつ追加 -> メソッド 11 dog.getBreed = function () { 12 return this.breed; 13 } 5. JSのオブジェクトは 連想配列みたいなもの 1 // 同じものをオブジェクトリテラルで表記 2 var dog = { 3 name: "Pochi", 4 breed: "Shih Tzu", 5 getBreed: function () { 6 return this.breed; 7 } 8 }; 6. クラスっぽい
2/2 アコーディオンメニュー/ドロップダウンメニュー - おかゆ学習帳
jQueryアコーディオンメニュー（jquery-1.6.min.js使用） HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>アコーディオンメニュー</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen,print" /> <script type="text/javascript" src="jquery-1.6.min.js"></s
たった1.3KBのJavascriptで機能するアコーディオン式スライダー
ウェブサイトの技術っておもしろいよね RDF Site Summary RSS 2.0 このブログは、ウェブサイトで使われる様々な技術や表現についてトモヒロが実際に作成したり 考えたりした事を綴るブログです。 仕事や趣味等についても綴っていきたいと思っています。 おすすめ 最近の記事 カテゴリ ウェブ技術の実践 【Javascript】 フォームの見栄えを良くする 軽量アコーディオンスライダー 【Javascript】[Ajax] 自動入力補完 データ処理中に画像を表示 【Javascript】[Ajax] [prototype] [jQuery] 郵便番号から住所の自動補完 【Javascript】[prototype] テーブルで列の並べ替え 【Javascript】[jQuery] アニメーションするテキストリンク 注目させたい部分を強調 【PHP】 キーワードクラウド 【CSS】
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
