サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
freyjasrm.com
2022.1.16 更新 皆さまごきげんよう! さて、本日はスマートフォンでのパララックス(視差)的な動きを、cssを使って演出してみようと思います。 前回、パララックスを簡単に実装できるskrollrというjsライブラリを使って、シングルページを作ってみたのですが、PCでは思い通りのパララックスが表現出来るものの、skrollrはスマホに対応していなかったため、スマホで見ることが出来ませんでした。 ●以前の記事、skrollrでパララックスのランディングページを作ってみよう〜追記あり〜 そこで、今回はskrollrを使わずにスマホでパララックスを実装してみようと思います。 前回記事の続編となりますので、ざっと目を通しておいていただきますとより解りやすいと思います。 また、元になるhtmlとcssファイルは、前回の「skrollrでパララックスのランディングページ」で使ったものをskrol
2022.1.16 更新 皆さまこんにちは。 本日はskrollr再び!skrollrを使ってペラいちのランディングページを作ってみます。 まずはこちらにDEMOを作ってみましたのでご覧ください。 (※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m ) skrollrってなに? パララックス(視差)効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます。まずはダウンロードしてみよう。 skrollrをダウンロード skrollrの基本的な使い方は前回の記事をどうぞ。 ⚫︎パララックスが簡単に実装出来る!skrollrの使い方 ⚫︎skrollrを使ってシングルページのパララックスサイトを作ってみました スクロールで画像にパースペクティブ感を出す 今回は大きく分けてセクシ
先ほどペーストしたsvgファイルのidを任意の名前に変更します。ここではid名をsvgLogoとしました。 id名を付けたら、headタグの中にCSSで線の太さや塗りの色などを指定していきます。 下記がソースの一部となります。 今回は塗りにグラデーション指定をして、さらにアニメーションさせています。 塗りのグラデーション指定は、イラレでコピーしたsvgタグとgタグの間に新たにdefsタグを作り、塗りのグラデーション設定を書き足しました。 それにidを付け、cssでfill:url(“#MyGradient”);として塗りの色指定をしています。 ●defsタグについてはこちらに詳しいです。 ●グラデーションの設定についてはこちらも参考にさせて頂きました。 ●りんごの勉強会でもやりました。 <!doctype html> <html lang="ja"> <head> <meta charse
2022.2.6 更新 皆さま、ごきげんよう。 本日はワードプレスに簡単にカスタム投稿ページを作成できるプラグイン、Custom Post Type UIの使い方です。 目次 カスタム投稿タイプとは?プラグイン Custom Post Type UI をインストール〜設定新しい投稿タイプのための固定ページを作る新しい投稿タイプの中にタクソノミー(分類)を作る新しい投稿タイプにメニューに表示させる 1.カスタム投稿タイプとは? ワードプレスには二つの投稿タイプがあります。ブログなどの投稿タイプと、固定ページの静的なタイプです。 投稿タイプとは記事が増えていくタイプで、固定ページとはプロフィールページや、コンタクトフォームなどのような変化の無いタイプです。 例えば文章以外にも、写真をよく投稿するとします。 通常の、投稿→新規追加で投稿しますと、文章だけのブログの投稿と写真のみの投稿が混在して表
2022.1.16 更新 skrollrでパララックスしよう 本日は 、簡単にパララックス(視差効果)を実装できるjQueryプラグイン、skrollrを使ってパララックスのシングルページサイトを作ってみましたので、取り入れ方をご説明します。 前回の記事をお読みになるとスムーズに理解できますので、どうぞご覧ください。 パララックスが簡単に実装できる! skrollr の使い方 skrollr.jsをhtmlファイルに読み込ませる こちらが今回作成した、 パララックスでポートフォリオサイト になります。まずはご覧ください。(なるべくPCでご覧下さいませ) あるフォトグラファーのポートフォリオサイト、という設定です。パララックスは、画面いっぱいに画像を配置して見せるサイトには最適だと思います。 サイトを作るために用意するもの skrollrのJqueryプラグイン lightboxのJquer
2022.1.16 更新 皆さまこんにちは。 本日はパララックス(視差効果)が簡単に実装出来るskrollrというライブラリをを使ってみましたので、ご紹介しようと思います。 デモを作ってみましたので、こちらをご覧下さい。 skrollr.jsをダウンロードし、htmlファイルに読み込む まずGitHubからskrollr.jsをダウンロードします。 html側にはskrollr.min.jsファイルとjqueryを読み込ませます。 下のコードをhtmlのどこかにペースト、以上です。簡単ですね! <script src="js/skrollr.min.js"></script> <script> var s = skrollr.init(); </script> デモではほぼ全てのdivにdata属性をつけて動かしています。 ポイントは、 data-○○=”ここに普通にcssを書く”色はrg
このページを最初にブックマークしてみませんか?
『香のすけ design blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く