質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

946閲覧

カーソル用の要素を作ったのはいいけど実装出来ない

Gnr4A

総合スコア30

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2021/03/18 04:17

前提・実現したいこと

html.scss.javascriptを用いてマウスポインタを動かしたら回りが光るようなプログラム(カーソル用の要素)を作りたいと思っています。詳細は以下のURLをご参考ください。自分もコピペしただけなので、、、

https://codepen.io/yamada-evoworx/pen/YgwwbW

エラーメッセージは発生しませんでした

ソースコード

<ソースコード画面HTML javascript>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="cool.scss"> </head> <body> <div class="btn"><a href="">Button</a></div> <div class="cursor"></div> <div class="follower"></div> <script src="jquery-3.6.0.min.js"></script> <script type="text/javascript" src="TweenMax.min.js"></script> <script> var cursor = $(".cursor"), follower = $(".follower"), cWidth = 8, //カーソルの大きさ fWidth = 40, //フォロワーの大きさ delay = 10, //数字を大きくするとフォロワーがより遅れて来る mouseX = 0, //マウスのX座標 mouseY = 0, //マウスのY座標 posX = 0, //フォロワーのX座標 posY = 0; //フォロワーのX座標 //カーソルの遅延アニメーション //ほんの少ーーーしだけ遅延させる 0.001秒 TweenMax.to({}, .001, { repeat: -1, onRepeat: function() { posX += (mouseX - posX) / delay; posY += (mouseY - posY) / delay; TweenMax.set(follower, { css: { left: posX - (fWidth / 2), top: posY - (fWidth / 2) } }); TweenMax.set(cursor, { css: { left: mouseX - (cWidth / 2), top: mouseY - (cWidth / 2) } }); } }); //マウス座標を取得 $(document).on("mousemove", function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $("a").on({ "mouseenter": function() { cursor.addClass("is-active"); follower.addClass("is-active"); }, "mouseleave": function() { cursor.removeClass("is-active"); follower.removeClass("is-active"); } }); </script> </body> </html>

<ソースコード画面scss>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}

body {
position: relative;
cursor: none;
}

.cursor,
.follower {
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}

.cursor {
width: 8px;
height: 8px;
background-color: #000;
z-index: 1001;
}

