クリックした時にグラデーションがサーっと右から左に出現するようにしたい

前提・実現したいこと

クリックしたら、
もともと黒い文字だったのが
右から左にさーーっとグラデーションになって色がつくロゴが作りたいです。

(ちゃんと画面を狭めたらwidth;autoで可変が理想なのでSassで作ってます)

グラデーションを付けるまではうまくいきました。
JSやプラグインが初心者過ぎて、質問させていただきました。

実際のコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style.css">
7    <link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">
8    <title>Document</title>
9</head>
10<body>
11    <div class="logo">
12        <h1>レインボー</h1>
13    </div>
14</body>
15</html>

Sass
1
2
3$sp:667px;
4@mixin txt{
5    @media (max-width:$sp){
6    @content
7    }
8}
9
10
11.logo {
12    display: block;
13    width: 1000px;
14    margin: 80px auto 0;
15    text-align: center;
16}
17
18.logo h1{
19    font-size: 200px;
20    font-family: "Nico Moji";
21    display: inline;
22    background: linear-gradient( 90deg, rgba(255, 103, 1, 1) 20%,rgba(255, 1, 213 ,1) 40%,rgba(1, 141, 255 ,1) 60%,rgba(1, 255, 128 ,1) 80%,rgb(54, 46, 46) 100% );
23    -webkit-background-clip: text;
24    color: transparent;
25  }
26

お手本にしているコード

下記がお手本にしているコードなのですが、
何から手をつけたらいいかわからなくて、ちょっとヒントをいただきたいなと思っています…

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>動くCSSのためのメモ。 - transition-delayについて</title>
6<meta name="viewport" content="width=device-width">
7<meta name="robots" content="noindex,nofollow">
8<link rel="canonical" href="https://lopan.jp/css-animation">
9<style>
10p {
11	position: relative;
12	width: 100%;
13	margin: 6px auto;
14	padding: 0.8em 0;
15	color: #20b2aa;
16	font-size: 14px;
17	text-align: center;
18	background: rgba(255,255,255,.3);
19}
20p::before {
21	content: "";
22	z-index: -1;
23	display: block;
24	position: absolute;
25	top: 0;
26	left: 0;
27	width: 0%;
28	height: 100%;
29	background: #20b2aa;
30	transition: width 1s;
31}
32.delay1::before { transition-delay: 0s; }
33.delay2::before { transition-delay: .3s; }
34.delay3::before { transition-delay: -.3s; }
35.delay:hover p::before {
36	width: 100%;
37}
38</style>
39</head>
40<body>
41<div class="delay">
42	<p class="delay1">すぐにアニメーションを開始します</p>
43	<p class="delay2">0.3秒待ってから開始します</p>
44	<p class="delay3">0.3秒進んだ時点から開始します</p>
45</div>
46</body>
47</html>

すみません…
どうぞ宜しくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえずマウスホバーで切り替えるようにしてみました。

css
1.logo {
2  display: block;
3  max-width: 1000px;
4  margin: 80px auto 0;
5  text-align: center;
6}
7.logo h1{
8  font-size: 200px;
9  font-family: "Nico Moji";
10  display: inline-block;
11  background-image: linear-gradient( 90deg,rgba(0, 0, 0, 1) 50%, rgba(255, 103, 1, 1) 50%,rgba(255, 1, 213 ,1) 57.5%,rgba(1, 141, 255 ,1) 75%,rgba(1, 255, 128 ,1) 87.5%, rgba(128, 0, 128 ,1) 100% );
12  background-size: 200%;
13  background-position-x: 0;
14  -webkit-background-clip: text;
15  background-clip: text;
16  color: transparent;
17  transition: background-position-x 1s;
18}
19.logo h1:hover {
20  background-position-x: 100%;
21}

クリックで切り替えるなら、チェックボックスを使う方法か（HTML CSS のみで可能）、JavaScriptを使うことになりますね。

画面幅が1000px以下の場合はどのようなレイアウトにしたいのか不明なので無視しています。

Codepenサンプル

クリックで切り替わるサンプルも作成してみました。

Codepenサンプル

解説

簡単にやっていることを解説します。

background-imageのグラデーションは、左半分を黒に、右半分をレインボーカラーにします。
background-sizeを200%、background-position-xを0にすることで最初は黒の部分だけ表示されます。

background-position-xを100%にすると右半分が表示されるように移動します。

クリックで切り替えるのは、チェックボックスにチェックが入ったらbackground-position-xを100%にします。
チェックボックス自体は非表示にして、関連付けられたラベルのクリックでチェックか入ります。
ラベルの中にテキストを配置してますので、テキストをクリックするとラベルをクリックしたことになります。

CSSセレクタでチェックボックスとテキストを関連付けているのは、一般兄弟結合子(~)です。

一般兄弟結合子 - CSS: カスケーディングスタイルシート | MDN

投稿2020/08/13 04:16

編集2020/08/14 04:30