Canva デザイン

2019/10/18

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

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

ReadMore

その他 レビュー

2019/10/24

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

この記事は約 11 分で読めます。   そんくんうひー大変や!入院に必要なものは何や!?( ゚Д゚)  

ReadMore

Canva デザイン

2019/10/5

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

この記事は約 8 分で読めます。 そんくんためしに使ってみたいあんさんは、無料テンプレート10種を申し込んでや。   使いこなすためには、CANVAの基本操作の知識が必要ですね。 わたしがぜひ使ってほしい機能をあげていきます。   スポンサーリンク 業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro オンライン講座   CANVAをスマホで使ってみよう   スマホでCANVAを使ってみましょう! CANVAはスマホでも使えます。 スマホでアイ ...

ReadMore

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

Canva デザイン

2019/10/18

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

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

ReadMore

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

子育て

2019/1/7

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

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

ReadMore

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

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

2019/1/7

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

この記事は約 7 分で読めます。 そんくん架空の人物でもイラストならかんたんやな   イラストでマンガ的に表現できる   写真に人物を入れるのに比べて、マンガ的表現がしやすいです。 写真の場合と比べてみます。

ReadMore

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

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

2019/2/14

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

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

ReadMore

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

AffinityDesigner デザイン

2019/2/14

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

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

ReadMore

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

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

2019/12/8

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

この記事は約 7 分で読めます。 そんくんわい年賀状まいとし悩むねんなあ…   年賀状の季節ですね。 テンプレートを使うのもいいけど、オリジナルデザインで勝負したいあなた。 真似するだけでおしゃれになるおすすめアイデアを厳選しました。 自分で年賀状を作るこだわり派のあなた、ヒントにしてくださいね。  

ReadMore

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

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

2019/2/14

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

この記事は約 9 分で読めます。 今回は、チラシに写真やイラストを入れていきます。   そんくん…絵や写真がない?

ReadMore

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

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

2019/2/14

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

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

ReadMore

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

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

2019/2/14

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

この記事は約 8 分で読めます。   そんくんおおー     そんくんたしかに…

ReadMore

地元民から見た「半分、青い」半年間の感想

その他 レビュー

2019/8/4

地元民から見た「半分、青い」半年間の感想

この記事は約 17 分で読めます。   ぐりおこのドラマを振り返ってみるよ   このドラマの舞台は、岐阜県恵那市岩村町。 現在私の住んでいる街のほど近くです。 しかも主人公は私と同世代の設定で、漫画家を目指す…と聞いて、私は毎回録画してみていました。 主人公の設定が、私ととても近いのです。   思い入れのあるこのドラマを振り返ってみます。 ※盛大にネタバレしていますのでご注意ください。 最新コミックも600円分無料で読める<U-NEXT>   スポンサーリンク &n ...

ReadMore

ダサいチラシをかっこよく10 初心者でも作れるロゴデザイン

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

2019/2/14

10_初心者でも作れるロゴデザイン ダサいチラシをかっこよく

この記事は約 6 分で読めます。   ぐりお初心者でも簡単にできるワザだよ   目次 簡単にロゴっぽくするワザ文字をばらばらに分解して配置リズム感を持って文字を配置ロゴデザインの中級わざロゴデザインの参考になる本初心者でも作れるロゴデザイン まとめ 簡単にロゴっぽくするワザ   完全なロゴをイチからデザインするのは上級者向けです。 しかし 初心者でも既存のフォントを使い、少しの工夫でロゴっぽく見せることができます。 心掛けるポイントは以下の2点。   ・リズム感を持 ...

ReadMore

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

デザイン ブログ

2019/1/20

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

この記事は約 8 分で読めます。 ブログで目立たせたい部分にマーカー(蛍光ペン)をぬったように色をつけるのを、よく見かけますね。 みんながやっているから私も…とマーカーを付けているあなた、何か変化をつけたくないですか? そのマーカーだけをアニメーションさせる方法をお伝えします。 線を引いているようにアニメーションします。 マーカー部分がスクロールして視界に入ったらアニメーションをするやり方です。 あなたのブログに個性が出て、他のブログと差がつけられますよ! コピペで出来ますので安心してください。 &nbs ...

ReadMore

ママ友飲み会で失敗しないコツ

子育て

2018/12/29

ママ友飲み会で失敗しないコツは段取り~幹事さん向け~

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

ReadMore

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

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

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

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

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


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

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

 

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

※追記 はじめは分かってなくてあいまいな文章書いてましたが、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デザイナーになりたいあなたは登録↓

 

リンク広告01

-デザイン, ブログ
-

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