はてなブックマーク  


トップへ戻る
  






総合  




●人気
●新着
  

● IT

● 最新ガジェット  

● 自然科学  

● 経済・金融  

● おもしろ  

● マンガ  

● ゲーム  

● はてなブログ︵総合︶  






一般  




●人気
●新着
  

● 社会ニュース  

● 地域  

● 国際  

● 天気  

● グルメ  

● 映画・音楽  

● スポーツ  

● はてな匿名ダイアリー  






世の中  




●人気
●新着
  

● 新型コロナウイルス  

● 働き方  

● 生き方  

● 地域  

● 医療・ヘルス  

● 教育  

● はてな匿名ダイアリー  






政治と経済  




●人気
●新着
  

● 政治  

● 経済・金融  

● 企業  

● 仕事・就職  

● マーケット  

● 国際  

● はてなブログ︵政治と経済︶  






暮らし  




●人気
●新着
  

● カルチャー・ライフスタイル  

● ファッション  

● 運動・エクササイズ  

● 結婚・子育て  

● 住まい  

● グルメ  

● お金  

● はてなブログ︵暮らし︶  

● 掃除・整理整頓  

● 雑貨  

● 買ってよかったもの  

● 旅行  

● アウトドア  

● 趣味  






学び  




●人気
●新着
  

● 人文科学  

● 社会科学  

● 自然科学  

● 語学  

● ビジネス・経営学  

● デザイン  

● 法律  

● 本・書評  

● 将棋・囲碁  

● はてなブログ︵学び︶  






テクノロジー  




●人気
●新着
  

● IT

● セキュリティ技術  

● はてなブログ︵テクノロジー︶  

● AI・機械学習  

● プログラミング  

● エンジニア  






おもしろ  




●人気
●新着
  

● まとめ  

● ネタ  

● おもしろ  

● これはすごい  

● かわいい  

● 雑学  

● 癒やし  






エンタメ  




●人気
●新着
  

● スポーツ  

● 映画  

● 音楽  

● アイドル  

● 芸能  

● お笑い  

● サッカー  

● 話題の動画  






アニメとゲーム  




●人気
●新着
  

● マンガ  

● Webマンガ  

● ゲーム  

● 任天堂  

● PlayStation  

● アニメ  

● バーチャルYouTuber  

● オタクカルチャー  





● おすすめ  
買ってよかったもの
  


﹃phpspot開発日誌 - PHP/Ajax/JavaScript/CSS等の最新技術情報をお届け﹄



● 人気  
● 新着  
● すべて  











CSSのみで実装された５００種類のローディングアニメーション﹁CSS Loaders﹂:phpspot開発日誌  

13users  
phpspot.org  


CSS Loaders: A collection of more than 500 loading animations CSSのみで実装された５００種類のローディングアニメーション﹁CSS Loaders﹂ 3Dやフラットなものなど、実にたくさんのローディングアニメーションがあってみるだけでも楽しい。



● テクノロジー  
●2023/09/20 11:13
  

●
●
●
●
●
●
●
  
















SVGのローディングアイコン﹁svg-spinners﹂:phpspot開発日誌  

3users  
phpspot.org  


GitHub - n3r4zzurr0/svg-spinners: A collection of 24 x 24 dp SVG spinners! SVGのローディングアイコン﹁svg-spinners﹂ フリーで使えるSVG形式のローディングアイコン。汎用から個性的なものまで。



● テクノロジー  
●2022/07/21 16:35
  

●
●











手書き風ピクトグラムアイコン４００種﹁Doodle Icons﹂:phpspot開発日誌  

3users  
phpspot.org  


PHP/HTML5/CSS3/JavaScript/CSS等の最新技術情報をお届け



● テクノロジー  
●2022/03/23 10:11
  












JSを一切使わないCSSでできたドロップダウンなどのUI実装﹁CSSUI﹂:phpspot開発日誌  

45users  
phpspot.org  


CSSUI - Pure CSS interactive components JSを一切使わないCSSでできたドロップダウンなどのUI実装﹁CSSUI﹂ そこまでJSを使わない必要があるのか、と逆に思ってしまいますが、リッチなUIがCSSのみで作れてしまいます



