[英]code working in codepen, not in browser: javascript to zoom svg on mousewheel
[英]Code working in Codepen but not in browser
我制作了一個按預期工作的啟動畫面,可以在這個 codepen 上看到:
https://codepen.io/dbake3452/pen/VwmeoGa
但是,當我將該代碼復制到我的項目中時,啟動屏幕在 3 秒后不再消失。 我在想某處有沖突的代碼,但我無法發現它
我的代碼:
'/ ///HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" `enter code here`integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<link rel="stylesheet" href="css/kayportfolio.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
</head>
<body>
<div id="container">
<header>
<nav>
<img id="bun" src="images/kay logo.png">
</nav>
</header>
<div class="splash">
<img class="fade-in" src="images/pippinhop.png">
</div>
<main>
<i class="fas fa-caret-up"></i>
<img id="myth" src="images/mythologyproj.png">
<i class="fas fa-caret-down"></i>
<img id="fingerguns" src="images/fingerguns.png">
</main>
<footer>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<script src="js/kayportfolio.js" async defer></script>
</body>
</html>
///SASS
$purple: #a9aaff;
body {
margin: 0;
padding: 0;
}
#container {
height: 100vh;
display: grid;
grid-template-rows: 25vh 1fr 25vh;
header {
grid-area: 1 / 1 / 1 / -1;
display: flex;
align-items: center;
justify-content: center;
img {
width: 400px;
}
}
.splash {
width: 100%;
height: 100vh;
background-color: $purple;
position: fixed;
top: 0;
left: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
img {
width: 12.5%;
}
}
.display-none {
display: none;
};
@keyframes fadeIn{
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
main {
grid-area: 2 / 1 / 2 / -1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 1;
i {
font-size: 60px;
margin: 20px;
color: $purple;
}
i:hover {
cursor: pointer;
}
#myth {
width: 800px;
}
#myth:hover {
opacity: .5;
cursor: pointer;
}
#fingerguns {
width: 400px;
position: fixed;
left: 5%;
top: 49%;
}
}
footer {
grid-area: 3 / 1 / 3 / -1;
}
}
/// JS
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none')
}, 3000);
});
Sass 必須編譯為 CSS 以便您的瀏覽器理解它,在 VS 代碼中,有一些方便的擴展需要這個,例如實時 sass 編譯器。
單擊底部的手表 sass 按鈕(或以您想要的任何方式編譯)。
可以看到編譯器在工程中添加了CSS版本。
現在只需在 html 中包含 CSS 文件,例如(如果 CSS 文件位於同一文件夾中):
<link rel="stylesheet" href="./style.css" >
不要忘記將您的 JS 代碼也放在<script></script>
標記中,或者創建一個單獨的文件並包含它。
<script>
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none')
}, 3000);
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.