OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

z-index not working on element with smoothscrolling , gSAP

  • Thread starter Thread starter Learning
  • Start date Start date
L

Learning

Guest
I am not able to show the fixed button when scrolling over images, i tried different things but nothing seems to work even if i z-index:999999999999999;

Image uses smooth scrolling with gsap, now sure what should be change or if z-index property doesnt work with transform: translate(-50%, -50%)..... property which changes for image wrapper when scrolling


Code:
const select = e => document.querySelector(e);
const selectAll = e => document.querySelectorAll(e);

const panels = selectAll(".panel")

function startAnim() {
  
  panels.forEach((panel, i) => {
    let imageWrappers = panel.querySelectorAll(".col__image-wrap")
    console.log(imageWrappers)
    
    gsap.fromTo(imageWrappers, {
      y: "-30vh"
    }, {
      y: "30vh",
      scrollTrigger: {
        trigger: panel,
        scrub: true,
        start: "top bottom", // position of trigger meets the scroller position
      },
      ease: 'none'
    })
  })
}

function init() {
  startAnim();
}

window.onload = () => init()



const lenis = new Lenis()

lenis.on('scroll', (e) => {
  console.log(e)
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

Code:
.enquire-btn{ background-color: #222; color: #fff; min-width:150px; 
  padding:10px 25px; border-radius: 100px; text-decoration: none; 
  font-weight: normal; font-size: 14px;
  position: -webkit-sticky;
  position: sticky;
  position:fixed;
  z-index:99999999999999999999; 
}
body{background:#fff;}
.header{hight:60px; min-height:60px; background:#fff; ;
}
.h-line{height:1px; background:#000; margin-top:15px; }
.hero-section{margin-top:200px; z-index:20;}
.hs {
  text-transform: uppercase;
  font-family:Overusedgrotesk,sans-serif;
  color:#222;
  font-weight:200;
 letter-spacing: -5px;
font-size: clamp(2.1875rem, 0.9037rem + 5.4054vw, 9.6875rem);
}
.hs:first-child {font-weight:600; padding-right:10px;}


*, .panel, .project {
  padding: 0;
  margin: 0;
}

/* Full width section */
.panel {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 90vh;
  overflow: hidden;
  margin-top: 0vh;
  margin-bottom:0vh;
/*     background-color: red; */
}

/* In charge of setting the height/width/area */
.column {
  flex-basis:100%;
  position: relative;
  overflow: hidden;
}

/* Extra height for the parallax effect */
.col__image-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 160vh;
    background-color: red;
}

/* make sure it covers the total space */
.img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.intro-section{min-height:300px; background:grey; padding:30px 0px;}
.intro-section .section-heading {
  position:relative; withd:100%; padding:30px; 
  color:#fff; font-size:18px;}

Code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.3/cerulean/bootstrap.min.css" rel="stylesheet"/>

<header class="container-fluid text-center header animate__animated animate__fadeIn animate__delay-800ms">
  <div class="row justify-content-evenly vertical-align p-3 ">
    <div class="col-4 align-middle">AHRE</div>
    <div class="col-4 ms-auto">      <a class="enquire-btn animate__animated animate__fadeInUp animate__slower">CONTACT US</a></div>
</div>
    <div class="h-line animate__animated animate__slideInLeft animate__delay-900ms"></div>
  </div>
</header>
<section class="container-fluid hero-section">
  <span class="hs animate__animated animate__fadeInUp animate__delay-1s">The Residences</span>
</section>
<section class="container-fluid section2 p-0">
   <div class="panel panel--1">
    <div class="column">
      <div class="col__image-wrap">
      <img class="img img--1" src="https://assets-global.website-files.com/6594c68e852eed392813f26c/65968d19211871302df255cc_home-img-07.webp" />
    </div>
    </div>
  </div>
 
 
</section>
<section class="intro-section">
  <div> <span class="section-heading">Introduction</span></div>
</section>

<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>

<p>I am not able to show the fixed button when scrolling over images, i tried different things but nothing seems to work even if i z-index:999999999999999;</p>
<p>Image uses smooth scrolling with gsap, now sure what should be change or if z-index property doesnt work with <code>transform: translate(-50%, -50%).....</code> property which changes for image wrapper when scrolling</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const select = e => document.querySelector(e);
const selectAll = e => document.querySelectorAll(e);

const panels = selectAll(".panel")

function startAnim() {

panels.forEach((panel, i) => {
let imageWrappers = panel.querySelectorAll(".col__image-wrap")
console.log(imageWrappers)

gsap.fromTo(imageWrappers, {
y: "-30vh"
}, {
y: "30vh",
scrollTrigger: {
trigger: panel,
scrub: true,
start: "top bottom", // position of trigger meets the scroller position
},
ease: 'none'
})
})
}

function init() {
startAnim();
}

window.onload = () => init()



const lenis = new Lenis()

lenis.on('scroll', (e) => {
console.log(e)
})

function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}

requestAnimationFrame(raf)</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.enquire-btn{ background-color: #222; color: #fff; min-width:150px;
padding:10px 25px; border-radius: 100px; text-decoration: none;
font-weight: normal; font-size: 14px;
position: -webkit-sticky;
position: sticky;
position:fixed;
z-index:99999999999999999999;
}
body{background:#fff;}
.header{hight:60px; min-height:60px; background:#fff; ;
}
.h-line{height:1px; background:#000; margin-top:15px; }
.hero-section{margin-top:200px; z-index:20;}
.hs {
text-transform: uppercase;
font-family:Overusedgrotesk,sans-serif;
color:#222;
font-weight:200;
letter-spacing: -5px;
font-size: clamp(2.1875rem, 0.9037rem + 5.4054vw, 9.6875rem);
}
.hs:first-child {font-weight:600; padding-right:10px;}


*, .panel, .project {
padding: 0;
margin: 0;
}

/* Full width section */
.panel {
display: flex;
justify-content: center;
align-items: stretch;
height: 90vh;
overflow: hidden;
margin-top: 0vh;
margin-bottom:0vh;
/* background-color: red; */
}

/* In charge of setting the height/width/area */
.column {
flex-basis:100%;
position: relative;
overflow: hidden;
}

/* Extra height for the parallax effect */
.col__image-wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 160vh;
background-color: red;
}

/* make sure it covers the total space */
.img {
object-fit: cover;
width: 100%;
height: 100%;
}

.intro-section{min-height:300px; background:grey; padding:30px 0px;}
.intro-section .section-heading {
position:relative; withd:100%; padding:30px;
color:#fff; font-size:18px;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.3/cerulean/bootstrap.min.css" rel="stylesheet"/>

<header class="container-fluid text-center header animate__animated animate__fadeIn animate__delay-800ms">
<div class="row justify-content-evenly vertical-align p-3 ">
<div class="col-4 align-middle">AHRE</div>
<div class="col-4 ms-auto"> <a class="enquire-btn animate__animated animate__fadeInUp animate__slower">CONTACT US</a></div>
</div>
<div class="h-line animate__animated animate__slideInLeft animate__delay-900ms"></div>
</div>
</header>
<section class="container-fluid hero-section">
<span class="hs animate__animated animate__fadeInUp animate__delay-1s">The Residences</span>
</section>
<section class="container-fluid section2 p-0">
<div class="panel panel--1">
<div class="column">
<div class="col__image-wrap">
<img class="img img--1" src="https://assets-global.website-files...26c/65968d19211871302df255cc_home-img-07.webp" />
</div>
</div>
</div>


</section>
<section class="intro-section">
<div> <span class="section-heading">Introduction</span></div>
</section>

<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script></code></pre>
</div>
</div>
</p>
 

Latest posts

H
Replies
0
Views
1
hohohohoho
H
Top