● テクノロジー  
●2022/02/23 16:13
  

●
●
●
●
●
●
●
  










文字がカッコよく動き回るページデモ﹁Repetitive Typography Animation﹂:phpspot開発日誌

3users  
phpspot.org  


Repetitive Typography Animation - Codrops 文字がカッコよく動き回るページデモ﹁Repetitive Typography Animation﹂ 文字を動かすだけでもこれだけカッコよくできるということで色々応用してみても面白そうです



● テクノロジー  
●2021/10/27 18:18
  

●
  










テキストを省略してブロックを小さくできる﹁Cuttr.js﹂:phpspot開発日誌  

3users  
phpspot.org  


Examples & Demos | Cuttr.js - truncate multi-line text テキストを省略してブロックを小さくできる﹁Cuttr.js﹂ 文字単位、単語単位といった区切りで文書を短くすることができ、Readmoreで全部表示ということが可能です 英語のライブラリなので日本語対応するにはカスタマイズが必要だと思いますが、文字単位ならそのまま使えますね



● テクノロジー  
●2020/11/25 13:33
  

●
●
●
  










ページのセクションを分割した感じにできるスクロールエフェクト:phpspot開発日誌  

3users  
phpspot.org  


Revealing Hero Effect in CSS and JavaScript | CodyHouse ページのセクションを分割した感じにできるスクロールエフェクト1ページなのですが、複数のページで構成されている風にアニメーションできて今風のページが作れるデモです 関連エントリ 超カッコいいスクロールエフェクト実装﹁lax.js﹂ スクロール量をページトップのプログレスバーで表示できる﹁scrollpup.js﹂ WebGLを使ったスクロールでパーティクルがアニメーションするサンプル



● テクノロジー  
●2020/04/25 22:06
  

●
●
  










JSでcimcityっぽく街をモデルする﹁isocity﹂:phpspot開発日誌  

4users  
phpspot.org  


GitHub - victorqribeiro/isocity: A isometric city builder in JavaScript JSでcimcityっぽく街をモデルする﹁isocity﹂ 次のような街をブラウザ上でモデリングできるデモです 関連エントリ タイトルをアニメーションさせてタブを目立たせる﹁blinkTitle.js﹂ WEBページでダークモードに対応するためのJS﹁darkmodejs﹂ ホバー時にボーダーをアニメーションさせる﹁Nicebord.js﹂



● テクノロジー  
●2020/03/11 14:30
  

●
  










React用アニメーションライブラリ﹁Framer Motion﹂:phpspot開発日誌  

6users  
phpspot.org  


Framer Motion React用アニメーションライブラリ﹁Framer Motion﹂ 様々なアニメーションを比較的容易に実装できそうです 関連エントリ タイプライターアニメーション﹁type-this﹂ 美しい背景アニメーション集﹁Ambient Canvas Backgrounds﹂ なめらかでFlashみたいなテキストアニメーション﹁TextyleFLIP.js﹂



● テクノロジー  
●2019/12/25 12:03
  

●
●
  










selectボックスのbootstrap化﹁bootstrapSelect﹂:phpspot開発日誌  

3users  
phpspot.org  


PHP/HTML5/CSS3/JavaScript/CSS等の最新技術情報をお届け



● テクノロジー  
●2019/12/11 10:25
  

●
  










すぐ隠れてくれるヘッダー実装﹁shyheader﹂:phpspot開発日誌  

6users  
phpspot.org  


GitHub - alejandromur/shyheader: A simple, light-weight and easy-to-use jQuery Plugin that shows/hides the header of the page when users scroll the page down more than its height. However, the header remains watching the page so when users scroll the page up its being showed. すぐ隠れてくれるヘッダー実装﹁shyheader﹂。 ページ表示時に表示されてスクロールで消えて上スクロールでうっすら現れるというヘッダーが実装できます 関連エントリ 超カッコいいスクロールエフェクト実装﹁lax.js﹂ スクロール量をページトッ



● テクノロジー  
●2019/11/05 11:06
  

●
●
●
●











画像を円形でくり抜くためのUIを実装する﹁Cropme﹂:phpspot開発日誌  

