如何創建一個真正的「顯示頁」幻燈片效果

我一直在尋找一種方式來做到這一點的效果：讓iPhone保持http://www.discovershadow.com/如何創建一個真正的「顯示頁」幻燈片效果

尤其是iPhone在底部露出一部分，但改變裏面的內容同時作爲背景。

這隻能用css來實現還是比較複雜？

2013-07-27 Marc Waiting

沒有你嘗試新鮮事物??? –

這是我發現做到這一點......似乎沒有人感興趣的問題的方式，但我希望你喜歡的答案：

<html> 
<head> 
<style> 
html, body { 
    min-height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container { 
    height: 100%; 
    width: 100%; 
    overflow-y: scroll; 
    position: fixed; 
} 

.items { 
    width: 100%; 
    height: 102%; 
    background-attachment: fixed; 
    background-position: 50%; 
    background-repeat: no-repeat; 
    position: relative; 
} 

#box1 { 
    background-image: url(yourimage1.png); 
    background-color: #03F; 
} 

#box2 { 
    background-image: url(yourimage2.png); 
    background-color: #609; 
} 

#box3 { 
    background-image: url(yourimage3.png); 
    background-color: #3C0; 
} 

</style> 

</head> 
<body> 

<div id="container"> 
<div class="items" id="box1"></div> 
<div class="items" id="box2"></div> 
<div class="items" id="box3"></div> 
</div> 

</body> 
</html>

來源

2013-09-20 03:24:19

是可以做到這一點......你還沒有添加任何代碼甚至沒有嘗試過，我認爲。這裏是讓你開始的簡單代碼。

.a 
{ 
    background-image : url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Beautiful-Nature-Images-HD-Wallpaper.jpg'); 
    height: 200px; 
    width: 100%; 
    position: fixed; 
} 
p 
{ 
    color : #000; 
    font-size: 72px; 
    position: relative; 
    z-index: 999; 
}

fiddle

來源

2014-03-20 16:14:48

這個效果確實需要CSS + JavaScript中，沒有辦法做到這一點沒有有效地使用這些技術。你可以讓iPhone在屏幕上居中，屏幕的其餘部分圍繞它移動，但它不會產生像在網站上看到的那麼好的效果。

我個人建議查看目標網站的源代碼，並調查自己是如何實現的，從不傷害其他網站的源代碼。

望着那網站的script.js頁面，他們處理與

// handle scrolling 
    $window.scroll(function() {   
     handleScroll(); 
    });

哪些做到這一點滾動。您需要查看完整的代碼，以確定它的完成方式。

// handle scroll 
function handleScroll() { 

    scrolledWin = getPageScroll(); 
    $body.addClass('scrolling');  

    // show logo 
    if((scrolledWin * 1.5) > winH) { 
     $body.addClass('content'); 
    } 

    // show navigation 
    if(scrolledWin > 50) { 
     $body.addClass('scrolled'); 
    } 

    // app img animation 
    if(topOff >= scrolledWin) { 
     $appImg.removeClass('sticky'); 
    } else { 
     $appImg.addClass('sticky'); 
    } 
    if(topOff2 >= scrolledWin) { 
     $appImg2.removeClass('sticky'); 
    } else { 
     $appImg2.addClass('sticky'); 
    } 

    // fix navigation issue on top scroll 
    if ((scrolledWin > -(winH - (winH * (f1 *0.8)))) && $('#hook2').hasClass('inViewport')) { 
     $nav.attr("class", "").addClass('a2'); 
    } else if ($('#hook2').hasClass('inViewport')) { 
     $nav.attr("class", "").addClass('a1'); 
    } 

    //fix navigation issue between how it works and next section 
    if ($s9.hasClass('inViewport')) { 
     if ($('#hook5').hasClass('inViewport')) { 
      $nav.attr("class", "").addClass('a5'); 
     } else { 
      $nav.attr("class", "").addClass('a4'); 
     } 
    } 

    //fix navigation issue between Experts and next section 
    if ($sExperts.hasClass('inViewport')) { 
     if ($('#hook6').hasClass('inViewport')) { 
      $nav.attr("class", "").addClass('a6'); 
     } else { 
      $nav.attr("class", "").addClass('a5'); 
     } 
    } 
}

編號：http://www.discovershadow.com/js/script.js?v=2.14

來源

2014-03-20 16:27:17

如何創建一個真正的「顯示頁」幻燈片效果

回答

相關問題