コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JSでスクロールと文字色褪せ効果を実現_JavaScriptスキル

JSでスクロールと文字色褪せ効果を実現_JavaScriptスキル

WBOY
リリース： 2016-05-16 16:44:13
オリジナル
1958 人が閲覧しました

Js は、スクロールと色変更のテキスト効果を実装しています。効果表示ページでは、コードを Web サイトにコピーした後、効果が非常に優れていることがわかります。必要なテキスト。

ソース コードは次のとおりです:

コードをコピーします コードは次のとおりです:



スクロールすると色が変わります

下のテキストの部分に注目してください。テキストが赤く染まり、赤の色が周期的に移動します。 元のテキスト
="text/javascript">
var message="Ke Leyi.com へようこそ。ここには、Web フロントエンドやその他の学習教材があります。"
var neonbasecolor="#333333"
var neontextcolor ="#ff0000"
var neontextcolor2 = "#ff3333"
var flashspeed=100
var flashingletters=8
var flashingletters2=2
var flashpause=0
var n=0
if (document .all||document.getElementById){
document.write('')
for (m=0;mdocument.write('' message.charAt(m) '')
document.write('< /font>')
}
else
document.write(message)
functioncrossref(number){
varcrossobj=document.all eval("document.all.neonlight"数値) : document.getElementById ("ネオンライト" 数値)
returncrossobj
}
function neon(){
if (n==0){
for (m=0;m<) ;message.length;m )
crossref(m).style.color=neonbasecolor
}
crossref(n).style.color=neontextcolor
if (n>flashingletters-1)crossref( n-flashingletters).style .color=neontextcolor2
if (n>(flashingletters flashingletters2)-1)crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (nn
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
< /script>

関連ラベル：
滚动变色 js特效
ソース：php.cn
前の記事：jqueryは、ページがロードされた後に画像の高さまたは幅を取得する実装をします_jquery 次の記事：jQueryループスクロールニュースリストのサンプルコード_jquery
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
0ms スリープを省略すると CSS トランジションが中断されるのはなぜですか? FLIP アニメーションを実装して、正しく理解できているかどうかを確認しようとしています。このコードペン (間違ったコードですみません。ただいじっているだけです) で、sleep ...
から 2024-04-06 16:29:50
0
2
490
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
クリックしてスクロールすると div を非表示/表示します 検索アイコンをクリックすると表示され、ユーザーがクリックまたはスクロールすると非表示になる、非表示の検索フォームを作成したいと考えています。
から 2024-04-06 12:20:46
0
1
386
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート