Mini Project 7: Project B Website Draft

document.addEventListener('DOMContentLoaded', function() {
const endOfPage=document.getElementById('box5');
const contactBtn=document.getElementById('contactBtn');
contactBtn.addEventListener('click', function() {
endOfPage.scrollIntoView({ behavior:'smooth' });
});
});

window.addEventListener("scroll", function() {
const scrolled=window.scrollY;
console.log(scrolled/10)
const translationX=scrolled;
const translationY=scrolled;
document.getElementById("box2").style.transform="translate("+translationX+"px, "+translationY+"px) ";
});

\.frame1 {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 30px;
text-align: center;
left: 25%;
width: 50%;
height: auto;
padding: 20px;
border-style: double;
border-width: 6px;
border-color: rgb(108, 95, 91);
}

.frame1 img {
display: none;
position: absolute;
left: -300px;
transform: translateY(-50%);
width: 200px;
height: 200px;
}

.frame1:hover img {
display: block;
}

.frame1 img, .frame1 {
transition: background-color 0.5s ease-out, transform 0.5s ease-out;
}

.frame1:hover{
background-color: rgba(103, 114, 157,0.8);
transform: rotate(5deg);
}

In the CSS section, I established interactive features for four distinct elements labeled “childhood, teenage, adulthood, old age.” The gif would appear when the mouse hovers over the specific bar, and disappear when mouse moves away through the use of pseudo classes, creating an engaging user experience. Initially, I assigned individual IDs to each bar, even though the interaction for the third bar is same as the first, as did the second and fourth bars. To enhance efficiency, I optimized the code by consolidating the shared interactions among bars into a single CSS class, retaining the IDs for defining their absolute positions. This approach reduced redundancy and greatly shortened the code.