I have a task of making this dotted/dashed line around my rounded divs that will later serve as a “train track”. I made all the components except that line that I can’t figure out. Here is the part of my code so you can see what I am working with.
$(document).ready(function () {
$(window).scroll(function () {
$('.rounded-gradient-div').each(function () {
var divTop = $(this).offset().top;
var divHeight = $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportHeight = $(window).height();
var overlay = $(this).find('.layer');
var distanceFromCenter = Math.abs((divTop + divHeight / 2) - (viewportTop + viewportHeight / 2));
var maxDistance = viewportHeight / 2;
var overlayOpacity = 1 - (distanceFromCenter / maxDistance);
if (overlayOpacity < 0) {
overlayOpacity = 0;
}
overlay.css('opacity', (1 - overlayOpacity).toFixed(2));
});
});
});p {
text-align: center;
color: white;
}
.underline {
width: 100%;
}
.rounded-div {
width: 70%;
height: 500px;
background-color: #69b287;
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
}
.rounded-gradient-div {
width: 70%;
height: 500px;
margin-bottom: 20px;
background: linear-gradient(to right, #6891ad, #a5689e);
text-align: center;
position: relative;
}
.gradient-1 {
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
float: left;
background: linear-gradient(to right, rgba(105, 178, 135, 0.9), rgba(0, 161, 154, 0.9));
background: url('https://image.shutterstock.com/image-photo/sunset-ruby-beach-260nw-35902396.jpg');
background-size: cover;
}
.gradient-2 {
border-top-left-radius: 250px;
border-bottom-left-radius: 250px;
float: right;
background: linear-gradient(to right, rgba(165, 104, 158, 0.9), rgba(104, 145, 173, 0.9));
background: url('https://image.shutterstock.com/image-photo/sunset-ruby-beach-260nw-35902396.jpg');
background-size: cover;
}
.gradient-3 {
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
float: left;
background: linear-gradient(to right, rgba(203, 187, 160, 0.9), rgba(164, 138, 123, 0.9));
background: url('https://image.shutterstock.com/image-photo/sunset-ruby-beach-260nw-35902396.jpg');
background-size: cover;
}
.gradient-4 {
border-top-left-radius: 250px;
border-bottom-left-radius: 250px;
float: right;
background: linear-gradient(to right, rgba(202, 121, 103, 0.9), rgba(159, 97, 114, 0.9));
background: url('https://image.shutterstock.com/image-photo/sunset-ruby-beach-260nw-35902396.jpg');
background-size: cover;
}
#layer-1 {
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
float: left;
background: linear-gradient(to right, rgba(0, 161, 154, 0.9), rgba(105, 178, 135, 0.9));
position: absolute;
top: 0;
left: 0;
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
width: 100%;
height: 500px;
}
#layer-2 {
border-top-left-radius: 250px;
border-bottom-left-radius: 250px;
float: right;
background: linear-gradient(to right, rgba(104, 145, 173, 0.9), rgba(165, 104, 158, 0.9));
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px;
}
#layer-3 {
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
float: left;
background: linear-gradient(to right, rgba(164, 138, 123, 0.9), rgba(203, 187, 160, 0.9));
position: absolute;
top: 0;
left: 0;
border-top-right-radius: 250px;
border-bottom-right-radius: 250px;
width: 100%;
height: 500px;
}
#layer-4 {
border-top-left-radius: 250px;
border-bottom-left-radius: 250px;
float: right;
background: linear-gradient(to right, rgba(202, 121, 103, 0.9), rgba(159, 97, 114, 0.9));
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px;
}
.text-container {
height: 80%;
width: 50%;
text-align: left;
display: flex;
flex-direction: column;
margin-left: 20%;
}
.text-container hr {
float: left;
}
.text-container p {
float: left;
}
<div class="rounded-gradient-div gradient-1">
<div class="layer" id="layer-1"></div>
<div class="text-container odd">
<p class="title">ABCD</p>
<hr class="underline"/>
<p> 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.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</div>
<div class="rounded-gradient-div gradient-2">
<div class="layer" id="layer-2"></div>
<div class="text-container even">
<p class="title">ABCD</p>
<hr class="underline" />
<p>
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.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</div>
<div class="rounded-gradient-div gradient-3">
<div class="layer" id="layer-3"></div>
<div class="text-container odd">
<p class="title">ABCD</p>
<hr class="underline" />
<p>
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.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</div>
<div class="rounded-gradient-div gradient-4">
<div class="layer" id="layer-4"></div>
<div class="text-container even">
<p class="title">ABCD</p>
<hr class="underline" />
<p>
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.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Here is the picture of the line that I am trying to make. Any help is welcome:
New contributor
Kreimir Basketball1212 Klari is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.