縮小效果問題
[英]Zoom-out Effect Issues
問題描述
我正在嘗試獲得整頁（頂部帶有導航欄，但我不介意其下方的背景）縮小效果。 但是 ，我希望它在所有資產加載后執行，因為這是加載頁面時看到的第一件事。 因此，我不希望它提早執行，否則甚至可能看不到它，或者僅僅抓住它的結尾。
我看過幾個例子，但是我遇到了問題：
- （使用jQuery）對background-size屬性進行動畫處理-這使動畫“起伏不定”，我讀到某個地方，可能是因為它是在CPU而不是GPU上運行的。
演示： https : //jsfiddle.net/njj43kz4/
的HTML
<body>
<div id="front"></div>
</body>
的CSS
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: 110%;
}
的JavaScript
$('#front').animate({ backgroundSize: '100%' }, 1000);
- 使用
setTimeout，如上一個問題的答案所示： DOM加載時背景稍微縮放？ -這個工作順利，但是當我將width和height值更改為100％時，我無法正常工作。 在縮小之前，圖像開始過大，但是顯示了過大的視圖。 我想要固定的100％x100％視圖，並且沒有可見的額外縮放比例。 我嘗試了overflow: hidden但這並沒有隱藏溢出。 您可以看到正在發生這種情況，因為滾動條正在出現並且破壞了效果。
演示： http ： //jsfiddle.net/eHAuh/15/
的HTML
<body>
<div id="front" class="scaled"></div>
</body>
的CSS
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-position: 50% 50%;
overflow: hidden;
}
.animatable {
-webkit-transition:all 750ms ease-out;
transition:all 750ms ease-out;
}
.scaled {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
的JavaScript
$(document).ready(function () {
$('#front').attr('class', 'animatable');
setTimeout(function () {
$('#front').removeClass('animatable');
}, 1000)
});
任何幫助都會很棒，我希望這個問題的安排可以。 我無法弄清楚如何在不將段落轉換為代碼縮進的情況下縮進段落。 感謝您的閱讀，並祝您愉快。
編輯1：這將在加載時執行的方式是因為jQuery / JavaScript在$(window).load 。
編輯2：有一個建議使用關鍵幀的答案，但是這些不支持IE9，這將是更好的選擇。
2 個解決方案
解決方案1
2 2015-07-27 19:01:51
如果要使用scale可以使用css @keyframes來實現
- 我使用偽類添加
background
/** after page has loaded*/ $(window).bind('load', function() { $('#front').addClass('active') })
html { width: 100%; height: 100%; } body { height: 100%; width: 100%; margin: 0px; padding: 0px; } #front { position: relative; top: 0; width: 100%; height: 100%; opacity: 1; overflow: hidden; } #front:after { content: ''; width: 100%; height: 100%; position: absolute; background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center; background-size: cover; transform: scale(2); } #front.active:after { animation: animation 5s; /* change the value 5s to what you want */ animation-fill-mode: forwards; /* added so that it doesn't return to its original state which is scale(2)*/ } @keyframes animation { 0% { transform: scale(2); } 100% { transform: scale(1) } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="front"></div>
根據您的要求，看來您需要此
/** after page has loaded*/ $(window).bind('load', function() { $('#front').animate({ width: '100%', height: '100%' }, 5000); })
html { width: 100%; height: 100%; } body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; } #front { position: relative; top: 0; width: 200%; height: 200%; opacity: 1; background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center; background-size: cover; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="front"></div>
解決方案2
1 已采納 2015-07-27 19:01:21
在CSS更改
#front
position: fixed;
或身體添加
overflow: hidden;
縮小時對象消失
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.