スライドバー

その他 レビュー

2020/5/8

鬼滅の刃から学ぶブロガーの個性の活かし方

この記事は約 9 分で読めます。 そんくん「鬼滅の刃」って漫画を知っとる? ぐりおもちろん知ってるよ!   「鬼滅の刃」(きめつのやいば)は週刊少年ジャンプに連載中の少年漫画です。 この鬼滅の刃は子供から大人まで社会現象化するほどの人気漫画です。 鬼滅の刃を読むと、人生に役立つだけではなく、ブロガーなどの自己鍛錬が必要な、フリーランスの精神にも非常に役立ちます。   この記事を読むと、現代に必要な自己鍛錬のマインドを学べますよ。 ぐりお少しネタバレがあるので注意してね!   ...

ReadMore

Canvaの切り抜きで簡単!お仕度ボードをつくろう!

Canva 子育て

2020/2/5

お仕度ボードをつくろう!Canvaの切り抜きで簡単!

この記事は約 10 分で読めます。 ぐりお息子が、朝のしたくに手間取ってイライラが止まらない!! そんくんあるあるやな。まあストレスたまるのは分かるわ ぐりお毎日毎日怒るのも疲れたわ…   そんなあなたのための記事です。 スポンサーリンク 目次 お仕度ボードを作ってみよう!お仕度ボードって何?お仕度ボードで準備するものお仕度ボートの作り方お仕度ボードをつくろう!Canvaの切り抜きで簡単!のまとめ お仕度ボードを作ってみよう!   息子がスムーズに行動するように、マグネットシートにやる ...

ReadMore

デザイン ブログ

2020/1/20

画像を自動切り抜きしてくれるすごいサイト

この記事は約 6 分で読めます。   そんくんキャラクターの背景を透明に切り抜きたい!でもどうやるのかわからへん ぐりおなんとAIが自動的に切り抜きしてくれるサイトがあるよ スポンサーリンク   目次 背景の切り抜きを自動でやるサイト背景切り抜きサイトの使い方背景切り抜きサイトの便利な使い方画像を縮小する前のようにきれいに大きくするサイト背景切り抜きを自動でやってくれるサイトのまとめ 背景の切り抜きを自動でやるサイト 写真や絵の背景を透明に抜きたいと思ったことはありませんか。 でも切り ...

ReadMore

Canva デザイン

2019/12/12

無料Twitterヘッダーテンプレートプレゼント【CANVAで簡単に使える!】

この記事は約 15 分で読めます。     ぐりお今回は、Canvaで使えるTwitterヘッダーテンプレートをプレゼントするよ! そんくんいよっ!日本一!   スポンサーリンク   目次 Twitterヘッダープレゼント!Twitterヘッダーはとても重要!Canvaは簡単に使えるソフトCanvaテンプレートはここがすごい!無料Twitterヘッダーテンプレートをプレゼント!無料Twitterヘッダーテンプレート お申込みフォームテンプレートの使い方 ※必ず以下の ...

ReadMore

その他 レビュー

2020/4/27

骨折で入院するときに必要なもの13選

この記事は約 10 分で読めます。   ぐりお足首を骨折しちゃった…! 入院だ! そんくんうひー大変や!入院に必要なものは何や!?( ゚Д゚)   ぐりお私の体験談から、入院中あって良かったものを紹介します     スポンサーリンク   目次 骨折入院中にあって良かったもの 欲しかったもの退院したらあるとよいもの骨折したときに必要なものまとめ 骨折入院中にあって良かったもの 欲しかったもの   ケガは突然やってきます。 思いもかけずに転んで骨折。 ...

ReadMore

Canva デザイン

2019/12/12

CANVAで意外と知らない基本機能3選!アイキャッチテンプレートでぜひ使ってほしい☆

この記事は約 9 分で読めます。 ぐりおあなたは、CANVA版アイキャッチテンプレート100!はうまく使えてる? 400人が使っている便利なテンプレートブログアイキャッチテンプレート100!第2弾もうすぐ発売!   そんくんためしに使ってみたいあんさんは、無料テンプレート10種を申し込んでや。       Canvaはこちら     使いこなすためには、CANVAの基本操作の知識が必要ですね。 わたしがぜひ使ってほしい機能をあげていきます。 &n ...

ReadMore

