Intersection Observer makes text overlap with header

Intersection Observer makes text overlap with header - javascript

Good day everyone,
I have tried to create a scrolling animation for text to appear when visible to atleast 50%.
The only code I have is an animated Header with Onscroll Event and the Intersection Observer for the Text.
It works just fine, the only thing I can't figure out is, when you scroll fast up and down, the Text will randomly scroll through the header and appear on top of everything...
I've added borders so you can see them overlapping with the header.
Can someone help me figure out how to make the Text stay behind the header at all time?
Thank you very much!
Greetings Marcel
var navbar = document.getElementById("navbar");
var nav = document.getElementById("nav");
var placeholder = document.getElementById("navbar_placeholder");
var sticky = navbar.offsetTop;
window.onscroll = function() {myFunction()};
function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
// placeholder.classList.add("display");
nav.classList.add("shrink");
} else {
navbar.classList.remove("sticky");
// placeholder.classList.remove("display");
nav.classList.remove("shrink");
}
}
const options = {threshold: 0.5};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
}, options);
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));
:root{
--background-color: #001728;
--darker-background-color: #000000;
--accent-color: #20cc5b;
--text-color: #FFFFFF;
--navbar-height: 80px;
}
html{
height: 100%;
}
body{
height: 100%;
background-color: var(--background-color);
}
nav{
height: var(--navbar-height);
background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 4px solid var(--accent-color);
transition-property: height;
transition-duration: 0.5s;
}
.navbar {
position:absolute;
left:0;
right:0;
top:0;
}
.navbar-placeholder {
position:relative;
height:80px;
transition: height 0.5s;
}
.text1{
padding: 30px;
color: white;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.disappear {
opacity: 0%;
transition-duration: 0.5s;
}
.shrink {
height: 40px;
transition-property: height;
transition-duration: 0.5s;
}
.display {
display: block;
height: var(--navbar-height);
}
h1, p{
font-size: 50px;
color: white;
}
section {
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
border: 5px solid white;
}
.hidden {
opacity: 0;
transition: all 1s;
}
.show {
opacity: 1;
transition: all 1s;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WeSoDev</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="navbar_placeholder" class="navbar-placeholder">
<div id="navbar">
<nav id="nav">
<h2 id="header">header</h2>
</nav>
</div>
</div>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<script src="index.js"></script>
</body>
</html>

var navbar = document.getElementById("navbar");
var nav = document.getElementById("nav");
var placeholder = document.getElementById("navbar_placeholder");
var sticky = navbar.offsetTop;
window.onscroll = function() {myFunction()};
function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
// placeholder.classList.add("display");
nav.classList.add("shrink");
} else {
navbar.classList.remove("sticky");
// placeholder.classList.remove("display");
nav.classList.remove("shrink");
}
}
const options = {threshold: 0.5};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
}, options);
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));
:root{
--background-color: #001728;
--darker-background-color: #000000;
--accent-color: #20cc5b;
--text-color: #FFFFFF;
--navbar-height: 80px;
}
html{
height: 100%;
}
body{
height: 100%;
background-color: var(--background-color);
}
nav{
height: var(--navbar-height);
background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 4px solid var(--accent-color);
transition-property: height;
transition-duration: 0.5s;
}
.navbar {
position:absolute;
left:0;
right:0;
top:0;
}
.navbar-placeholder {
position:relative;
height:80px;
transition: height 0.5s;
}
.text1{
padding: 30px;
color: white;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
}
.disappear {
opacity: 0%;
transition-duration: 0.5s;
}
.shrink {
height: 40px;
transition-property: height;
transition-duration: 0.5s;
}
.display {
display: block;
height: var(--navbar-height);
}
h1, p{
font-size: 50px;
color: white;
}
section {
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
border: 5px solid white;
}
.hidden {
opacity: 0;
transition: all 1s;
}
.show {
opacity: 1;
transition: all 1s;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WeSoDev</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="navbar_placeholder" class="navbar-placeholder">
<div id="navbar">
<nav id="nav">
<h2 id="header">header</h2>
</nav>
</div>
</div>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<section class="hidden">
<h1>Test</h1>
<p>Hello</p>
</section>
<script src="index.js"></script>
</body>
</html>
Read about z-index. You can just put z-index: 2; onto the .sticky class and you should be fine :)

