Gumroad のホームページに表示されるヘッダー テキストに存在する機能を模倣しようとしています。これには、回転/ドロップインおよびドロップアウトするテキスト行のコンポーネントがあります。新しいテキストがドロップされると、一定のままのテキストが水平方向に動的にシフトします。
同様の質問に回答するスタックオーバーフローに関する回答を見つけました。その回答はこちらを参照してください。しかし、問題は、ソリューションが絶対配置を使用していることです。私は Twitter Bootstrap を使用したいので、テキストをレスポンシブにする必要があるため、絶対配置を使用しないようにする必要があります。
可能であれば (CSS3 ではなく) Jquery を使用してこれを実現したいと考えており、必要なものに近いものを思いつきました。これは私のJSFiddleで確認できます。
<h2>
Enjoy this rotation
<span id="dynamic-text-wrapper">
<span id="old-text">from the comfort of your home</span>
<span id="new-text">from the comfort of your home</span>
</span>
today!
私が思いついた問題は、新しいテキストがドロップされると、一定のままのテキストが垂直方向にシフトすることです.
ボーナス：ドロップインしたテキストのサイズに応じて、ドロップインしたテキストの右側にあるテキストを動的に左または右にスライドさせたいのですが、どこから始めればよいかわかりません。それを達成します。ドキュメントを読むことができるように、誰かが使用可能な効果の方向性を教えてくれたら、私は感謝します!