Barba.js v2でサイトを簡単に非同期遷移させる | Will Style Inc.｜神戸にあるウェブ制作会社
<!-- unpkg --> <script src="https://unpkg.com/@barba/core"></script> <!-- jsdelivr --> <script src="https://cdn.jsdelivr.net/npm/@barba/core"></script><script> barba.init({ // ... }) </script>また、モダンブラウザであれば動作するようですが、以下のスクリプトをサポートしていないブラウザはPolyfillが必要です。 PromiseSet() and Map()Array.prototype.findIntersectionObserver(@barba/prefetchで使用)polyfill.ioであれば下記を読み込んでください。 <script src="https://polyfill.io/v3
【Adobe XD】 プロトタイプでパララックスアニメーションを作成 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、Designerの松並です。 早いもので2021年もひと月終わってしまいました。 昔から言われる言葉遊びで、「1月は往ぬ（行く）」「2月は逃げる」「3月は去る」というものがあります。 由来は「1月はお正月があり、2月は元々28日（29日）で普通より短く、3月は年度末なのでやることが多い」ということだそうです。 時間は戻って来ないので、しっかりと計画を立てて、1日1日を逃さないようにしたいものですね。 今回はAdobe XD でのパララックスアニメーションの作成手順をご紹介させていただきたいと思います。 それでは参りましょう。 Table of contentsAdobe XD でのパララックス完成イメージデザインを作るアニメーションを作る最後にAdobe XD でのパララックスの表現Adobe XD でのパララックスは、プロトタイプのアニメーションを用いて表現します。 とても手
Pjax（非同期画面遷移）でシームレスな画面遷移ができるBarba.js | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、Designer / EngineerからArt Directorに変わりました奥田です。 肩書きはあまり気にしていないのですが、Art Directorというと指示するだけでデザインしていないみたいなのと、後でTechnical Directorも付け加えるべきだなと思ったのは内緒です。 さて、最近ではページの読み込みにローディングをはさんでいるサイトがよくみられます。 そんな時、非同期でページ遷移すれば必要な箇所だけを読み込み、少ないロード時間でページをシームレスに変更することが出来ます。 そこで今回はPjax（非同期画面遷移）を導入できるBarba.jsをご紹介したいと思います。 Barba.js サイトの中になぜPjaxを使うのか、そのメリットが掲載されていたのでご紹介します。 ページ間の素敵なトランジションを作成して、ユーザーのエクスペリエンスを向上させる可能性があり
レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
PhotoShopでRetinaディスプレイに対応した画像を書き出す方法 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、制作担当の奥田です。 今まではPhotoShopで画像を書き出す際、スライスを使って「WEB用に保存」というコマンドで書き出していました。 しかし、もうその必要は無くなりそうです。 PhotoShop CC 2015で新たに追加された書き出し形式の指定を使って書き出しがとても容易になりました。 今回はその方法についてご説明いたします。 Table of contentsRetinaディスプレイに対応した画像とはどのように記述するのかPhotoShopでの書き出し方Retinaディスプレイに対応した画像とはRetinaに対応していないと折角のきれいなデザインも汚く表示されてしまいます。 以下の画像は左がRetina対応、右がRetina非対応の画像をRetinaディスプレイで見た例です。 右は文字が少し荒く表示されています。 どのように記述するのかHTMLではどのように指定すれば
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