4users  
phpspot.org  


Cropme | a javascript image cropper 画像を円形でくり抜くためのUIを実装する﹁Cropme﹂ プロフィール画像で最近では当たり前のようになった円形画像ですが画像をアップしてどの位置で使うかというUIはよくあります。 それを実現するためのJSです。 関連エントリ ホバー時にボーダーをアニメーションさせる﹁Nicebord.js﹂JSでサイト内にスプレッドシートを組み込める﹁x-spreadsheet﹂



● テクノロジー  
●2019/10/31 10:05
  

●
  










JSで楽譜を描画して再生までできる﹁abcjs﹂:phpspot開発日誌  

34users  
phpspot.org  


abcjs JSで楽譜を描画して再生までできる﹁abcjs﹂ あまり音楽の知識はありませんが、なんかすごい感じがします 関連エントリ 超カッコいいスクロールエフェクト実装﹁lax.js﹂ リッチでカッコいいカラーピッカー﹁iro.js﹂ ホバー時にボーダーをアニメーションさせる﹁Nicebord.js﹂



● エンタメ  
●2019/10/22 09:09
  

●
●
●
●
●
●
●
●
  










ページ内の画像をスムーススクロールするデモ:phpspot開発日誌  

4users  
phpspot.org  


Emailのドメイン部分のみオートコンプリートしてくれるjQuery﹁email-autoco... 次の記事 ≫‥JSで楽譜を描画して再生までできる﹁abcjs﹂



● テクノロジー  
●2019/10/17 11:29
  

●











WEBページでダークモードに対応するためのJS﹁darkmodejs﹂:phpspot開発日誌  

3users  
phpspot.org  


GitHub - Assortment/darkmodejs: Utility package for managing Dark Mode on the web WEBページでダークモードに対応するためのJS﹁darkmodejs﹂ 最近話題のダークモードに対応するためのJS。WEBページもダークモード対応。やることがどんどん増えます︵笑︶ 関連エントリ 超カッコいいスクロールエフェクト実装﹁lax.js﹂JSでサイト内にスプレッドシートを組み込める﹁x-spreadsheet﹂ リッチでカッコいいカラーピッカー﹁iro.js﹂



● テクノロジー  
●2019/10/10 11:00
  

●
●
●
  










PureJSでPDFの生成ができるライブラリ﹁pdfmake﹂:phpspot開発日誌  

3users  
phpspot.org  


GitHub - bpampuch/pdfmake: Client/server side PDF printing in pure JavaScript PureJSでPDFの生成ができるライブラリ﹁pdfmake﹂JSの変数でPDFドキュメントの内容を設定してPDF出力できる模様 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ﹁NVD3.js﹂ データのビジュアリゼーションに使えるJSライブラリ﹁d3.js﹂



● テクノロジー  
●2019/10/08 12:37
  

●
●
●
●
  










タイプライターアニメーションを実装する﹁autotyperjs﹂:phpspot開発日誌  

3users  
phpspot.org  


GitHub - hsynlms/autotyperjs: A vanilla javascript plugin for animated typewriting タイプライターアニメーションを実装する﹁autotyperjs﹂ 文字を1個1個打ってるようにアニメーションするアレが実装できます 関連エントリ リアルなタイプライターアニメーション実装﹁T-Writer Demo﹂ 美しい背景アニメーション集﹁Ambient Canvas Backgrounds﹂



● テクノロジー  
●2019/10/03 10:07
  












GIFアニメーションをマウスホバーやクリックによって再生停止できる﹁freezeframe.js﹂:phpspot開発日誌  

4users  
phpspot.org  


GitHub - ctrl-freaks/freezeframe.js: freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions. GIFアニメーションをマウスホバーやクリックによって再生停止できる﹁freezeframe.js﹂ 再生コントロールが難しいGIFを制御できるのは便利ですね 関連エントリ リアルなタイプライターアニメーション実装﹁T-Writer Demo﹂ 美しい背景アニメーション集﹁Ambient Canvas Backgrounds﹂



● テクノロジー  
●2019/10/01 09:51
  

●
  










軽量のイメージギャラリー﹁Spotlight.js﹂:phpspot開発日誌  

