テキストのアニメーションがブートストラップで作成されるようになる

このコードをモバイル対応にするにはどうすればよいですか？私はそれをブートストラップで使いたいです。最大幅と最大高を変更して実行しようとしましたが、違いはありません。コードはページ読み込み時に実行される短いアニメーションです。まあテキストのアニメーションがブートストラップで作成されるようになる

body { 
 
    background: #ffdd00; 
 
    font-family: 'MisoRegular'; 
 
} 
 
h1.main, 
 
p.demos { 
 
    -webkit-animation-delay: 8s; 
 
    -moz-animation-delay: 8s; 
 
    -ms-animation-delay: 8s; 
 
    animation-delay: 8s; 
 
} 
 
.sp-container { 
 
    width: 900px; 
 
    height: 400px; 
 
    position: relative; 
 
    margin: 80px auto 0px auto; 
 
} 
 
.sp-content { 
 
    width: 100%; 
 
    height: 400px; 
 
    position: relative; 
 
    -webkit-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards; 
 
    -moz-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards; 
 
    -ms-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards; 
 
    animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards; 
 
} 
 
.sp-content:after { 
 
    content: ''; 
 
    width: 4px; 
 
    background: #000; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 50%; 
 
} 
 
.sp-container h2 { 
 
    color: #000; 
 
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9); 
 
} 
 
.sp-wrap { 
 
    width: 400px; 
 
    padding: 0px 25px; 
 
    height: 100%; 
 
    text-align: right; 
 
    font-size: 35px; 
 
    line-height: 80px; 
 
    float: left; 
 
    position: relative; 
 
    background: #ffdd00; 
 
    overflow: hidden; 
 
} 
 
.sp-wrap span { 
 
    display: block; 
 
    background: #ffdd00; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
} 
 
.sp-wrap span.sp-mid { 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    filter: alpha(opacity=100); 
 
    opacity: 1; 
 
} 
 
.sp-container .sp-right h2 { 
 
    color: #fff; 
 
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.9); 
 
} 
 
.sp-wrap span.sp-mid { 
 
    font-family: 'MisoBold'; 
 
    text-transform: uppercase; 
 
    font-size: 50px; 
 
    line-height: 130px; 
 
    position: relative; 
 
} 
 
.sp-left span.sp-top { 
 
    -webkit-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards; 
 
    -moz-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards; 
 
    -ms-animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards; 
 
    animation: slideLeft 0.5s ease-in 0.6s backwards, fadeOut 1s linear 4s backwards; 
 
} 
 
.sp-left span.sp-mid { 
 
    -webkit-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards; 
 
    -moz-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards; 
 
    -ms-animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards; 
 
    animation: slideLeft 0.5s ease-in 1s backwards, moveUp 0.6s linear 5s forwards; 
 
} 
 
.sp-left span.sp-bottom { 
 
    -webkit-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards; 
 
    -moz-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards; 
 
    -ms-animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards; 
 
    animation: slideLeft 0.5s ease-in 1.4s backwards, fadeOut 1s linear 4.2s backwards; 
 
} 
 
.sp-right span { 
 
    text-align: left; 
 
} 
 
.sp-right span.sp-top { 
 
    -webkit-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards; 
 
    -moz-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards; 
 
    -ms-animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards; 
 
    animation: slideRight 0.5s ease-in 2s backwards, fadeOut 1s linear 4.4s backwards; 
 
} 
 
.sp-right span.sp-mid { 
 
    -webkit-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards; 
 
    -moz-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards; 
 
    -ms-animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards; 
 
    animation: slideRight 0.5s ease-in 2.4s backwards, moveUp 0.6s linear 5s forwards; 
 
} 
 
.sp-right span.sp-bottom { 
 
    -webkit-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards; 
 
    -moz-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards; 
 
    -ms-animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards; 
 
    animation: slideRight 0.5s ease-in 3.2s backwards, fadeOut 1s linear 4.6s backwards; 
 
} 
 
.sp-wrap i { 
 
    position: absolute; 
 
    background: #ffdd00; 
 
    width: 60px; 
 
} 
 
.sp-wrap i:first-child { 
 
    color: #000; 
 
} 
 
.sp-wrap i:last-child { 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    filter: alpha(opacity=0); 
 
    opacity: 0; 
 
    -webkit-animation: fadeOut 1s linear 6s backwards; 
 
    -moz-animation: fadeOut 1s linear 6s backwards; 
 
    -ms-animation: fadeOut 1s linear 6s backwards; 
 
    animation: fadeOut 1s linear 6s backwards; 
 
} 
 
