0
私は現在、私の大学のプロジェクトのための私のポートフォリオのウェブサイトを作成しようとしている上でスムーズにスクロールません.... なぜこの問題が発生する可能性があり、どのように修正できるかご存じですか？視差ページは、しかし、私はサファリに問題を持っていない、しかし私のラスタースクロールがGoogle Chromeでスムーズにスクロールされていない、クロム
/* this is my css code for my navigation bar. For example, you can change the background of the navigation bar */
#nav {
background-color: transparent;
overflow: hidden;
position: fixed;
}
/* this is the css code for the links inside the navigation bar for example where to position the links they way they will look */
#nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
font-family: "Lato", sans-serif;
}
/* this is to change the background of the buttons(links) when they are on hover */
#nav a:hover {
background-color: rgba(0, 0, 0, 0.6);
text-shadow: 2px 2px rgb(0, 0, 255);
}
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: rgb(102, 102, 102);
}
.image1,
.image2,
.image3 {
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.image1 {
background-image: url(background1.jpg);
min-height: 100%;
}
.image2 {
background-image: url(background.jpg);
min-height: 400px;
}
.image3 {
background-image: url(ist.jpg);
min-height: 400px;
}
.section {
text-align: center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color: #666;
}
.section-dark {
background-color: rgb(40, 46, 52);
color: rgb(0, 0, 0);
}
.text1 {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: rgb(0, 0, 0);
font-size: 27px;
letter-spacing: 8px;
text-transform: uppercase;
}
.text1 .border {
background-color: #111;
color: #fff;
padding: 20px;
}
.text1 .border.trans {
background-color: transparent;
}
@media(max-width:568px) {
.image1,
.image2,
.image3 {
background-attachment: scroll;
}
}
.arrow-down {
width: 100%;
margin: 0 auto;
text-align: center;
}
.arrow-down::after {
content: "";
width: 40px;
height: 40px;
position: absolute;
margin-top: 820px;
margin-left: 820px;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-right: 4px solid rgb(255, 0, 0);
border-bottom: 4px solid rgb(0, 0, 0);
-webkit-transform: rotate(45deg);
animation: 3s arrow infinite ease;
}
@-webkit-keyframes arrow {
0%,
100% {
top: 50px;
}
50% {
top: 80px;
}
}
@keyframes arrow {
0%,
100% {
top: 50px;
}
50% {
top: 80px;
}
}<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- This is my code for my Navigation bar -->
<div id="nav">
<a href="index.html">HOME</a>
<a href="#about">ABOUT ME</a>
<a href="myprojects.html">MY PROJECTS</a>
<a href="mycv.html">MY CV</a>
<a href="contactme.html">CONTACT</a>
</div>
<!-- this is my heading and the main background on my main page(Index) -->
<div class="image1">
<div class="text1">
<span class="border">
\t \t \t Ivan Chamukov
\t \t \t </span>
</div>
</div>
<!-- this is my code for my scrolling arrow, the "onclick" makes my class/object clickable -->
<div class="arrow-down" onclick="slideDown()"></div>
<!-- this is my page - About me, and the information about me. -->
<section class="section section-light">
<h2> About me</h2>
<p class="about">My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended Diplopma in Travel and Tourism and graduated in 2017 with grade D*D*D. I used to train triathlon professionally and take
part in national competitions in Bulgaria and United Kingdom.My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended Diplopma in Travel and Tourism and graduated in 2017 with
grade D*D*D. I used to train triathlon professionally and take part in national competitions in Bulgaria and United Kingdom.My name is Ivan Chamukov. I am computer science student at Goldsmiths, University of London. I have studied BTEC Level 3 Extended
Diplopma in Travel and Tourism and graduated in 2017 with grade D*D*D. I used to train triathlon professionally and take part in national competitions in Bulgaria and United Kingdom. </p>
</section>
<div class="image2">
<div class="text1">
<span class="border">
\t \t \t Image Two Text
\t \t \t </span>
</div>
</div>
<section class="section section-dark">
<h2> Section Two </h2>
<p>n this video we will be building a very basic implementation of a parallax website with fixed scrolling using HTML and CSS. We will make it so that we can scroll and the images will stay in place. We will also learn some other basic HTML and CSS tips
along the way</p>
</section>
<div class="image3">
<div class="text1">
<span class="border">
\t \t \t Image three text
\t \t \t </span>
</div>
</div>
<section class="section section-dark">
<h2> Section Three </h2>
<p>n this video we will be building a very basic implementation of a parallax website with fixed scrolling using HTML and CSS. We will make it so that we can scroll and the images will stay in place. We will also learn some other basic HTML and CSS tips
along the way</p>
</section>
<div class="image2">
<div class="text1">
<span class="border">
\t \t \t Ivan Chamukov
\t \t \t </span>
</div>
</div>
公開している場合は実際にページ自体にリンクできますか？それはまだ完了していないよう – ReyHaynes
@ReyHaynes申し訳ありませんが、あなたは私が私のユニサーバーにアップロードしているWebサイトを表示するには、このリンクを使用することができます。..フルスクリーンでそれを開いてください。.. http://doc.gold.ac.uk /~icham002/Finalproject3copy/index.html –