부트 스트랩으로 작성된 텍스트의 애니메이션

Question

이 코드를 모바일 호환 가능하게하려면 어떻게해야합니까? 부트 스트랩에서 사용하고 싶습니다. 최대 너비와 최대 높이를 변경하여 실행 해 보았습니다 만 차이는 없습니다. 코드는 페이지로드시 실행되는 짧은 애니메이션입니다.

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>

잘

Answer 1

. 부트 스트랩을 사용하려고 시도한 곳에서 볼 수 없으므로 그 점을 도와 드릴 수는 없습니다.

응답 속도를 높이려고 할 때 큰 문제는 절대 위치 요소가 많고 width에 픽셀 값을 사용하고 위치를 많이 지정한다는 것입니다.

#scaleWrapper { 
    transform-origin: 0 0; 
} 

JShttps://jsfiddle.net/g600fu8a/2/

변경된 HTML

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

추가 CSS

: 항상 뷰포트를 맞도록

하는 유일한 빠른 옵션 왼쪽, 그것을 확장한다

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보다 작은 경우)를 사용하도록 적절하게 비율을 조정하는 것입니다.
는