Related

How to not activate or to stop animation on small screen

So i have this animation where there is this a h1 and when i scroll down the image zoom out and the h1 follow the image animation, my problem is that when im on mobile or i resize the screen to tablet or mobile i want the animation on scroll to not activate.
i already tried to use the resize function or if screen is > than but it doesn't work i'm using scrollMagic cdn.
animation
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./Css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body class="contenet">
<div class="overflow-wrap">
<header id="header">
<img src="./Asset/Img/1.png" loading="lazy" alt="" id="hero-ui">
<div class="container container--hero">
<div class="hero__header">
<h1 class="hero-heading">The Webflow Expert.</h1>
</div>
</div>
</header>
</div>
<section class="section section--manifest">
<div class="section-header section-header--intro">
<h2 class="fluid-gradient-heading fluid-gradient-heading--hero cc-en">World-class Webflow<br>sites for ambitious<br>companies.</h2>
</div>
</section>
<script src="./JS/app.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
*::-webkit-scrollbar {
display: none;
}
body {
background-color: #1d1d1f;
color: white;
font-family: Inter, sans-serif;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
#header {
display: flex;
height: 100vh;
align-items: center;
position: sticky;
backface-visibility: hidden;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform-style: preserve-3d;
}
.overflow-wrap {
overflow: hidden;
height: 100%;
}
#hero-ui {
position: relative;
left: 50%;
z-index: 1;
width: 16.9em;
max-width: none;
margin-top: 3.2em;
margin-left: -8.45em;
font-size: 10vw;
opacity: 0;
}
.hero-heading {
will-change: transform, opacity;
animation: fadeIn 0.8s ease;
animation-iteration-count: 1;
animation-fill-mode: backwards;
animation-delay: 0.5s;
font-size: 92px;
}
.container.container--hero {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: auto;
display: flex;
height: 100vh;
max-width: none;
padding-top: 100px;
padding-bottom: 100px;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 2;
}
.section.section--manifest {
padding-top: 100px;
padding-bottom: 160px;
}
.section-header.section-header--intro {
position: relative;
max-width: 1050px;
margin-bottom: 0;
}
.section-header {
width: 90%;
max-width: 980px;
margin-right: auto;
margin-bottom: 142px;
margin-left: auto;
text-align: left;
}
.fluid-gradient-heading.fluid-gradient-heading--hero.cc-en {
font-size: 103px;
}
.fluid-gradient-heading.fluid-gradient-heading--hero {
margin-right: auto;
margin-left: auto;
line-height: 1.05;
text-align: center;
}
.fluid-gradient-heading {
background: linear-gradient(91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-moz-background-clip: text;
-webkit-animation: intro-gradient 10s infinite ease both;
-moz-animation: intro-gradient 10s infinite ease both;
animation: intro-gradient 10s infinite ease both;
}
.fluid-gradient-heading {
margin-top: 0;
padding-top: 8px;
padding-bottom: 8px;
font-size: 92px;
line-height: 1.1;
letter-spacing: -.045em;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 32px;
line-height: 36px;
font-weight: 600;
}
JAVASCRIPT
/*==================== zoom out image ====================*/
let controller = new ScrollMagic.Controller();
let zoomHeader = TweenMax.to("#header", 0.9, { opacity: 1, scale: 0.35, ease: Circ.EaseIn });
let headerZoom = new ScrollMagic.Scene({
triggerElement: "#header",
triggerHook: 0,
duration: "3000ms"
})
.setPin('#header')
.setClassToggle('#header')
.setTween(zoomHeader)
.addTo(controller);
/*==================== smooth link scrooling====================*/
let $root = $('html, body');
$('a[href^="#"]').click(function() {
$root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
/*==================== Change opacity image ====================*/
$(window).scroll(function() {
let scrollTop = $(this).scrollTop();
$('#hero-ui').css({
opacity: function() {
let elementHeight = $(this).height();
return 1 - (elementHeight - scrollTop) / elementHeight;
}
});
});

In your scroll event listener you may check actual device width.
Then you can disable animation when it is mobile.
Smth like
$(window).scroll(function() {
if($(window).width() < 500) return
.....
}
You can apply the same check for click event.
Also it will be good if you handle resize/load events as well.

Javascript Menu : Click on to extend & Click off to shorten

I created a menu for a web project, but I have a problem with the javascript side. I would like to extend the div container if it's clicked. And vice versa, I would like to shorten it if I click everywhere except on it. Actually, the program is able to shorten and extend the div menu but I can't manage the events :
if div is small -> extend it by clicking on it
if div is big -> shorten it by clicking everywhere except on it
There is my program :
const menu = document.querySelector('.wrapper')
const offClick = () => {
menu.classList.toggle('active')
document.removeEventListener('click', offClick)
}
const handleClick = (e) => {
e.stopPropagation()
menu.classList.toggle('.active')
if (menu.classList.contains('.active')){
document.addEventListener('click', offClick)
}
}
menu.addEventListener('click', handleClick)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #10131c;
}
.wrapper{
position: absolute;
width: 105px;
height: 105px;
background-color: #212532;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
transition-delay: 0.8s;
}
.wrapper.active{
width: 300px;
height: 300px;
transition-delay: 0s;
}
.wrapper span{
position: absolute;
width: 10.5px;
height: 10.5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 50%;
transform: translate(calc(18px * var(--x)), calc(18px * var(--y)));
transition: transform 0.5s, width 0.5s, height 0.5s;
background-color: 0.5s;
transition-delay: calc(0.1s * var(--i));
}
.wrapper.active span{
width: 67.5px;
height: 67.5px;
background-color: #333849;
transform: translate(calc(90px * var(--x)), calc(90px * var(--y)))
}
.wrapper span ion-icon{
transition: 0.5s;
font-size: 0em
}
.wrapper.active span ion-icon{
font-size: 2.025em;
color: #fff;
}
.wrapper.active span:hover ion-icon{
color: #d33d32;
filter: drop-shadow(0 0 3px #d33d32)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSite</title>
<link rel="stylesheet" href="styles/style.css" type="text/css">
</head>
<body class="body">
<div class="wrapper">
<span style = "--i:0;--x:-1;--y:0;"><ion-icon name="code-outline"></ion-icon></span>
<span style = "--i:1;--x:1;--y:0;"><ion-icon name="moon-outline"></ion-icon></span>
<span style = "--i:2;--x:0;--y:-1;"><ion-icon name="bulb-outline"></ion-icon></span>
<span style = "--i:3;--x:0;--y:1;"><ion-icon name="chatbubbles-outline"></ion-icon></span>
<span style = "--i:4;--x:1;--y:1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style = "--i:5;--x:-1;--y:-1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style = "--i:6;--x:0;--y:0;"><ion-icon name="ribbon-outline"></ion-icon></ion-icon></span>
<span style = "--i:7;--x:-1;--y:1;"><ion-icon name="rocket-outline"></ion-icon></span>
<span style = "--i:8;--x:1;--y:-1;"><ion-icon name="stats-chart-outline"></ion-icon></span>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<script src="script/script.js"></script>
</body>
</html>
Thank you for your help !

Firstly, note that amending event handlers within an event handler is normally a code smell. There is usually a much better way to do what you need to achieve.
In this case you need to attach each of your event handlers just the once. handleClick() should be attached to the .wrapper so that it expands when clicked, and offClick() should be attached to the document so that it contracts the .wrapper.
const menu = document.querySelector('.wrapper');
const offClick = () => menu.classList.remove('active');
const handleClick = (e) => {
e.stopPropagation();
menu.classList.add('active'); // or .toggle('active')
}
menu.addEventListener('click', handleClick);
document.addEventListener('click', offClick);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #10131c;
}
.wrapper {
position: absolute;
width: 105px;
height: 105px;
background-color: #212532;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
transition-delay: 0.8s;
}
.wrapper.active {
width: 300px;
height: 300px;
transition-delay: 0s;
}
.wrapper span {
position: absolute;
width: 10.5px;
height: 10.5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 50%;
transform: translate(calc(18px * var(--x)), calc(18px * var(--y)));
transition: transform 0.5s, width 0.5s, height 0.5s;
background-color: 0.5s;
transition-delay: calc(0.1s * var(--i));
}
.wrapper.active span {
width: 67.5px;
height: 67.5px;
background-color: #333849;
transform: translate(calc(90px * var(--x)), calc(90px * var(--y)))
}
.wrapper span ion-icon {
transition: 0.5s;
font-size: 0em
}
.wrapper.active span ion-icon {
font-size: 2.025em;
color: #fff;
}
.wrapper.active span:hover ion-icon {
color: #d33d32;
filter: drop-shadow(0 0 3px #d33d32)
}
<body class="body">
<div class="wrapper">
<span style="--i:0;--x:-1;--y:0;"><ion-icon name="code-outline"></ion-icon></span>
<span style="--i:1;--x:1;--y:0;"><ion-icon name="moon-outline"></ion-icon></span>
<span style="--i:2;--x:0;--y:-1;"><ion-icon name="bulb-outline"></ion-icon></span>
<span style="--i:3;--x:0;--y:1;"><ion-icon name="chatbubbles-outline"></ion-icon></span>
<span style="--i:4;--x:1;--y:1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style="--i:5;--x:-1;--y:-1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style="--i:6;--x:0;--y:0;"><ion-icon name="ribbon-outline"></ion-icon></span>
<span style="--i:7;--x:-1;--y:1;"><ion-icon name="rocket-outline"></ion-icon></span>
<span style="--i:8;--x:1;--y:-1;"><ion-icon name="stats-chart-outline"></ion-icon></span>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>

First of all it looks really nice :)
As far as the javascript code you could keep it simple by adding the event listener on the whole body and checking the target of your click event has a parent with a 'wrapper' class, by using the closest method.
document.addEventListener('click',(event)=>{
if(event.target.closest(".wrapper")){
menu.classList.add('active')
}else{
menu.classList.remove('active')
}
})

Why my hover doesn't work on other elements inside the div?

I am trying to build a card which when it is not hovered, you can see only the image.
When the image is hovered, it should grow up and a div pops to the right of the image presenting some information.
For some reason, when I hover the image, everything works fine. But when my mouse hovers to the div besides it, everything starts to shake as if the hover is not working well.
I've tried to change the hover effect both to the image and the parent div which contains both divs but nothing fixed it.
What should I do?
$(document).ready(function(){
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
const hoverAnimation = (index) => {
console.log('inside add animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
const disableHoverAnimation = (index) => {
console.log('inside remove animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards{
display: flex;
}
.personCard{
display: flex;
margin: 10px;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.63);
border-radius: 10px;
overflow: hidden;
}
.personCard.active{
transform: scale(1.5);
}
.imgCard{
height: 200px;
width: 130px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.imgCard img{
height: 200px;
width: 130px;
}
.personalInfoCard{
background-color: palevioletred;
display: flex;
height: 200px;
width: 0px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -1;
font-size: 14px;
transition: all 0.4s ease-in-out;
}
.personalInfoCard.active{
width: 200px;
display: flex;
z-index: 1;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="personCard-0 personCard" >
<div class="imgCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="personalInfoCard">
<p>Name: Rand name</p>
<p>Age: Rand age</p>
<p>Job: Rand job</p>
<p>Study: Rand proffesion</p>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>

Change your target to be the card container so that when it grows, you'll still be hovering over it. As it is now, your target is the image - which when it animates left triggers the mouseout
$(document).ready(function() {
document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
$(document).ready(function() {
document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
const hoverAnimation = (index) => {
console.log('inside add animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
const disableHoverAnimation = (index) => {
console.log('inside remove animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards {
display: flex;
}
.personCard {
display: flex;
margin: 10px;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.63);
border-radius: 10px;
overflow: hidden;
}
.personCard.active {
transform: scale(1.5);
}
.imgCard {
height: 200px;
width: 130px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.imgCard img {
height: 200px;
width: 130px;
}
.personalInfoCard {
background-color: palevioletred;
display: flex;
height: 200px;
width: 0px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -1;
font-size: 14px;
transition: all 0.4s ease-in-out;
}
.personalInfoCard.active {
width: 200px;
display: flex;
z-index: 1;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="personCard-0 personCard">
<div class="imgCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="personalInfoCard">
<p>Name: Rand name</p>
<p>Age: Rand age</p>
<p>Job: Rand job</p>
<p>Study: Rand proffesion</p>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>

Change navbar after scrolling the page [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I wanted to know how I can change the navbar after scrolling the page.
Starting situation, as soon as the user arrives on the site he finds a navbar, immediately as soon as he scrolls the page the other navbar appears as happens in this theme: https://kendall.qodeinteractive.com/manicure/

There are multiple methods to do this, but the simplest is to use two navbars.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<style>
*,
*:before,
*:after {
margin: 0;
font-family: sans-serif;
}
section {
width: 100%;
height: 2500px;
}
.header {
box-sizing: border-box;
position: absolute;
top: 0;
width: 100%;
height: 400px;
text-align: center;
background-color: #33f;
color: #fff;
}
.navigation {
box-sizing: border-box;
position: fixed;
width: 100%;
height: 60px;
background-color: #ff4d4d;
color: #fff;
padding: 20px 50px;
transition: all 0.5s ease;
transform: translateY(-100%);
z-index: 9999;
}
.navigation--relative {
position: relative;
top: 0px;
transform: translateY(0%);
}
.navigation.is-fixed {
position: fixed;
width: 100%;
transform: translateY(0%);
}
</style>
</head>
<body>
<section>
<nav class='navigation'>
<div class='navigation__title'><h1>Navbar 1</h1></div>
</nav>
<header class='header header-content'>
<nav class='navigation navigation--relative'>
<div class='navigation__title'><h1>Navbar 2</h1></div>
</nav>
<h1>Content</h1>
</header>
</section>
<script>
function stickyElement(e) {
var header = document.querySelector('.header');
var headerHeight = getComputedStyle(header).height.split('px')[0];
var navbar = document.querySelector('.navigation');
var scrollValue = window.scrollY;
if (scrollValue > headerHeight) {
navbar.classList.add('is-fixed');
} else if (scrollValue < headerHeight) {
navbar.classList.remove('is-fixed');
}
}
window.addEventListener('scroll', stickyElement);
</script>
</body>
</html>
JSFiddle demo

Here is a working example of what I think you are attempting to achieve. You were almost there other than some styling and a minor tweak to JS.
JSFiddle Working Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<style>
*,
*:before,
*:after {
margin: 0;
font-family: sans-serif;
}
body {
background-color: brown;
top: 0;
min-height: 100vh;
width: 100vw;
}
section {
width: 100%;
height: 2500px;
}
.header {
box-sizing: border-box;
position: absolute;
top: 20px;
width: 80%;
left: 10%;
height: auto;
text-align: center;
background-color: #33f;
color: #fff;
}
.navigation {
box-sizing: border-box;
position: fixed;
width: 100%;
height: 60px;
background-color: #ff4d4d;
color: #fff;
padding: 20px 50px;
transition: all 0.5s ease;
transform: translateY(-100%);
z-index: 9999;
}
.navigation--relative {
position: relative;
top: 0px;
transform: translateY(0%);
}
.content {
position: relative;
top: 100px;
width: 80%;
left: 10%;
height: 100%;
background-color: purple;
}
.navigation.is-scrolled {
position: fixed;
background-color: green;
width: 100%;
transform: translateY(0%);
}
</style>
</head>
<body>
<section>
<nav class='navigation'>
<div class='navigation__title'><h1>Navbar 2</h1></div>
</nav>
<header class='header header-content'>
<nav class='navigation navigation--relative'>
<div class='navigation__title'><h1>Navbar 1</h1></div>
</nav>
</header>
<div class="content">
<h1>Content</h1>
</div>
</section>
<script>
function stickyElement(e) {
var header = document.querySelector('.header');
var headerHeight = getComputedStyle(header).height.split('px')[0];
var navbar = document.querySelector('.navigation');
var scrollValue = window.scrollY;
if (scrollValue > 101) {
navbar.classList.add('is-scrolled');
} else if (scrollValue < 100) {
navbar.classList.remove('is-scrolled');
}
}
window.addEventListener('scroll', stickyElement);
</
script>
</body>
</html>

Actually this theme has 2 navbar, using ScrollTop in Jquery to catch event scroll then use hide the first navbar and show the 2 fixed navbar.

image can not show in my page

<!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">
<title>Document</title>
<style>
*{margin: 0;padding: 0;list-style: none;}
.container{
width: 560px;
height: 380px;
margin: 50px auto 0;
border: 1px solid gray;
position: relative;
}
.container a{
position:absolute;
top: 50%;
width:30px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
text-decoration: none;
background: gray;
color: #000;
}
.container a.left{
left: -30px;
}
.container a.right{
right: -30px;
}
ul{
width: 100%;
height: 100%;
display: flex;
}
ul li{
flex: 1;
transform-style: preserve-3d;
position: relative;
transition: all 1s;
}
ul li:nth-child(2){
transition: all 1s 0.1s;
}
ul li:nth-child(3){
transition: all 1s 0.2s;
}
ul li:nth-child(4){
transition: all 1s 0.3s;
}
ul li>div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.first{
background: url(D:\mylife\front end_projects\css\img\1.jpg) no-repeat;
transform: rotateX(0deg) translateZ(190deg);
}
.scent{
background: url(D:\mylife\front end_projects\css\img\2.jpg) no-repeat;
transform: rotateX(-90deg) translateZ(190deg);
}
.three{
background: url(D:\mylife\front end_projects\css\img\3.jpg) no-repeat;
transform: rotateX(-180deg) translateZ(190deg);
}
.four{
background: url(D:\mylife\front end_projects\css\img\4.jpg) no-repeat;
transform: rotateX(90deg) translateZ(190deg);
}
ul li:nth-child(2)>div{
background-position: -140px 0;
}
ul li:nth-child(3)>div{
background-position: -280px 0;
}
ul li:nth-child(4)>div{
background-position: -420px 0;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="first"></div>
<div class="scent"></div>
<div class="three"></div>
<div class="four"></div>
</li>
<li>
<div class="first"></div>
<div class="scent"></div>
<div class="three"></div>
<div class="four"></div>
</li>
<li>
<div class="first"></div>
<div class="scent"></div>
<div class="three"></div>
<div class="four"></div>
</li>
<li>
<div class="first"></div>
<div class="scent"></div>
<div class="three"></div>
<div class="four"></div>
</li>
</ul>
<
>
</div>
<script type="text/javascript">
(function(window){
var btn = document.querySelectorAll("a");
var lis = document.querySelectorAll("li");
var num = 0;
var flog = true;
// 左右按钮点击
btn[1].onclick = function(){
lunbo(1);
};
btn[0].onclick = function(){
lunbo(0);
};
lis[lis.length - 1 ].addEventListener("transitionend", function(){
flog = true;
}, false);
// 自动播放
var timer = null;
timer = setInterval(function(){
lunbo(1);
}, 3000);
var demo = document.querySelector(".container");
demo.onmouseover = function(){
clearInterval(timer);
};
demo.onmouseout = function(){
timer = setInterval(function(){
lunbo(1);
}, 3000);
};
function lunbo(index){
if(flog){
flog = false;
if(index){
num++;
}else{
num--;
};
for( i = 0 ; i < lis.length ; i++ ){
lis[i].style.transform = "rotateX("+num*90+"deg)";
};
};
}
})(window)
</script>
</body>
</html>
Can you tell me something that I did wrong?Here is what the page show:
4 images all can not show in browser.How can I deal with it?Is the path wrong?

Remove the reference to the D:// drive and make the paths either relative to the location of your html file or serve them over http for absolute paths. Example:
.first{
/* Relative */
background: url(/css/img/1.jpg) no-repeat;
/* Absolute */
background: url(http://mywebserver.dev/css/img/1.jpg) no-repeat;
}

Develop Reference

JavaScript is the programming language of the Web.

Intersection Observer makes text overlap with header - javascript

Related

How to not activate or to stop animation on small screen

Javascript Menu : Click on to extend & Click off to shorten

Why my hover doesn't work on other elements inside the div?

Change navbar after scrolling the page [closed]

image can not show in my page

Categories

Resources