サイト作成 22日目✨✨
今日は、ランサーズのパッケージを文章を考えて設定して出してみたよ😆
そして昨日に引き続きランサーズで今後使う、
必要な返信文のテンプレートを作成したり、ヒアリングシートを作ったりしたよ👍
昨日のものを添削しながら文章を追加して作り直していったから、
昨日より良くなったんじゃないかとじゃないかなと思ってるよ❗️
あとは、営業かけていったりしてお仕事取れればって思ってるよ✨✨
それから、知り合いの友人のWEBデザイナーの先輩と
ご飯をしながら色々お話して、アドバイスもめっちゃもらった❗️
その先輩もWordPressでswellを使って、お仕事をしているから、
swellについてだったり仕事をするにあたっての対応だったりその他諸々、
色々なお話しも聞けたし、めちゃめちゃゴリゴリに仕事してるから、
本当に今後自分のためになることとか、単語は聞いたことあるけど
あまりよく意味が分かってなかったことだったりすることを丁寧に教えてもらえたよ😆😆
法律文書の掲載とか特定商取引法とか利用規約とかプライバシーポリシーとか、
何で入れなきゃいけないかとかあまりよく分かってなかった部分あったから、
ちゃんと知れてよかったなって思ったし、このタイミングで知れてよかったなって思う❗️❗️
佐々木税理士事務所の背景に視差効果（パララックス）が
使われているところがあるんだけど、そこが視差効果でそうなっているっていうのを
今日の今日まで知らなくてしかも、フルワイドを敷いて背景を設定すれば、
簡単にそれができるって言うのも今日知って、そこは綺麗に直したよ😆
ただ、フルワイドの設定でできる視差効果には、動く範囲に限界があって、
それが少し小さかったからこのサイトではCSSを使って、
もっと分かりやすく動くように応用で、ホームに入れてみたよ❗️
今後のデザインの部分でこのブログにも活用したいなと思って、
とりあえず入れてみただけだから明日以降違うところに、
移動させるかも知れないけど、物は試しだと思って入れてみた👍👍
HTML
<div class=”container”></div>
CSS
.container {
background-image: url(../path/to/background-image.jpg);
background-size: cover; background-position: center top;
background-attachment: fixed;
}
JS
class ParallaxEffectBackground { constructor() { this.devided = 5; this.target = ‘.container’; this.setBackgroundPosition(); } getScrollTop() { return Math.max( window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop, window.scrollY ); } setBackgroundPosition() { document.addEventListener(‘scroll’, e => { const scrollTop = this.getScrollTop(); const position = scrollTop / this.devided; console.log(‘scrollTop: ‘+scrollTop); console.log(‘position: ‘+position); if (position) { document.querySelectorAll(this.target).forEach(element => { element.style.backgroundPosition = ‘center top -‘ + position + ‘px’; }); } }); } } document.addEventListener(‘DOMContentLoaded’, event => { new ParallaxEffectBackground(); });
ここにも入れてみるね❗️❗️
こんな感じで、最近JSを使ってアニメーションを入れるのも結構慣れてきたし、
もっとたくさん知って色々上手く使えるようになって行きたいと思ったよ✨
今、思いつくだけでテンプレ文を作ったり、アイキャッチ画像変えなきゃ
で明日もやる事いっぱいあるし、頑張るよー❗️❗️❗️
2022.12.13