-1
Wer weiß, wie diese Bild zu fixieren und Text
$('#pagepiling').pagepiling({
verticalCentered: false,
css3: false,
sectionsColor: ['white', '#E8E8E8', '#f2f2f2', '#EC008C'],
onLeave: function(index, nextIndex, direction) {
//fading out the txt of the leaving section
$('.section').eq(index - 1).find('h1, p').fadeOut(700, 'easeInQuart');
//fading in the text of the destination (in case it was fadedOut)
$('.section').eq(nextIndex - 1).find('h1, p').fadeIn(700, 'easeInQuart');
//reaching our last section? The one with our normal site?
if (nextIndex == 4) {
$('#arrow').hide();
//fading out navigation bullets
$('#pp-nav').fadeOut();
$('#section4').find('.content').animate({
top: '0%'
}, 700, 'easeInQuart');
}
//leaving our last section? The one with our normal site?
if (index == 4) {
$('#arrow').show();
//fadding in navigation bullets
$('#pp-nav').fadeIn();
$('#section4 .content').animate({
top: '100%'
}, 700, 'easeInQuart');
}
},
});
$('#arrow').click(function() {
$.fn.pagepiling.moveSectionDown();
});#arrow{
width: 100%;
height: 50px;
text-align: center;
cursor: pointer;
position: fixed;
bottom: 0;
left: 0;
border: 0;
outline: 0;
z-index: 100;
color: #BBB;
background: transparent;
-moz-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
transition: all 0.2s cubic-bezier(0.7, 0.01, 0.3, 1);
font: 36px Heiti, 'Lucida Grande', Arial;
font-weight: bold;
}
#arrow span{
display: inline-block;
position: relative;
top: -18px;
-moz-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
-o-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
-webkit-transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
transition: all 0.7s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#arrow:hover{
background: #EC008C;
}
#arrow:hover span{
top: 0;
color: #FFF;
}
#pp-nav li .active span, .pp-slidesNav .active span {
background: #bbb;
}
#pp-nav span, .pp-slidesNav span {
border-color: #bbb !important;
}
.section {
background-attachment: fixed;
background-size: auto 80%;
background-position: 50% 0%;
background-repeat: no-repeat;
}
#section1 {
background-image: url('http://i.imgur.com/aVDvkXk.jpg?1');
\t background-size: cover;
}
.intro {
position: absolute;
20px;
\t bottom: 390px;
\t color: #FFFFFF;
\t
}
.intro h1 {
font-size: 5em;
font-weight: bold;
color: #000;
\t position: relative;
left: -1px;
\t top: 27px;
\t
}
#section4 .intro {
color: #000;
}
/* Content page
\t * --------------------------------------- */
.header {
padding-top: 80px;
text-align: center;
}
.header h1 {
font-size: 5em;
font-weight: bold;
color: #fff;
}
.header p {
color: #f2f2f2;
font-size: 1.7em;
\t
}
.page {
width: 80%;
margin: 60px auto;
background:white;
padding: 60px;
-webkit-box-sizing: border-box;
/* Safari<=5 Android<=3 */
-moz-box-sizing: border-box;
/* <=28 */
box-sizing: border-box;
}
.page p {
font-style: 12px;
margin: 20px 0 0 0;
line-height: 1.35em;
color: #333;
\t
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.min.js"></script>
<button id="arrow"> \t <span>↓</span>
</button>
<div id="pagepiling">
<div class="section" id="section1">
<div class="intro">
\t <h1><font color="FFFFFF">HI</font></h1>
\t \t \t \t
\t \t \t <font size="4">
I believe in pink. I believe that <br/>
\t \t \t laughing is the best calorie
\t \t \t burner. I believe in kissing,
\t \t \t kissing a lot. I believe in being strong<br/>
\t \t \t when everything seems
\t \t \t to be going Wrong. I believe that
\t \t \t happy girls are the prettiest girls.<br/>
\t \t \t I believe that tomorrow is another day and I believe in miracles<br/>
\t \t \t
</div>
</div>Wer weiß, wie diese Bild und Text zu beheben? Denn wenn ich schon mit meiner Webseite fertig bin alles funktioniert sogar im Bild und Text hier in meinem 19-Zoll-Monitor, aber wenn ich auf einen anderen übertragen 16inch überwachen meinen Text unterscheiden sich von der ursprünglichen Bildschirmgröße ist :(
danke für diejenigen, die mir helfen wollen
Können Sie einige Code in Klar .A Geige bieten würde besser sein. – Rambler
Fragen, die Code Hilfe suchen, müssen den kürzesten Code enthalten, der notwendig ist, um es zu reproduzieren ** in der Frage selbst ** vorzugsweise in einem [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/introducing- runnable-javascript-css-und-html-code-snippets /). Siehe [** So erstellen Sie ein minimales, vollständiges und überprüfbares Beispiel **] (http://stackoverflow.com/help/mcve) –