Webサイト制作で使える！簡単コーディング HTML / CSS /JS Jquery まとめ #1
こんにちは。
株式会社COMMAのエンジニア のんです。
今回は私が実務で使っているいつも調べてしまうことや便利だったものたちを備忘録として記事にしていきます。
その名も、ズボラシリーズ
日々カツカツなスケジュールをこなしているコーダーさんたちのお助けになれれば幸いです。
【 過去記事紹介 】
初心者でもなんとかなる
Shopifyのテーマ「Dawn」を使ったカスタマイズ
アニメーションを時短したい
Webサイト制作にアニメーションは不可欠ですよね。
「スクロールしたらふわっと出してほしい」
「この要素をずっとループしてほしい」
「ふわふわさせてほしい」
こんなことを言われた経験はありませんか？
毎回調べるのがちょっと面倒だし、その時間を取られるのもなんとなく勿体ない気がしてしまいます。
基本のスクロールアニメーション
よくあるスクロールすると文字や要素が下からふわっと出てくるものになります。
HTML
<div class="fade-in-out">
ふわっと表示させたい要素
</div>背景のCSSを当てている要素にクラスをつけてしまうと
背景ごとふわっとしてしまうので文字や画像に直接つけると綺麗に動いてくれます。
また、レスポンシブで横並びにしている時は幅によって1列の個数が変わると思いますが、その場合も親要素ではなく小要素にクラスをつけるとどんな幅になっても1列ごのに綺麗にふわっと表示されます。
CSS
.fade-in-out {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-out.active {
opacity: 1;
transform: translateY(0);
}JS
// --------------------------------------------------
// スクロールアニメーション
// --------------------------------------------------
$(document).ready(function () {
function checkElements() {
let isMobile = window.matchMedia("(max-width: 767px)").matches;
$(".fade-in-out").each(function () {
let position = $(this).offset().top; // 要素の位置
let scroll = $(window).scrollTop(); // スクロール位置
let windowHeight = $(window).height(); // 画面の高さ
if (isMobile) {
// スマホ用の処理（例: 違うクラスを適用）
if (scroll > position - windowHeight + 50) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
} else {
// PC用の処理
if (scroll > position - windowHeight + 100) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
}
});
}
// 初回ロード時にチェック
checkElements();
// スクロール時にもチェック
$(window).on("scroll", function () {
checkElements();
});
// ウィンドウサイズ変更時にもチェック
$(window).on("resize", function () {
checkElements();
});
});こちらのコードは、要素が見えるようになるとその都度ふわっと出てくるものになります。使い所によっては、アニメーションがしつこいと感じるかもしれません。
1回出たら出たままにしたい場合はこちらのJSを使ってみてください。
$(document).ready(function () {
function checkElements() {
let isMobile = window.matchMedia("(max-width: 767px)").matches;
$(".fade-in-out").each(function () {
if ($(this).hasClass("active")) return;
let position = $(this).offset().top;
let scroll = $(window).scrollTop();
let windowHeight = $(window).height();
let threshold = isMobile ? 50 : 100;
if (scroll > position - windowHeight + threshold) {
$(this).addClass("active");
}
});
}
// 初回ロード時にチェック
checkElements();
// スクロール時にもチェック
$(window).on("scroll", function () {
checkElements();
});
// ウィンドウサイズ変更時にもチェック
$(window).on("resize", function () {
checkElements();
});
});ループして動かし続けるアニメーション
こちらもよくある、無限ループのアニメーション。
弊社のコーポレートサイトでも使用しております。
いろいろやり方はあるのですが、一番綺麗にできたのはこの方法でした。
HTML
<div class="loop">
<div class="loop__track">
<div class="loop__set">
<!-- 流したい内容 -->
<div class="text_loop">CONNECT to YOUR PASSION<img src="画像パス" alt=""></div>
<div class="text_loop">CONNECT to YOUR PASSION<img src="画像パス" alt=""></div>
<div class="text_loop">CONNECT to YOUR PASSION<img src="画像パス" alt=""></div>
</div>
<div class="loop__set" aria-hidden="true">
<!-- 上と全く同じ内容を複製 -->
<div class="text_loop">CONNECT to YOUR PASSION<img src="画像パス" alt=""></div>
<div class="text_loop">CONNECT to YOUR PASSION<img src="画像パス" alt=""></div>
<div class="text_loop">CONNECT to YOUR PASSION<img src="画像パス" alt=""></div>
</div>
</div>
</div>CSS
.loop {
width: 100%;
overflow: hidden;
position: absolute;
top: -2.1rem;
}
.loop__track {
display: flex;
width: max-content;
will-change: transform;
animation: marquee var(--duration, 40s) linear infinite;
}
.loop__set {
display: flex;
align-items: center;
gap: 7rem;
margin: 0 7rem 0 0;
}
.text_loop {
flex: 0 0 auto;
display: inline-flex;
align-items: end;
gap: 1.5rem;
color: #B4B4B4;
font-family: "Montserrat", sans-serif;
font-size: 4rem;
font-weight: 700;
letter-spacing: 0.3rem;
white-space: nowrap;
img {
// 画像のサイズは適宜調整くださいね
display: block;
width: 1.2rem;
}
}これをこのまま使用すると弊社のサイトで使われているものと同じものが出来上がります。JSいらずでとても簡単です。
ふわふわさせたい
「この要素をふわふわ動かしたい」なんてこと、たまにあると思います。
ほんの少しの動きをつけるだけでちょっとリッチになります。
HTML
<div class="float-up-down">
ふわふわ動かしたい要素
</div>
CSS
@keyframes floatUpDown {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
.float-up-down {
animation: floatUpDown 3s ease-in-out infinite;
}秒数を変えたり、再生を逆にしたりして組み合わせると
もっと動きがでて楽しい印象を持たせることもできます。
設定したクラス名を要素にそれぞれ付与することで、ふわふわするタイミングがそれぞれ違う動きをつけることができます。
.float-up-down-2 {
animation: floatUpDown 4s ease-in-out infinite;
}
.float-up-down-3 {
animation: floatUpDown 5s ease-in-out infinite;
}
.float-up-down-4 {
animation: floatUpDown 4.2s ease-in-out infinite;
animation-direction: reverse;
}
.float-up-down-5 {
animation: floatUpDown 5s ease-in-out infinite;
animation-direction: reverse;
}
.float-up-down-6 {
animation: floatUpDown 3.2s ease-in-out infinite;
animation-direction: reverse;
}左右にふわふわ
先ほど載せたものの右だけ・左だけに動くアニメーションです。
HTML
<div class="float-right">
右にうごく
</div>
<div class="float-left">
左にうごく
</div>CSS
@keyframes floatRight {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(20px);
}
}
.float-right {
animation: floatRight 3s ease-in-out infinite;
}
@keyframes floatLeft {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(-20px);
}
}
.float-left {
animation: floatLeft 3s ease-in-out infinite;
}ちょっと傾くアニメーション
かなり大きな動きをするので使い所は要検討です。
インパクト大なので、小さい要素を動かしたいときは良いかもしれません。
HTML
<div class="float-rotate">
ちょっと傾く
</div>CSS
@keyframes floatRotate {
0%,
100% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
}
.float-rotate {
animation: floatRotate 3s ease-in-out infinite;
}CSSだけでもさまざまなアニメーションをつけることができます。
デザインテイストにあったアニメーションをつけてみてくださいね。
無料相談を受け付けています
私の所属する株式会社COMMAでは、大手企業の制作案件から、スモールブランドの広報のお手伝いまで、業種にこだわらず多様なクライアント様とお付き合いしています。
また、代理店や制作会社との協業も多く、企画・デザインのみ、サイト構築のみといった部分的な対応も柔軟にお受けいたします。
Webサイトからは過去の制作実績を掲載した会社案内をダウンロードすることが出来ます。
弊社に興味をお持ちになりましたら、下記Webサイトをご覧ください。
また、Webサイトでは、弊社代表タムラによる無料相談を受け付けています。
・サイトをリニューアルしたいけれど、何から手をつければいいのか分からない
・SEO対策はどうすればいいのか
・SNSを始めてみたが、運用の方法が分からない
など、制作に関するお悩みをお持ちの方はお気軽にご相談ください。
