html - リンクをクリックすると、スクロールしてDivを強調表示します

Question

連絡先フォームをラップするdivを強調表示して、ユーザーが連絡先を確認できるようにしようとしています。私のリンクは次のようになります

<a href="#form" class="contacthighlight">Contact Us</a>

これはサイトの2か所で使用されるため、クラスに参加します。

現在、＃formの現在の背景は＃f5f5f5なので、私がやりたいのは、＃ff0000のようなランダムな色をフラッシュし、ゆっくりとフェードアウトして＃f5f5f5に戻すことです。

Answer 1

dabblet.comのデモ

スクロール先の要素に適用されるターゲット疑似クラス。これをCSSに追加します。

CSS：

#form {
    background-color: #f5f5f5;
}

#form {
    background-color: #f5f5f5;
}

#form:target {
    animation: target-fade 1s 1;
}

@keyframes target-fade {
    0% { background-color: #ff0000; }
    100% { background-color: #f5f5f5; }
}

HTMLマークアップ：

<a href="#form"> link to target #form</a>
<form id="form">
    …
</form>

PS：caniuse.comのCSSプロパティに応じて： アニメーションとキーフレームには、次のようなベンダープレフィックスが必要です。

.box_animation:hover {
  -webkit-animation: myanim 1s infinite; /* value is demo only */
     -moz-animation: myanim 1s infinite;
       -o-animation: myanim 1s infinite;
          animation: myanim 1s infinite;
}

@-webkit-keyframes myanim {…}
@-moz-keyframes myanim {…}
@-o-keyframes myanim {…}
@keyframes myanim {…}

PPS： プレフィックスのないJSライブラリを使用して必要なすべてのプレフィックスを貼り付けるダブレット。後でこのライブラリがないと、 css3pleaseで必要なプレフィックス構文をすべて確認できます。

Answer 2

ArielFleslerのScrollTojQueryプラグインを使用して、アニメーションでスクロールできます。

また、アニメーションで色を変更するには、 jQuery ColorAnimationPluginを使用します

例

$('selector').scrollTo( '520px', 800 )
.animate({backgroundColor:'#ff0000'}, {duration:5000,queue:false});

編集

フェードバックしたい場合は、トグル機能を使用できます。

   $('selector').scrollTo( '520px', 800 )
   .toggle(function() {
   $(this).animate({ 
     {backgroundColor:'#ff0000'}, {duration:5000,queue:false});
   },
   function() {
   $(this).animate({
     {backgroundColor:'#f5f5f5'}, {duration:5000,queue:false});
   });