6users  
phpspot.org  


Spotlight.js Demo 軽量のイメージギャラリー﹁Spotlight.js﹂ 画像を拡大したりスライドショーしたりという豊富な機能がありつつ軽量なギャラリーがつくれます 関連エントリ おしゃれなギャラリー風ページを作るデモ シンプルなグリッドベースのギャラリー実装jQuery﹁sampGallery﹂



● テクノロジー  
●2019/09/24 09:35
  

●
●
●











なめらかでFlashみたいなテキストアニメーション﹁TextyleFLIP.js﹂:phpspot開発日誌  

3users  
phpspot.org  


TextyleFLIP.js - Flip Text Effect - v2.0 なめらかでFlashみたいなテキストアニメーション﹁TextyleFLIP.js﹂ もうFlashは死をむかえるわけですが、一昔前はFlashでしか出来なさそうだったことが普通にWEBで出来るようになっています。 後数年もすればFlashってなんですかっていう世代が多くなってきそうで、WEBの歴史を感じますね。 関連エントリ テキストをアニメーション付きでハイライトできる﹁LuminJS﹂ 画面切替時のおしゃれなテキストアニメーションエフェクト﹁Text Trail Effect﹂ テキストに歪みのアニメーションエフェクト実装﹁Text Distortion Effects using Blotter.js﹂



● テクノロジー  
●2019/09/12 11:17
  

●
  










Three.jsを使ったグリッドからぐにゃっとフルスクリーンにアニメーションするデモ:phpspot開発日誌  

6users  
phpspot.org  


Creating Grid-to-Fullscreen Animations with Three.js | Codrops Three.jsを使ったグリッドからぐにゃっとフルスクリーンにアニメーションするデモ 画像拡大の方法が新しい。どんどん進化しますね 関連エントリ シャレオツなページめくり効果のデモ﹁Page Flip Layout﹂ ホバーでかっこよくイメージをプレビューする﹁Image Reveal Hover Effects﹂



● テクノロジー  
●2019/09/10 12:57
  

●
  










スクロール量をページトップのプログレスバーで表示できる﹁scrollpup.js﹂:phpspot開発日誌  

6users  
phpspot.org  


scrollpup.js スクロール量をページトップのプログレスバーで表示できる﹁scrollpup.js﹂ シンプルにどこまで読んだかの進捗をページトップに出せるスクリプト。スマホページなどではスクロールバーも基本は隠れているのでわかりやすいかも 関連エントリ 超カッコいいスクロールエフェクト実装﹁lax.js﹂ モダンなカスタムスクロールバーを簡単実装﹁SimpleBar﹂ WebGLを使ったスクロールでパーティクルがアニメーションするサンプル スクロールでおしゃれに動くバーのデザイン﹁parallaxColorBars﹂



● テクノロジー  
●2019/09/03 09:06
  

●
●
  










ホバー時にボーダーをアニメーションさせる﹁Nicebord.js﹂:phpspot開発日誌  

3users  
phpspot.org  


Nicebord.js ホバー時にボーダーをアニメーションさせる﹁Nicebord.js﹂ ホバー時にボーダーを様々にアニメーションさせられるJSライブラリです。 関連エントリ 美しい背景アニメーション集﹁Ambient Canvas Backgrounds﹂



● テクノロジー  
●2019/08/27 14:16
  

●
  










入力フォームをスライダー形式にグラフィカルにできる﹁jquery.formslider﹂:phpspot開発日誌  

4users  
phpspot.org  


jquery.formslider | logical slide show 入力フォームをスライダー形式にグラフィカルにできる﹁jquery.formslider﹂ 図入りで選択肢を提供し、より使いやすく選びやすいフォームの実装に使えます。ラジオボタン等で選択するのが味気なくなるぐらい分かりやすい 関連エントリ フォームを条件分岐で出し分けられる﹁Formalist﹂



● テクノロジー  
●2019/07/30 10:42
  

●
  










斜めがかったおしゃれなスライドショー実装﹁Crossroads Slideshow﹂:phpspot開発日誌  

9users  
phpspot.org  


