明石市のホームページ制作 Webデザイン | ハンドクラップ
兵庫県の明石を中心に「地域に根ざしたホームページ制作事務所」として活動しています 主な営業エリアは明石市、加古川市、神戸市、姫路市などです。お客様のビジネスが成功するための最良のパートナーでありたいと考えています。 ホームページ制作においては、お客様と密接にコミュニケーションを取りながら、ご要望を深く理解し、それを反映した質の高いサイトを作り上げることを心掛けています。 また、ホームページ制作は完成・公開だけで終わるものではありません。 公開後も、修正・更新・管理・トラブル対応など、様々な運用が必要となります。 Webの世界ですが、お客様との物理的な距離が大事なシーンも多々あります。 ハンドクラップは365日24時間・必要な時にベストな対応を心掛けております。 これらの運用も含めて常にお客様のニーズに対応し、信頼関係を構築する『地域密着』のサービスをご提供します。Webはコンピューター技術
滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（後編） - ICS MEDIA
ウェブサイトをスクロールした時に少し余韻が残りながらスクロールが継続する挙動は慣性スクロールと呼ばれ、演出と組み合わせることで世界観や没入感を表現できる手法です。 前回の記事では慣性スクロールの特徴や注意点の紹介、JavaScriptライブラリ「Lenis」を使った簡単な実装方法を紹介しました。 後編である今回の記事ではLenisの応用的な使い方を紹介します。この記事のデモは以下のリンクから参照できるので、ぜひ読みながらデモを触ってみてください。 サンプルを別ウインドウで開く ソースコードを確認する アンカーリンク アンカーリンクはページ内の特定の位置まで移動する機能です。Lenisを使うとアンカーリンクを押した際にスルスルっと目的の位置までスクロールする演出を簡単に実装できます。 // 設定を行ったLenisのインスタンスを作成 const lenis = setupLenis(); /
「JavaScriptになったら急にわからなくなった」人への処方箋 〜 フロントエンドエンジニアを目指している方へ｜ドットインストール
ドットインストール代表の taguchi です。 「HTML / CSSを勉強していて、JavaScriptに入ったら急にわからなくなった」 ユーザーの方からそういった声をよく聞きます。そうですよね...。HTML / CSS / JavaScriptはセットで紹介されることが多いので、同じような流れで進むかと思いきや...、そうでもありません。印象としては以下のような感じでしょうか。 HTML → それほど難しくない。 CSS → ひとつひとつは難しくないが、組み合わせになってくると難しい。 JavaScript → ...え？ゼロから書ける気がまったくしない。 ただ、フロントエンドエンジニアを目指す人にとってJavaScriptはもはや必須の技術となっており、そのあたりを目指される方にはなんとか「JavaScriptの壁」を突破してもらいたいところです。 そこで以前に「JavaScri
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 ・黄色本をご購入の方： 7-2「検索の表紙」ページ数 ・ピンク本（実践編）をご購入の方： 9-4「SVGアニメーションの表紙」ページ数 （例）30ページの場合は 030 と入力 ※ご覧になりたいページ数を入力するのではなく、指定のページ数をご入力下さい。 ※画像と同じページの、左下のページ数をご記入下さい。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載し
Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA
JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
ズームインしながらフェードで切り替わるスライダーをjQueryとプラグインなしで実装してみた | WEMO
よくある画像スライダーですが、先日、ズームインしながらフェードで切り変わるという少し特殊なスライダーを実装する必要があったのでその時の備忘録として。 スライダー系のプラグインは様々ありますが、プラグインを使用して実現する方法がパッと浮かばなかったので、1から自分でスクリプトを組みました。 と言いっても、スクリプトの処理自体はタイミングを合わせてクラスを付け外しするだけのシンプルもので、アニメーション部分はCSSに任せてあります。 また、jQueryは使わずに実装してみました。 動作デモ まずは完成したスライダーの実物を載せておきます。 See the Pen ズームインしながらフェードで切り替わるスライダー by ddryo (@ddryo-the-encoder) on CodePen. スクリプトとそれに対応するHTML・CSS まず、HTML側はスライダーの親要素に slide_wr
スクロール中はHoverエフェクトを切ろう | Tech Blog
Webサイトを閲覧している時にスクロールがガタついたり、スクロール中にページの下の方が真っ白になっているサイトを見たことはありませんか？もしかしたら、それはホバーエフェクトによるものかもしれません。 問題点スクロール中でもホバーエフェクトは有効なので、スクロールによってホバーが連続的に有効になるとブラウザに大きな負荷を与えてしまいます。 この動画ではホバーがブラウザに与える負荷について詳しく説明しています。（英語です。） 解決方法スクロール開始時にbodyにpointer-eventsプロパティーを設定する事によって、スクロール中のホバーを無効にすることができます。 コードは次のとおりです。 var body = document.body, timer; window.addEventListener('scroll', function() { clearTimeout(timer);
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ GitHub wavifyは jQuery のプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVG コードを用意すれば OK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/
particles.js – A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
[JS]使い勝手がいい、文字を一つずつタイプライターのようにアニメーションで表示する軽量スクリプト -iTyped.js
[JS]使い勝手がいい、文字を一つずつタイプライターのようにアニメーションで表示する軽量スクリプト -iTyped.js
![[JS]使い勝手がいい、文字を一つずつタイプライターのようにアニメーションで表示する軽量スクリプト -iTyped.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/e8e01d1a88a2abbcaa174d9a6093d85db13fd862/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017012501.png)
コード不要で手描き風のSVGアニメーションを自動作成できるエディタ「Vivus Instant」の使い方大公開！ -
どうも、まさとらん（@0310lan）です！ 今回は、誰でも超簡単にSVG画像をアニメーション化できる無料のWebサービスをご紹介します！ このサービスは、JavaScriptでSVG画像を制御できる「vivus.js」をベースにしており、誰でもプログラミング不要で簡単に「手描き風」のアニメーションを作れるのが特徴です。 【 Vivus Instant 】 そして本記事の後半では「vivus.js」を使った基本的なプログラミングについても解説しているので、ご興味ある方はぜひ参考にしてみてください！ ■「Vivus Instant」とは？ それでは、実際に「Vivus Instant」を使いながら、どのようなサービスなのかを見ていきましょう！ まずは、サンプルとして次のようなSVG画像を用意しました。 SVGは、ベクター形式で描かれたXML構造を持つデータですが、このままでは当然ながら静止画
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
- YouTube
- YouTube
- YouTube
- YouTube
- YouTube
- YouTube
- YouTube
コピペで簡単！CSSとJavaScriptで作られた動くオシャレで綺麗なローディング画面アニメーション10選！【ロード画面/画像を使わない】