- 2020.08.17
CSSで作成するLINE 風の吹き出し
このサイトで会話しているこのLINEのトークみたいな吹き出しってどうやって作ってるの？ よく有料のワードプレステーマについている機能だよね。これはCSSで実現できるよ。早速やってみよう CSSで作成するLINE 風の吹き出し 画像やイラスト同士が会話しているLINE 風の吹き出しを作成します。 まず、cssのソースは以下の通りです。 [crayon-67d46ff25128f839215014/] […]
2020年8月
- 2020.08.12
cssとJqueryで動かすマーカーアニメーション
サイトスクロールすると小見出しの部分がシューっとマーカーが引かれたりするエフェクトあるよね？ワードプレスではプラグインでそんな機能のものもあるけど、あまりプラグイン増やすとサイトが重くなったりするし・・・・なんとかならないかな・・・？ スクロールマーカーアニメーションだね。cssとJqueryの組み合わせでプラグインを使わずとも比較的簡単に実装できるよ。 今回はcssとJqueryによるスクロール […]
- 2020.08.11
cssとJSで動作するフローティングバナー（スティッキーバナー）
スマホサイトなんかでよく見るけど途中から出現してずっとついてくるバナーってあるよね。あれってどうやって設置するの？ フローティングバナーだねスティッキーバナーともいうけど、cssとJSの組み合わせでできるよ。 今回はふわっと出現してそのままスクロールに追従するフローティングバナーの設置になります。 cssで画像バナーを追従する仕組みをつくり、JSで設置場所に近づいたらふわっと出現させる仕掛けを作成 […]
- 2020.08.07
Swiper.js カルセルスライダー作成
トップページに横いっぱいに広るスライダーのあるサイトって格好いいよね。 カルセルスライダーの事だね。Swiper.js を使用すれば簡単に設置できるよ。 Swiper.js によるカルセルスライダーの作成方法になります。 ※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。 ▼ HTML [crayon-67d46ff2520e4616512920/] ▼ JS […]
- 2020.08.06
cssだけで表現する動きのあるボタン
サイトの問い合わせボタンでよく動くやつ見かけるけど、JSのことは良くわからないから実装は難しいかな・・・・ JSの知識はなくともCSSだけで動きのあるボタンを作れるよ。いろんな動きが再現できるから今回はそれを徹底紹介！！ cssのみで実装する動きのあるボタン8選 振動する ぷにぷにする 上下に揺れる 回転して揺れる 左右に揺れる もっちり動く へこむ 鼓動する まずボタンの基本のサンプルデザイン […]