Crossroads Slideshow | Codrops 斜めがかったおしゃれなスライドショー実装﹁Crossroads Slideshow﹂ 文字と写真が交差するおしゃれなスライドショー実装デモです 関連エントリ スライドショーにSVGでモーションブラーをかけてかっこ良くするデモ 超カッコいいApple風スライドショーギャラリー作成チュートリアル



● テクノロジー  
●2019/07/25 10:04
  

●
●
●
  










ドラッグ＆ドロップでサイトを作れるようにするJS﹁VvvebJs﹂:phpspot開発日誌  

7users  
phpspot.org  


GitHub - givanz/VvvebJs: Drag and drop website builder javascript library. ドラッグ＆ドロップでサイトを作れるようにするJS﹁VvvebJs﹂ jQuery+Bootstrap4で出来ていて、レスポンシブなサイトをみたまんま、作れて便利そうです。 Bootstrapの基本コンポーネントも全部そろっており、HTMLコーディングの手間を省けます 関連エントリJSで3Dレンダリングエンジン﹁LemonJS﹂ マガジン形式のグリッドレイアウトを実現する﹁stratum.js﹂



● テクノロジー  
●2019/07/23 18:50
  

●
●
●
●
●
  










CSS3でケン・バーンズエフェクトを使ったスライドショー実装﹁subtle-slideshow.js﹂:phpspot開発日誌  

3users  
phpspot.org  


GitHub - stijnvc/subtle-slideshow.js: jQuery slideshow plugin with subtle Ken Burns effect. CSS3でケン・バーンズエフェクトを使ったスライドショー実装﹁subtle-slideshow.js﹂ おしゃれな写真と組み合わせるとおしゃれなページが簡単に作れます 関連エントリ 3Dでアニメーションするスライドショーを作れる﹁jquery-rsSlideIt﹂ ホラー映画風スライドショー実装﹁Glitch Effect Slideshow﹂



● テクノロジー  
●2019/07/16 13:02
  

●
  










ユーザのマウスの動きを記録し再生できる﹁viewRecorder﹂:phpspot開発日誌  

3users  
phpspot.org  


GitHub - rockman84/viewRecorder: Jquery Plugin for record activity user ユーザのマウスの動きを記録し再生できる﹁viewRecorder﹂ ユーザのマウスの動きを分析する1つの方法として使えるかもしれませんね 関連エントリ カスタマイズ性の高いレーティング用jQueryプラグイン﹁Rateit.js﹂



● テクノロジー  
●2019/07/01 14:06
  

●
●
  










動画のフルスクリーン背景実装jQuery﹁vidbacking﹂:phpspot開発日誌  

4users  
phpspot.org  


GitHub - souravm84/vidbacking: vidbacking is a jQuery plugin to create HTML5 / Youtube video as background on webpage with fallback image support. It supports mp4 and webm files as well as Youtube video. 動画のフルスクリーン背景実装jQuery﹁vidbacking﹂ Youtubeやmp4,webmにも対応している。Youtubeが使えない場合にも活用可能 関連エントリ HTMLをCanvasを使って画像に変換するjQueryサンプル



● テクノロジー  
●2019/06/20 09:55
  

●
●
●
  







次のページ  

























このページはまだ
ブックマークされていません


このページを最初にブックマークしてみませんか？
  

﹃phpspot開発日誌 - PHP/Ajax/JavaScript/CSS等の最新技術情報をお届け﹄の新着エントリーを見る  

 

キーボードショートカット一覧


j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
  
 


はてなブックマーク




●総合
●一般
●世の中
●政治と経済
●暮らし
●学び
  

●テクノロジー
●エンタメ
●アニメとゲーム
●おもしろ
  

●アプリ・拡張機能
●開発ブログ
●ヘルプ
●お問い合わせ
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
  

●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
  


公式Twitter




●公式アカウント
●ホットエントリー
  


はてなのサービス



●はてなブログ
●はてなブログPro
●人力検索はてな
●はてなブログ タグ
●はてなニュース
●ソレドコ
  





App Storeからダウンロード
Google Playで手に入れよう


Copyright © 2005-2024 Hatena. All Rights Reserved.
  




設定を変更しましたx