学んだこと

テキストの動き

テキストの動き

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください!

テキストの動き

「テキストの動き」は見出しやキャッチフレーズといった「伝えたい言葉」を印象付けるために使用すると効果的です。

バラバラに出現

See the Pen
バラバラに出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

流れるように出現(左から右)

See the Pen
流れるように出現(左から右)
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

流れるように出現(右から左)

See the Pen
流れるように出現(右から左)
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

流れるように出現(上から下)

See the Pen
流れるように出現(上から下)
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

流れるように出現(下から上)

See the Pen
流れるように出現(下から上)
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

アルファベットがランダムに変化して出現

See the Pen
アルファベットがランダムに変化して出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

回転

See the Pen
回転
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

ランダムに出現

See the Pen
ランダムに出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

じわっと出現

See the Pen
じわっと出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

タイピング風に出現

See the Pen
タイピング風に出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

1文字ずつ出現

See the Pen
1文字ずつ出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

背景色が伸びて出現(左から右)

See the Pen
背景色が伸びて出現(左から右)
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

背景色が伸びて出現(右から左)

See the Pen
背景色が伸びて出現(右から左)
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

背景色が伸びて出現(上から下)

See the Pen
背景色が伸びて出現(上から下)
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

背景色が伸びて出現(下から上)

See the Pen
背景色が伸びて出現(下から上)
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

滑らかに出現

See the Pen
滑らかに出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

ほのかに光りながら出現

See the Pen
ほのかに光りながら出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」内の表示を確かめてね!↑

次回の予定

直感的に作成できるジェネレータを使用したGIFアニメ、PNGアニメ、SVGアニメの「イラスト・オブジェクトの動き」に挑戦してみます \\\\٩( ‘ω’ )و ////

WordPressの保守運用ならWEB先案内!

WordPressでのお困りの不具合等を復旧致します!

ココナラでも提供しております。ココナラだけでも、多数のご依頼を頂いています。またココナラではうれしい五つ星評価(最高評価)も頂いております。

WordPressの作業代行

お見積もりも、もちろん無料です。

日祝・時間を問わず対応しております。お気軽にご相談ください。

こんな不具合を解消しています。

下記のようなエラー復旧のご依頼を頂いています。

    • 『WordPressにログインできない』
    • 『ユーザー名、パスワードがわからなくなった』
    • 『ワードプレスを更新したらおかしくなった』
    • 『XXXX年間ビジターアンケートが表示された』
    • 『ログインしようとしたら画面が真っ白(表示されなくなった)』
    • 『サイトによくわからない文字が表示されている』
    • 『400、500などのエラー表示が出ている』
    • 『ウィジェットやバーが表示されない』
    • 『ページが真っ白、エラーページが表示される』
    • 『プラグインが動かない』
    • 『403エラーが出て、サイトが見れなくなった』
    • 『ホームページが改ざんされてしまった』
    • 『不正なアクセスの検知をした旨のメールが届いた…』
    • 『Fatal error: Uncaught Error:
      Call to undefined function wp_unregister_GLOBALS() 』に関するエラー
    • 『作業はやるので代わりに調べて欲しい』
    • 『調べた内容は本当にできる?』
    • 『詳しい人のアドバイスが欲しいだけ』
    • 『WordPressを始めてみたけどこの後どうすればいいの?』
    • 『インストールしたテーマの使い方がわからない…』
    • 『外観>カスタマイズ』で設定できる内容
    • 『ERR_TOO_MANY_REDIRECTS』に関するエラー
    • 『WordPressのバージョンを上げたらおかしくなった』
    • 『テーマを更新したらデザインが崩れてしまった』
    • 『サーバーを移行したら表示がおかしくなった』
    • 『phpのバージョンを上げたらおかしくなった』
    • 『画像をメディアにアップロードできない』
    • 『サイト内の画像がすべて表示されなくなった』
    • 『ドメインを変更したら表示がおかしくなった』
    • 『サーバー移管SSL化(https)』
    • 『他のブログからの引っ越し(アメーバブログ・他のWordPress等)』
    • 『用途に応じたサーバー選び』

    その他『とにかく助けて欲しい!』など、お気軽にお問い合わせ下さい

    どのようなエラーでも復旧可能?

    下記3点のケースを除けば基本的に復旧は可能です。 復旧出来ない可能性のあるケース

    • 元データ自体が無くなってしまっている
    • サイトを改ざんされてり内部ファイルを書き換えられたり削除されている
    • データを誤って削除してしまい、バックアップが無い場合

     

    バックアップをお持ちではなくともサーバー側で自動的にバックアップを取っている場合があり、復旧出来ることもあります。諦めずまずはお問い合わせ下さい。

    お問い合わせ

    「お見積もり無料です!」

    費用は作業完了後にご納得の上でのお支払です。

    作業の流れ(お見積もり)

    • ご連絡頂く
    • 詳細をお聞きする
    • ログイン情報を頂く
    • サーバー・サイトにログインして状況を確認
    • お見積もり金額の提示
    • 依頼頂くかキャンセルされるかご判断下さい。(ここでキャンセルも可)
    • ご依頼確定となれば作業開始
    • 作業完了
    • サイトの確認をして頂く(問題ないようでしたらお支払いに進む)
    • お支払いのご案内(メールにてご請求の案内)
    • ご依頼・作業終了となります。

    WordPress保守管理します!

    WordPress保守管理(月額)サービスも行っております。

    WEB先案内