How can I use Jquery to make a css array?
With Jquery I am breaking a paragraph apart to animate each word individually through an array. Now I would like to us the same array to allocate a .css to the individual words. How do I set this up in…
element "pre" not detected by javascript – Html
I was trying to follow a tutorial by Kevin Powell (https://youtu.be/Z-3tPXf9a7M) and I ran into an error right at the end! TT my query selector is returning null even when I know that the element is in my html page.…
Javascript – How do I keep the size of the header fixed and animate the title with a flip?
I'm a beginner and I wanted to replicate this site as a personal project: https://olhauzhykova.com/ I want the header section to remain the same size while the title changes. Also could anyone suggest how I can animate a top-down flip…
Transition doesn’t work in React (CRA) app – CSS
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…
CSS transform close up effect
I'm building a slide using Swiper and need some help styling the active slide. Currently, the slides are set at a scale of .75, and the active slide is set at 1, resulting in a close-up effect. However, I am…
How would I detect when an input box is unfocused – CSS
I need to know when an input box is unfocused, but I can't figure out how to. I HAVE been trying to use input:not(:focus), but it doesn't work for me. Here is a video of that happening. If you don't…
Why is the logo not spinning forever? – CSS
TSX: function Content() { return ( <> <main id="main"> <img src="/vite.svg" id="logo" /> </main> </> ); } export default Content; CSS: :root { font-family: sans-serif, Arial !important; } #main #logo { animation-name: spin; } @keyframes spin { from { transform:…
How to change a css after selector for a specific id – Html
I am trying to change the code such that when I hover on #btnSaveChanges, it will change with background color blue instead of black. Similar with #btnLogout. HTML <button id="btnSaveChanges" className="button-57" onClick={handleSave}> <span>Save</span> <span>Save</span> </button> <button id='btnLogout' className="button-57" onClick={handleLogout}> <span>Logout</span>…
How to animate an element sliding out of the page? – Html
I have an element positioned at the bottom of the page, and I want to animate it sliding out of view. In my implementation, the element is not actually vanishing, but rather just sliding down, such that if you scroll…
css animate rotate property as linear transition
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…