Так что в настоящее время предполагается, что это веб-сайт, который работает только для мобильных устройств.Когда я смотрю его на мобильном экране Chrome в инспекторе, он работает отлично.Тем не менее, когда я использую сафари или мой телефон, он испортит и пропустит второй момент, к которому он должен привязаться.Вот соответствующий код:
function startGreet(){
const greets = ["Hey","Hello","Good Morning"];
const p = document.getElementById('greeting');
p.innerHTML = greets[Math.floor(Math.random() * greets.length)];
}
/* If reaches bottom of page do something code
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
}
};
*/
@keyframes jump {
0% { transform: translate(0,0); }
20% { transform: translate(0,-95%); }
40% { transform: translate(0,15%); }
60% { transform: translate(0,-10%); }
80% { transform: translate(0,0%); }
100% { transform: translate(0,0); }
}
body{
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling:touch;
}
html, body{
position:absolute;
overflow:auto;
overflow-x: hidden;
margin:0;
height: 100vh;
width:100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color:white;
}
#greeting{
position:absolute;
width:100%;
font-size:75px;
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
margin-top:75%;
color:black;
}
#slideUp{
position:absolute;
height:5%;
width:100%;
font-size:70px;
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
margin:0;
bottom:10%;
color:#686868;
-moz-animation: jump 2.5s 3s infinite;
-webkit-animation: jump 2.5s 3s infinite;
-o-animation: jump 2.5s 3s infinite;
animation: jump 2.5s 3s infinite;
}
#scrollCont{
position:absolute;
overflow: scroll;
top:0;
height: 100vh;
width:100%;
-webkit-overflow-scrolling: touch;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
-webkit-scroll-snap-stop: normal;
scroll-snap-stop: normal;
}
.row{
position: relative;
width:100vw;
height: 100vh;
-webkit-scroll-snap-align: start end;
scroll-snap-align: start end;
scroll-snap-stop: always;
}
#home{
position: relative;
width:100vw;
height: 100vh;
-webkit-scroll-snap-align: none;
scroll-snap-align: none;
}
#flower{
width:150%;
}
#secondRow{
color:black;
word-wrap: break-word;
background-color:#a0dfff;
overflow:hidden;
}
#secondRow .title{
padding-top:5%;
color:black;
font-weight: 100;
font-family: 'Lato', sans-serif;
font-size: 62.5px;
margin-left:10%;
margin-top:5%;
}
#secondRow hr{
border-color: black;
}
#bodyCont{
font-size:40px;
position:relative;
top:10%;
left:10%;
width:80%;
color:black;
font-family: 'Lato', sans-serif;
}
#thirdRow{
background-color:black;
}
#thirdRow .title{
padding-top:5%;
color:white;
font-weight: 100;
font-family: 'Lato', sans-serif;
font-size: 62.5px;
margin:0;
margin-left:10%;
}
#thirdRow hr{
border-color: white;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:300|Roboto+Condensed&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="mainMenu.css">
<link rel="stylesheet" type="text/css" href="indexR2.css">
<link rel="stylesheet" type="text/css" href="indexR3.css">
<script src="mainMenu.js"></script>
</head>
<body onload="startGreet()">
<div id="scrollCont">
<div id="home">
<h1 id="greeting" ></h1>
<p id="slideUp" >^ ^ ^</p>
</div>
<div id="secondRow" class="row">
<h1 class="title">Introduction</h1>
<hr>
<div id="bodyCont">
<p><i>text text text text text</i></p>
<img id="flower" src="https://cdn.pixabay.com/photo/2012/04/18/19/18/shrub-37619_640.png"/>
</div>
</div>
<div id="thirdRow" class="row">
<h1 class="title">Introduction</h1>
</div>
</div>
<!--<img id="videos" src="https://www.sccpre.cat/mypng/full/15-156384_old-camera-png-camera-drawing-transparent-background.png"/>-->
</body>
</html>
Помните!Предполагается, что это будет работать только на мобильных устройствах, поэтому оно будет выглядеть не так, как на мобильных устройствах.