.sp-full { 
 
    position: absolute; 
 
    font-size: 40px; 
 
    top: 142px; 
 
    width: 700px; 
 
    left: 145px; 
 
    -webkit-animation: fadeIn 1s linear 6.6s backwards; 
 
    -moz-animation: fadeIn 1s linear 6.6s backwards; 
 
    -ms-animation: fadeIn 1s linear 6.6s backwards; 
 
    animation: fadeIn 1s linear 6.6s backwards; 
 
} 
 
.sp-full a { 
 
    background: #000; 
 
    color: #fff; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    padding: 10px 40px; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    margin-top: 40px; 
 
    -webkit-animation: zoomIn 0.7s ease-in-out 7s backwards; 
 
    -moz-animation: zoomIn 0.7s ease-in-out 7s backwards; 
 
    -ms-animation: zoomIn 0.7s ease-in-out 7s backwards; 
 
    animation: zoomIn 0.7s ease-in-out 7s backwards; 
 
} 
 
.sp-full h2 { 
 
    width: 200px; 
 
    padding: 0px 50px 0px 0px; 
 
    float: left; 
 
    text-align: right; 
 
} 
 
.sp-full a:hover { 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
 
    filter: alpha(opacity=80); 
 
    opacity: 0.8; 
 
} 
 
/**/ 
 

 
@-webkit-keyframes open { 
 
    0% { 
 
    -webkit-transform: scale(1, 0); 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(1, 1); 
 
    } 
 
} 
 
@-webkit-keyframes squeeze { 
 
    0% { 
 
    height: 400px; 
 
    } 
 
    100% { 
 
    height: 120px; 
 
    } 
 
} 
 