Canvaでずっと使える!無料アイキャッチテンプレートプレゼント

Canva デザイン

2019/12/12

Canvaでずっと使える!無料アイキャッチテンプレートプレゼント

この記事は約 17 分で読めます。     ぐりお今回は、Canvaのアイキャッチテンプレートをプレゼントするよ! そんくん待ってました!     スポンサーリンク   目次 アイキャッチテンプレートプレゼント!Canvaは簡単に使えるソフトCanvaテンプレートアイキャッチはここがすごい無料Canvaアイキャッチテンプレートをプレゼント!無料Canvaテンプレートお申込みフォームテンプレートの使い方 ※必ず以下の手順でコピーしてね画像サイズを変えたい場合 ...

ReadMore

デザイン ブログ レビュー

2020/3/25

Affinger5(WING)の主な機能一覧

この記事は約 28 分で読めます。 このブログのテーマ 「Affinger5 (WING)」のパーツを並べました。 主に ...

ReadMore

子どものほめ方叱り方 ~叱りすぎて疲れたあなたへ処方箋~

子育て

2019/1/7

子どものほめ方叱り方 ~叱りすぎて疲れたあなたへ処方箋~

この記事は約 17 分で読めます。 子育てって大変ですよね。 特に叱らないといけない時はストレスがたまります。 感情的に叱ったところで、子どもはいうことを聞かない。 叱りたくて叱ってるわけではないのに、毎日まいにち同じことで怒ってる… もっとうまい叱り方はないものかしら… そんなあなたのための記事です。   スポンサーリンク 目次 これだけはやってはいけない、しかり方こうやって叱らずにやらせよう子どもを叱る時の注意点子どもはこうやってほめよう子どものしかり方ほめ方 まとめ これだけはやってはいけ ...

ReadMore

13_チラシにイラストを入れる効果 ダサいチラシをかっこよく

ダサいチラシをかっこよく デザイン

2019/1/7

14_チラシにイラストを入れる効果 ダサいチラシをかっこよく

この記事は約 7 分で読めます。 ぐりお今回はチラシにイラストを入れていくよ   ※ここでいうイラストとは、地図などの図(インフォグラフィック)とは分けて考えています。   目次 チラシにイラストを入れる効果チラシのイラストの入れ方イラストでユーザーを逃さないように注意!チラシにイラストをいれるまとめ チラシにイラストを入れる効果   前回はチラシに写真を入れる効果についてやりました。 今回はイラストについてやっていきます。 イラストを入れる意味と効果には以下のものがあります ...

ReadMore

ダサいチラシをかっこよく12 デザインの考え方

ダサいチラシをかっこよく

2019/2/14

12_デザインの考え方を知ればあなたもデザインできる ダサいチラシをかっこよく

この記事は約 9 分で読めます。 ぐりお今回は、チラシを仕上げていく時に必要な考えを説明するね。   さて、デザインを作っていく際に、何を考えながらやったらいいのでしょうか? なんとなくかっこいい? とにかくいい感じに? なんだか漠然としてふわふわして、どう考えればよいか分かりませんね。   スポンサーリンク 目次 デザインをするとき何を考えている?連想(妄想)回路を全開にしてアイデアを出す細部にこだわりぬく 神は細部に宿る!煮詰まってきたら休憩客観的にチラシを見るには、他人になりきる ...

ReadMore

AffinityDesignerでのエクスポート(書き出し)方法

AffinityDesigner デザイン

2019/2/14

解説!AffinityDesignerでのエクスポート(書き出し)方法 2種類

この記事は約 6 分で読めます。   AffinityDesignerはとても使いやすい神ツールですが、ちょっと初心者は迷いそうだな~と思うところがあったので記事にします。   そんくんあんたが迷ったんやろ? ぐりお…ま、まあね   スポンサーリンク 目次 AffinityDesigner の画像書き出し方法 2つ描画ペルソナ、ピクセルペルソナでの書き出し手順書き出しペルソナの書き出し手順AffinityDesignerの書き出し方法 まとめ AffinityDesigner ...

ReadMore

差がつくおしゃれな年賀状アイデア2019

ダサいチラシをかっこよく デザイン レビュー

2020/1/2

差がつくおしゃれな年賀状アイデア!テンプレートでは満足できないあなたへ