.follower {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: rgba(#fdfe00, .5);
z-indes: 1000;
transition: transform ease .1s;
text-align: center;
span {
display: inline-block;
font-size: 14px;
font-weight: bold;
transform: scale(0);
}
&.is-active {
transform: scale(3);
}
}

.btn {
display: inline-block;
width: 160px;
margin: 16px;
text-align: center;
font-size: 16px;
line-height: 1;

a { display: block; color: #fff; text-decoration: none; padding: 16px; background-color: #000; cursor: none; }

}

試したこと

ただコピペして、エラーが出てきたらjqueryを入れたり、TweenMax.min.jsを入れたりしてエラーは取りのぞけましたが実行されませんでした。どこが間違っているのか自分の力ではほんとにわかりません。

補足情報(FW/ツールのバージョンなど)

バージョンなどもわかりませんが自分はファイルを作り、そこで新規作成し、htmlファイルとjavascriptファイルを作りました。そのファイルをVSコードで開きプログラムをしています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

なんでこれcodepenで動いてるんでしょうね。scssの独自の癖で動いてくれるのでしょうか。

さて、自分も検証してみたのですが、まず気をつけないといけないのは

スクリプトの呼び出し順に注意

スクリプトはbody要素の後ろ、つまりDOM生成後でないと動きません

scssは直接読み込めない

したがって、呼び出すファイルはcssです。htmlから読み込むためには、cssファイルとしてコンパイルされた状態にしないといけません。

CSSの問題点

あと、そのcssの中ですが色々記述に問題があります。一番手こずったのは

rgbaですが、rgbaプロパティの中でカラーコードは使えなかったはずで、rgb変換しないといけません。

なので、#fdfe00の場合はrgba(253,254,0, .5)となるはずです。

それからz-indesなんてプロパティはありません。z-indexですね。

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7<title>Document</title> 8<style> 9html, 10body { 11width: 100%; 12height: 100%; 13margin: 0; 14cursor: none; 15} 16 17body { 18position: relative; 19cursor: none; 20} 21 22.cursor, 23.follower { 24border-radius: 50%; 25position: absolute; 26top: 0; 27left: 0; 28pointer-events: none; 29} 30 31.cursor { 32width: 8px; 33height: 8px; 34background-color: #000; 35z-index: 1001; 36} 37 38.follower { 39display: flex; 40justify-content: center; 41align-items: center; 42width: 40px; 43height: 40px; 44background-color: rgba(253,254,0,.5); /*ここを修正*/ 45z-index: 1000; 46transition: transform ease .1s; 47text-align: center; 48span { 49display: inline-block; 50font-size: 14px; 51font-weight: bold; 52transform: scale(0); 53} 54&.is-active { 55transform: scale(3); 56} 57} 58 59.btn { 60display: inline-block; 61width: 160px; 62margin: 16px; 63text-align: center; 64font-size: 16px; 65line-height: 1; 66 67a { 68display: block; 69color: #fff; 70text-decoration: none; 71padding: 16px; 72background-color: #000; 73cursor: none; 74} 75} 76</style> 77<script src="https://code.jquery.com/jquery-3.6.0.js"></script> 78<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 79</head> 80<body> 81<div class="btn"><a href="">Button</a></div> 82<div class="cursor"></div> 83<div class="follower"></div> 84 85<script> 86//DOM生成後でないとカーソルが動きません 87var 88cursor = $(".cursor"), 89follower = $(".follower"), 90cWidth = 8, //カーソルの大きさ 91fWidth = 40, //フォロワーの大きさ 92delay = 10, //数字を大きくするとフォロワーがより遅れて来る 93mouseX = 0, //マウスのX座標 94mouseY = 0, //マウスのY座標 95posX = 0, //フォロワーのX座標 96posY = 0; //フォロワーのX座標 97 98//カーソルの遅延アニメーション 99//ほんの少ーーーしだけ遅延させる 0.001秒 100TweenMax.to({}, .001, { 101repeat: -1, 102onRepeat: function() { 103posX += (mouseX - posX) / delay; 104posY += (mouseY - posY) / delay; 105 106TweenMax.set(follower, { 107css: { 108left: posX - (fWidth / 2), 109top: posY - (fWidth / 2) 110} 111}); 112 113TweenMax.set(cursor, { 114css: { 115left: mouseX - (cWidth / 2), 116top: mouseY - (cWidth / 2) 117} 118}); 119} 120}); 121 122//マウス座標を取得 123$(document).on("mousemove", function(e) { 124mouseX = e.pageX; 125mouseY = e.pageY; 126}); 127 128$("a").on({ 129"mouseenter": function() { 130cursor.addClass("is-active"); 131follower.addClass("is-active"); 132}, 133"mouseleave": function() { 134cursor.removeClass("is-active"); 135follower.removeClass("is-active"); 136} 137}); 138 139</script> 140</body>

投稿2021/03/18 05:53

編集2021/03/18 06:03
FKM

総合スコア3608

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mai1210

2021/03/18 06:04

codepen、CSSプリプロセッサを選択できる画面があって、簡単にLessもSassもSCSSも動くんですよ。便利ですよね…
FKM

2021/03/18 06:05

なるほど! でも、それをそのまんまコピペするとこういうことになるんですな…
guest

0

SCSSをコンパイルせずに読み込んでいませんでしょうか?SCSSはそのままだとCSSとして機能してくれません。

https://webdesignday.jp/inspiration/technique/css/5819/#i-2

SassファイルはそのままではCSSとしてブラウザが認識できるものではありません。「コンパイル」という作業をして、CSSに変換してあげる必要があります。

VSコードには簡単にコンパイルできるエクステンションがあるようです。
VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法
VSCodeでSassのコンパイル環境(CSSに変換)を一瞬で構築する方法

質問内の内容を見る限りだと、いくつかネスト(入れ子)があるだけなので、手動で成形しても大丈夫だとは思います。

投稿2021/03/18 05:38

編集2021/03/18 08:47
mai1210

総合スコア272

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問