私はこれをしばらく見てきましたが、私は恐れています。どのようにしてロゴをスワイプし、スワイプしてページから外すことができますか?
Thisサイトには、特にフッターで本当にクールなロゴがスワイプしています。
下にスクロールすると、ヘッダーのロゴが上にスワイプし、ページの下端に当たったときにロゴが上にスワイプして入/切れます。
私は要素を検査し、これだけに関連するCSSを見つけた:
#wrap .logo-alt {
position:absolute;
margin-top:0;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#wrap .logo-alt.gone {
position:absolute;
margin-top:200px;
pointer-events:none;
}
それはまた持っている:
data-scrollspeed="600" and a data-scrollpos="0"
jQueryのは、私が想像してもそこにありますが、どのように正確に効果の作業を行います?上記のタグは何について言及していますか?私はこれを前にして来なかった。 jQueryのコードで
これらのデータ属性は単独では何も行いません。しかし、 'data-scrollspeed'のような' data'属性は、JavaScriptフレームワーク/プラグインによって使用されます。たとえば、jQueryには、指定した要素からデータ属性の値を取得する組み込みの '.data()'メソッドがあります。私は、特定の 'データ'属性を探すアニメーション用のプラグインがあると仮定し、それに応じて要素をアニメートします。 – Santi
それは聞こえるほど複雑ですか? – davvv
あなたのページに含めることができるjQueryプラグインはたくさんあります。上記のように、要素に属性を与えるだけで要素をアニメーション化することができます。あなたがしなければならないことは、アニメーションプラグインのjQueryが含まれていることです。指示を読んでください。あなたが見ている特定のウェブサイトは、基本的なWordpressサイトであるようです。 Wordpressにはあなたが選ぶテーマがありますが、そのほとんどはスタイリッシュなアニメーションを持っています。 – Santi