#javascript #html #css
#javascript #HTML #css
Вопрос:
В настоящее время я работаю над веб-сайтом, который включает анимацию JavaScript. Изображение в первой части страницы должно быть адаптивным, что в настоящее время работает по назначению, но я хочу, чтобы абзац следующего раздела оставался в определенном месте / не проходил определенное место.
Я пытался использовать функцию overflow в CSS, но она позволяет тексту абзаца передавать точку.
На приведенном выше изображении показан текст абзаца. Я не хочу, чтобы он переходил в черный цвет. Как бы я это сделал (новичок в html, css и js). Обратите внимание, что JavaScript использует TweenMax.
Демонстрация здесь:https://jsfiddle.net/AshS123/w0k8mjys/2 /
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/styles.css" />
<link href="https://fonts.googleapis.com/css2?family=Loraamp;display=swap" rel="stylesheet">
<title>Homepage</title>
</head>
<body>
<header>
<nav>
</nav>
<div id="container">
<section>
<div class="backgroundimage">
<img src="https://images.unsplash.com/photo-1483651842966-0a111943c528?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1350amp;q=80" alt="background">
<h1 class="headline">Lorem Ipsum</h1>
</div>
</section>
</header>
<div class="slider"></div>
<div class="about">
<h2 class="aboutme"> ABOUT</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" integrity="sha512-8Wy4KH0O AuzjMm1w5QfZ5j5/y8Q/kcUktK9mPUVaUoBvh3QPUZB822W/vy7ULqri3yR8daH3F58 Y8Z08qzeg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js" integrity="sha512-lJDBw/vKlGO8aIZB8/6CY4lV EMAL3qzViHid6wXjH/uDrqUl uvfCROHXAEL0T/bgdAQHSuE68vRlcFHUdrUw==" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slider{
flex: 0 1 auto;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background:black;
z-index: -1;
max-width: 100%;
min-width: 350px;
min-height: 900px;
}
nav {
display: grid;
grid-template-columns: 10% 1fr 1fr 10%;
min-height: 10vh;
color: white;
max-width: 100vw;
}
#Logo{
grid-column: 2/3;
font-size: 14px;
}
section {
display: flex;
height: auto;
width: auto;
max-height: 80vh;
max-width: 80vw;
min-height: 75vh;
min-width: 75vw;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.backgroundimage {
height: 80%;
width:100%;
position:relative;
min-width: 200px;
}
.backgroundimage img {
width: 100%;
height: 100%;
object-fit: cover;
min-width: 200px;
}
.headline {
position:absolute;
top: 80%;
left:10%;
font-size: 7vw;
transform: translate(-20%, -70%);
color: pink;
z-index:5;
}
.backgroundimage::after{
content: "";
background: black;
width: 100%;
height: 100%;
position: absolute;
left: 0;
opacity: 0.6;
top: 0;
}
#container {
max-height: 95vh;
max-width: 100%;
}
.about.lead{
text-align: center;
padding-left: 13rem;
padding-left: 11rem;
padding-left: 10vw;
padding-right: 10vw;
z-index: -2;
}
p.lead {
font-family: "Lora", serif;
font-size:calc(10px 1.2vw);
line-height: 1.8;
color: #888888;
text-align: center;
margin-left: 25vw;
margin-right: 25vw;
overflow:hidden;
z-index: -2;
}
.about {
height: 100%;
margin-top: 30vh;
max-height: 80vh;
max-width: 100%;
text-align: center;
overflow:hidden;
width: auto;
height: 500px;
z-index: -10;
}
h2 {
font-family: "Lora", serif;
text-decoration: bold;
color: rgb(255, 42, 95);
margin-right: -30px;
margin-left: -30px;
}
.lead {
min-height: 150px;
font-size: min(1em, 12px);
}
JavaScript:
const backgroundimage = document.querySelector(".backgroundimage");
const slider = document.querySelector(".slider");
const headline = document.querySelector(".headline");
const tl = new TimelineMax();
tl.fromTo
(backgroundimage,
0.8, {height: "0%"},
{ height: "80%", ease: Power2.easeInOut})
.fromTo
(backgroundimage,
0.8, {width: '100%'}, {width: '80%', ease: Power2.easeInOut})
.fromTo(
slider,
0.8,
{ x: "-100%" },
{ x: "0%", ease:Power2.easeInOut },
"=0.8"
);
Комментарии:
1. Вы хотите, чтобы ваш текст был вырезан / остановлен после некоторой точки? Не могли бы вы объяснить, почему функция overflow не делает этого за вас?
2. Я хочу, чтобы текст абзаца перестал перемещаться вверх за пределы черного фона. Я попробовал функцию переполнения, и в настоящее время проблема заключается в div, который перекрывается с черным фоном.
3. для меня это выглядит так, как будто ползунок черного фона перемещает не текст. И это, скорее всего, вызвано «position: absolute» в слайдере
4. Изменение положения на абсолютное устранило проблему с перемещением, но теперь ползунок черного фона больше не находится за изображением
Ответ №1:
Вам следует удалить min-height: 900px правило из .slider элемента, поскольку при меньших высотах это приводит к тому, что высота ползунка (который является черным фоном) становится больше высоты контейнера заголовка, поэтому он перекрывается с абзацем ниже.
Комментарии:
1. Это удерживает абзац внутри белой секции, но это также позволяет абзацу перемещаться под изображением. Есть ли исправление, чтобы остановить перемещение абзаца и раздела под изображением.
2. Вы должны удалить
max-heightиmin-heightи добавитьheight: 100vhкsectionэлементу. Таким образом, все будет содержаться в черном разделе, а абзац будет находиться под ним.3. вот пример с этими изменениями: jsfiddle.net/sgv28y61