Здравствуйте, умные люди из инте rnet! Я надеюсь, что вы можете рассказать мне об этом, я действительно больше не представляю, как это сделать. Вот что я сделал:
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-80px";
}
prevScrollpos = currentScrollPos;
};
body {
margin: 0;
color: #000;
font-family: Roboto;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}
#navbar a {
float: right;
display: block;
color: #fff;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
color: #3df487;
}
.about_btn {
-webkit-animation: slid-in 1s ease;
position: relative;
margin-left: 10px;
}
.exp_btn {
-webkit-animation: slid-in 1.2s ease;
position: relative;
margin-left: 10px;
}
.work_btn {
-webkit-animation: slid-in 1.4s ease;
position: relative;
margin-left: 10px;
}
.contact_btn {
-webkit-animation: slid-in 1.6s ease;
position: relative;
margin-left: 10px;
margin-right: 7px;
}
/*navbar items numbers*/
.contact_btn:before {
content: ".4 ";
color: #3df487;
margin-right: 7px;
}
.about_btn:before {
content: ".1 ";
color: #3df487;
margin-right: 7px;
}
.exp_btn:before {
content: ".2 ";
color: #3df487;
margin-right: 7px;
}
.work_btn:before {
content: ".3 ";
color: #3df487;
margin-right: 7px;
}
@-webkit-keyframes slid-in {
0% {
left: 1000px;
}
80% {
left: 1000px;
}
90% {
left: -5px;
}
100% {
left: 0px
}
}
header {
background: url(https://i.imgur.com/2WiMKww.png) repeat-x 0 / 100% auto;
background-color: #000;
overflow: hidden;
}
img {
width: 100%;
height: auto;
}
.starts_img {
width: 100%;
height: auto;
position: absolute;
z-index: 0;
margin-top: 0;
}
.flexcontainer {
overflow: hidden;
width: 100%;
height: auto;
position: fixed;
top: 0;
}
.mountains_img {
margin-top: 38vh;
position: absolute;
z-index: 1;
width: 100%;
height: auto;
}
.mountains_img_right {
margin-top: 38vh;
position: absolute;
z-index: 9999;
width: 100%;
height: auto;
}
@keyframes ani {
0% {
background-position: 0 0;
}
100% {
background-position: 100vw 0;
}
}
.wave {
transform-origin: top left;
z-index: 9;
transform: rotate(13deg);
/*background: url(https://i.imgur.com/hmOZaSa.png) repeat-x 0 / 100% auto;*/
background: url(https://i.imgur.com/QCeCtQJ.png) repeat-x 0 / 100% auto;
height: 500px;
/* this value is not important, just not zero */
animation: ani 10s linear infinite;
position: relative;
}
section {
background: #191919;
}
.main_content {
height: 1000px;
}
<html lang="en">
<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="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
<div id="navbar">
<a href="#contact" class="contact_btn">Contact</a>
<a href="#work" class="work_btn">Work</a>
<a href="#experience" class="exp_btn">Experience</a>
<a href="#about" class="about_btn">About</a>
</div>
<header>
<div class="mountains_img_right"><img src="https://i.imgur.com/bS2voSs.png" class="img"></div>
<div class="mountains_img"><img src="https://i.imgur.com/rCNtMBZ.png" class="img"></div>
<div class="wave"></div>
<div class="wave2"></div>
</header>
<section>
<div class="main_content">
Coiso e tal
</div>
</section>
<script src="./script.js" async defer></script>
</body>
</html>
Я хочу, чтобы анимированное изображение было деформировано на левом конце, например: https://i.imgur.com/fYYIR3Z.png
Есть ли способ сделать это? Я использовал изображение в формате png, но оно также может работать с svg.
Заранее спасибо!