SVGで手書き風アニメーションを実装する方法 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちはアートディレクターの奥田です。 最近はハンドドリップコーヒーにはまっています。 手軽にペーパードリップですが思っていたより手間もかからず抽出している時間がいいリラックスタイムにもなってオススメです。 コスパでいくと業務スーパーの「ラグジュアリッチコーヒー」がいいのですが味はハマヤのコーヒーが個人的には好きです。 もっと他のコーヒーも試してみたいですね。 さて、ウェブサイトにより強烈な印象を与えるにはアニメーションが欠かせませんが、よくあるSVGアニメーションではつまらなく感じることはありませんか？ 今回は少し個性的な印象を与えることができる手書き風アニメーションの実装方法をご紹介いたします。 Table of contents今回実装したいもの用意するものマスク用のレイヤーをつくるSVGでマスクを作るvivus.jsでアニメーションさせるさいごに今回実装したいものまずは今回の完成
レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
Will Style Inc.｜神戸にあるウェブ制作会社
クライアントとの一方通行のコミュニケーションでよいWEBサービスをご提供することはできません。サイトの構成、システムの仕様、サイト内の動線や写真画像、使用するフォント、キャッチコピーなど、全てにおいてお互いの意見交換や対話を繰り返すことでよいサイトは創りだされると信じています。 ウェブサイト制作 Web site production スマートフォンをはじめ全てのデバイスにワンソースでの対応をご提案。お客様でも簡単に情報を発信、更新できるブログシステムを実装したサイトや、ECサイトの構築など、制作するだけでなく、公開後の更新サポートや運用に関するご相談もお任せ下さい。 システム開発 System development 業務系アプリケーション・業務効率の為の社内オリジナルシステムの構築や、販売・顧客管理等のシステム。医療やホテル、美容業界にてご利用いただける予約システムなどの構築。全てお客
フォームのセレクトボックスとチェックボックス・ラジオボタンをCSSで装飾する | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは制作の奥田です。 お問い合わせフォームで、テキストフィールドやテキストエリアを装飾するのはとても簡単なんですが、セレクトボックスやチェックボックス・ラジオボタンの装飾はクロスブラウザの問題などでちょっとややこしいイメージをお持ちの方も多いと思います。 しかし、IE8以前のサポート終了によりIE9以降の対応でよくなったのを期に、フォームをデザインすることが容易になってきました。 せっかく良いデザインにしてもフォームの要素がデフォルトのままだとなんか残念な気持ちになりますよね？ というわけで今回はCSSのみでフォームを装飾する方法をご紹介いたします。 セレクトボックスの装飾まず、select要素の挙動を統一するため、要素をappearance: button;でボタン要素にしてしまいます。 select::-ms-expandでIEの矢印を非表示にします。 select:-moz-f
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
