I want to do a transition when the element gets sticky. But it can't be done with this below code. const content = document.querySelector('.contents'); const initalPos = content.offsetTop; window.addEventListener("scroll", () => { if(content.offsetTop > initalPos) { content.classList.add('stuck'); } else {…
I'm newer to html and I am curious about hover effects currently. I want text on hover to scale up 1.5 for 0.2s. It didn't do anything. It could be an issue with the scss title. I wrote this.. <section…
I need the bottom of the text to be grayed out, and long text to be cut off at a specific height. There's a button that, when clicked, should expand this section. Everything works fine except for the animation that…
I have a widget on my page, which is a span element, styled as follows: span.widget { line-height: 0; font-size: 150%; transition: font-size 1s; } I have JavaScript which modifies its font-size: var widget=document.getElementById('the_widget'); widget.style.fontSize='200%'; If I do this, the…
is it posible, to animate css rotate as linear transition (take start and end points of transition and use them like a keyframes where points go straight forward to their final position)? for example: by default rotation from 1 to…
Can anyone help me to create a translation transition on hover in the div when the cursor moves the previous area position of the div? I have tried: #test { border: 1px solid black; width: 100px; height: 150px; } #test:hover…
I am using translateY to give the button a depth effect using CSS keyframes and then using that keyframe into :hover pseudo state with the help of the animate property. But, it's kind of shifting behind the ::after element. Any…
I have a list of items. When I first load the page, I want them to slide in sequentially in rapid succession and then shrink slightly when they arrive at their final destination -- sort of like what would happen…
I used transition to make the change smooth and it is working, but for the image I couldn't setup well. How can I fix this? I tried this: var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySelector("#lights-on"); lightsOff.style.display = "block"; lightsOn.style.display…
I'm working on a search bar. First, the user will only be able to see the search icon. When the user clicks on the search icon then that search icon gets replaced with a div that contains a new search…