この記事は約 6 分で読めます。 ぐりお今回は年賀状のアイデアを出してみたよ~ そんくんわい年賀状まいとし悩むねんなあ…   年賀状の季節ですね。 テンプレートを使うのもいいけど、オリジナルデザインで勝負したいあなた。 真似するだけでおしゃれになるおすすめアイデアを厳選しました。 自分で年賀状を作るこだわり派のあなた、ヒントにしてくださいね。   ぐりお今年はダサい年賀状から卒業だっ   写真入り年賀状がネットで簡単注文!自宅にお届け!   スポンサーリンク 目次 ...

ReadMore

ダサいチラシをかっこよく13 チラシに写真を入れよう

ダサいチラシをかっこよく

2019/2/14

13_チラシに写真を配置せよ! レイアウトまで解説。ダサいチラシをかっこよく

この記事は約 8 分で読めます。 今回は、チラシに写真やイラストを入れていきます。   ぐりおところで前回作ったこのチラシ、何か足りないと思わない? そんくん…絵や写真がない? ぐりおそのとおり☆   スポンサーリンク 業界最高品質の年賀状 【年賀家族2019】     目次 チラシに写真を配置するチラシに写真を入れる理由は「臨場感」90%の情報は視覚的なものであるチラシに写真を配置する まとめ チラシに写真を配置する   ぐりおさっそく写真を入れてみよう ...

ReadMore

センスが磨ける!デザイナーがいつも参考にしているサイト厳選5

ダサいチラシをかっこよく デザイン

2019/2/14

デザイナーが参考にするセンスの良いサイト5選

この記事は約 5 分で読めます。 さて、デザインはよく「センス」と言われます。 あなたは、どうやってその「センス」とやらを磨けると思いますか?   それは、良いデザインをたくさんみて目を肥やすことです。 すてきなデザインをたくさん見ると、「すてき」というのがどういうものなのか分かってくるのです。 画家は良い絵をたくさん見ろと言われます。 映画監督は良い映画をたくさん見ろと言われます。 漫画家は、良い映画や絵や小説をたくさん見ろと言われます。 みんな同じことですね。   ということで、今 ...

ReadMore

ダサいチラシをかっこよく11 小見出しのデザイン

ダサいチラシをかっこよく

2019/2/14

11_小見出しで分かるデザインの原則 ダサいチラシをかっこよく

この記事は約 7 分で読めます。   ぐりおさて、タイトルに前回作ったロゴを入れてみたよ そんくんおおー     ぐりおでも、まだ黄色い箇条書きの部分が読みにくいと思わない? そんくんたしかに… ぐりおこの部分(小見出し)をやっていこう   スポンサーリンク   目次 小見出しデザインのコツ小見出しデザインの原則3つ小見出しデザインのアイデア小見出しがなぜ必要なのか?小見出しのデザインまとめ 小見出しデザインのコツ   黄色い部分は箇条書きで横に ...

ReadMore

スクロールで開始 CSSとjqueryで作るマーカー(蛍光ペン)アニメーション

スクロールで開始!CSSとjqueryで作るマーカー(蛍光ペン)アニメーション

この記事は約 7 分で読めます。

ブログで目立たせたい部分にマーカー(蛍光ペン)をぬったように色をつけるのを、よく見かけますね。
みんながやっているから私も…とマーカーを付けているあなた、何か変化をつけたくないですか?

そのマーカーだけをアニメーションさせる方法をお伝えします。
線を引いているようにアニメーションします。


マーカー部分がスクロールして視界に入ったらアニメーションをするやり方です。

あなたのブログに個性が出て、他のブログと差がつけられますよ!
コピペで出来ますので安心してください。

 

ぐりお
これ簡単にできそうと思ったけど、意外と情報が少なくて大変だったのよ…

※追記 はじめは分かってなくてあいまいな文章書いてましたが、2日ぐらい寝たら理解できたので、全面的に書き直しました。
以前のものは忘れてください←

 

スポンサーリンク

WebCamp

 

スクロールして視界に入ったら、マーカー部分をアニメーションさせたい

 

さてこちらのサイトをご覧ください。

スクロールしていくと、黄色いマーカーが引かれていきます。

 

とってもすてきですね!

私も…真似させていただきたいと思い、やってみました。

 

 

HTMLのhead部分に、スクロール位置を取得するコードを貼り付け(jquery)

 