@-webkit-keyframes fadeOut { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@-webkit-keyframes fadeIn { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 
@-webkit-keyframes slideLeft { 
 
    0% { 
 
    -webkit-transform: translateX(120%); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateX(0%); 
 
    } 
 
} 
 
@-webkit-keyframes slideRight { 
 
    0% { 
 
    -webkit-transform: translateX(-120%); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateX(0%); 
 
    } 
 
} 
 
@-webkit-keyframes moveUp { 
 
    0% { 
 
    -webkit-transform: translateY(0px); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateY(-170px); 
 
    } 
 
} 
 
@-webkit-keyframes zoomIn { 
 
    0% { 
 
    -webkit-transform: scale(0); 
 
    } 
 
    100% { 
 
    -webkit-transform: scale(1); 
 
    } 
 
} 
 
/**/ 
 

 
@-moz-keyframes open { 
 
    0% { 
 
    -moz-transform: scale(1, 0); 
 
    } 
 
    100% { 
 
    -moz-transform: scale(1, 1); 
 
    } 
 
} 
 
@-moz-keyframes squeeze { 
 
    0% { 
 
    height: 400px; 
 
    } 
 
    100% { 
 
    height: 120px; 
 
    } 
 
} 
 
@-moz-keyframes fadeOut { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@-moz-keyframes fadeIn { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 
@-moz-keyframes slideLeft { 
 
    0% { 
 
    -moz-transform: translateX(120%); 
 
    } 
 
    100% { 
 
    -moz-transform: translateX(0%); 
 
    } 
 
} 
 
@-moz-keyframes slideRight { 
 
    0% { 
 
    -moz-transform: translateX(-120%); 
 
    } 
 
    100% { 
 
    -moz-transform: translateX(0%); 
 
    } 
 
} 
 
@-moz-keyframes moveUp { 
 
    0% { 
 
    -moz-transform: translateY(0px); 
 
    } 
 
    100% { 
 
    -moz-transform: translateY(-170px); 
 
    } 
 
} 
 
@-moz-keyframes zoomIn { 
 
    0% { 
 
    -moz-transform: scale(0); 
 
    } 
 
    100% { 
 
    -moz-transform: scale(1); 
 
    } 
 
} 
 
/**/ 
 

 
@keyframes open { 
 
    0% { 
 
    transform: scale(1, 0); 
 
    } 
 
    100% { 
 
    transform: scale(1, 1); 
 
    } 
 
} 
 
@keyframes squeeze { 
 
    0% { 
 
    height: 400px; 
 
    } 
 
    100% { 
 
    height: 120px; 
 
    } 
 
} 
 
@keyframes fadeOut { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@keyframes fadeIn { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 
@keyframes slideLeft { 
 
    0% { 
 
    transform: translateX(120%); 
 
    } 
 
    100% { 
 
    transform: translateX(0%); 
 
    } 
 
} 
 
@keyframes slideRight { 
 
    0% { 
 
    transform: translateX(-120%); 
 
    } 
 
    100% { 
 
    transform: translateX(0%); 
 
    } 
 
} 
 
@keyframes moveUp { 
 
    0% { 
 
    transform: translateY(0px); 
 
    } 
 
    100% { 
 
    transform: translateY(-170px); 
 
    } 
 
} 
 
@keyframes zoomIn { 
 
    0% { 
 
    transform: scale(0); 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    } 
 
}

<div class="sp-container"> 
 
    <div class="sp-content"> 
 
    <div class="sp-wrap sp-left"> 
 
     <h2> 
 
\t \t \t \t \t \t \t <span class="sp-top">What if you wouldn't get</span> 
 
\t \t \t \t \t \t \t <span class="sp-mid">spam</span> 
 
\t \t \t \t \t \t \t <span class="sp-bottom">anymore?</span> 
 
\t \t \t \t \t \t </h2> 
 
    </div> 
 
    <div class="sp-wrap sp-right"> 
 
     <h2> 
 
\t \t \t \t \t \t \t <span class="sp-top">Wouldn't that be absolutely</span> 
 
\t \t \t \t \t \t \t <span class="sp-mid">great<i>!</i><i>?</i></span> 
 
\t \t \t \t \t \t \t <span class="sp-bottom">Yeah, it would!</span> 
 
\t \t \t \t \t \t </h2> 
 
    </div> 
 
    </div> 
 
    <div class="sp-full"> 
 
    <h2>A great way to get rid of spam!</h2> 
 
    <a href="index3.html">Sign up now!</a> 
 
    </div> 
 
</div>

出典

2016-06-21 Manan Chawda

あなたのコードを投稿し、あなたが –

をやりたい簡単にそれを説明し、それをやった、あなたはそれを確認するかもしれないし、 help @GautamJha –

@MananChawda：私の答えが役に立つか正解であれば、それを自由にアップウォークしたり、受け入れられたとマークしたりできます。ありがとうございました。 – Seika85

。私はあなたがブートストラップを使用しようとしたところは見ませんので、私はそれを手伝ってはいけません。

あなたの大事な問題は、絶対的な配置要素が多く、widthのピクセル値を使用して多くの位置を特定することです。

それは常にビューポートに収まるように、唯一の迅速なオプションの左には、それをスケーリングされていますhttps://jsfiddle.net/g600fu8a/2/

変更されたHTML

<div class="sp-container" id="scaleWrapper"> 
    ... 
</div>

追加のCSS

#scaleWrapper { 
    transform-origin: 0 0; 
}

var initialWidth = 900; //just as default value 
var scaleContent = function() { 

    var windowWidth = $(window).width(); 
    //console.log("scaling ...", windowWidth, initialWidth); 

    if(windowWidth < initialWidth) { 
     var newScale = windowWidth/initialWidth; 
     $('#scaleWrapper').css({ 
      '-webkit-transform' : 'scale(' + newScale + ')', 
      '-moz-transform' : 'scale(' + newScale + ')', 
      '-ms-transform'  : 'scale(' + newScale + ')', 
      '-o-transform'  : 'scale(' + newScale + ')', 
      'transform'   : 'scale(' + newScale + ')' 
     }); 
    } 
} 


$(document).ready(function() { 
    initialWidth = $('#scaleWrapper').width(); 
    scaleContent(); 
}); 
$(window).resize(function() { 
    scaleContent(); 
});

説明：
あなたは900pxの固定幅を持つように.sp-containerを定義しました。だから、私はこれは一種の最大幅であると考えています。ビューポートがもっと大きくなるかどうかは関係ありません（マージン - オートを適用してからです）。
したがって、ビューポートのサイズが900pxより小さい場合、このコンテナを調整する必要があります。私のアプローチは、ビューポート幅の100％（常に900pxより小さい場合）を使用するように、それに応じてスケールすることです。
（私は最初は幅ラッパーで読み込み、計算のためにその初期値を使用して、それをより柔軟に。）

出典

2016-06-21 14:24:04 Seika85

こんにちは、私はあなたが与えた提案を試しました。しかし、それはまだ動作しません。私は探している答えに私を導くかもしれないjavascriptのuは、私につながるかもしれません。 –

@MananChawdaこれはフィドルでうまくいきます。コンソールにエラーがないことを確認してください。 –

@GautamJhaはコードが私の提供されたフィドルで動作すると書いていたので、あなた自身のコードにもっと適応する必要があるようです。あなたはより多くの指導や助けを求めることが自由です。 – Seika85

テキストのアニメーションがブートストラップで作成されるようになる

答えて

関連する問題