まずは、下のコードをコピーして、HTMLのhead部分にペーストします。

 

 

アフィンガーやスティンガーの方は、「AFFINGER管理」の中の、「上級者向け設定 headに出力するコード 」に貼り付けます。
それ以外のテーマの方は、headに出力する部分か、直接テーマヘッダー (header.php) に貼り付けます。
しっかりバックアップを取り、自己責任でお願いします。

 

上のコードはこちらのサイトを丸パク…参考にさせていただきました!↓

 

これでスクロールして視界に入ると、クラス「active」が与えられるようになりました。

スキルクラウド 無料会員登録

 

CSSにアニメーションを記述する

 

クラス「active」をトリガーとして、CSSにアニメーションを記述します。

下のコードをコピーして、CSSに貼り付けます。

 

 

CSSは、「外観」の「CSS編集」の「追加CSS」にペーストします。

※テーマによって少し場所が違うかもしれません。

 

 

 

HTMLに記述する

 

最後に、マーカーを表示したい部分に

と記述します。

Wordpressの投稿や固定ページのテキスト部分です。
これでマーカーのアニメーションが完成です。

 


[ITCEアカデミー】無料カウンセリング参加

CSSの解説

 

ぐりお
ここは忘備録として書いているので、色を変更したいあなただけ読んでください

 

.marker-animation.active{ background-position: -100% .5em;}

まず一番上のこの記述で、クラス「active」の時のマーカーの表示が書いてあります。

-100%
は、横位置の指定です。

アクティブになったとき、背景(バックグラウンドの位置が-100%)つまり画面外左のマイナス位置に移動するという意味です。

マーカーが表示されていない状態です。

 

.5em
は、縦位置の指定です。

マーカーの上を5インチ分下げて表示するという意味です。

マーカーは文字の下半分に表示していますね。

 

マーカーアニメーションの指定

 

マーカーの色の変更は、ここで指定してください。 rgb(255,250,153) 

ぐりお
色を変更する場合、5か所全部を書き換えてね

 

古いバージョンのブラウザに対応するよう、同じ意味のことを5行分書いています。

linear-gradient とは、線形のグラデーションのことで、左側と右側の色を指定するとグラデーションになります。

ここでは、左から開始する線形グラデーションであり、左端は横半分の位置(50%)で透明、右は半分の位置(50%)で指定の黄色がに表示されることが書いてあります。(と思う。)

 

一番下は、グラデーションがX方向(横方向)だけに繰り返して表示するという指定です。

こうすると、マーカーの位置を変えると、透明と黄色が変化します。

 

 

アニメーションの指定

 

この3行では、アニメーションの指定がしてあります。

1行目、マーカーのサイズが200%(つまり黄色部分が全部表示)縦位置は下8インチ表示。

※100%のサイズにすると、半分透明になってしまいます。

 

2行目はマーカーの表示位置が0(つまり左端)縦位置は下5インチ表示。

マーカーが全部見えている時の位置です。

 

3行目のトランジションは、この2つのマーカー位置のインとアウトを2秒かけて滑らかにアニメーションさせるという指定です。

maker-animation

 

 

そんくん
?????

ぐりお
たぶんこういうことです。この記述でアニメーションします(;'∀')

 

フォントの太さ

 

一番下の

font-weight: bold; で強制的に太字にしています。

ここの設定は好き好きでどうぞ。

 

スポンサーリンク


Kindle Unlimited:読み放題

 

まとめ

 

今回は、思ったよりてこずったマーカーのアニメーションのやり方について見てきました。

少し分かっていない部分もあってあいまいですが、参考にしてみてください。

グラデーションやアニメーションがスクロールで動かせるのって楽しいですね。

他にもいろいろ動きがつけられそうです。

 

 

ところで、あなたはこうしたWEBデザイン、コーディング技術を習得したくありませんか?

WebCampで学んでみてはいかがですか?

オンラインで完結するスクールですから、家にいながら1か月で、WEBデザイン、コーディングの技術を習得できますよ。

副業としても人気のWEBデザイナーです。

まずは無料説明会を受けてみましょう。

 

1か月でWEBデザイナーになりたいあなたは登録↓

 

-デザイン, ブログ
-

Copyright© ぐりおブログ , 2020 All Rights Reserved.