Check out my work on jsfiddle I understand that the image may not be visible, but I'll do my best to describe it. The header smoothly animates as I scroll down, but the image abruptly changes size instead of smoothly resizing. I want it to gradually decrease in size along with the header for a smoother effect.
I attempted to add transition: all 0.8s ease; to the header-image class, but it did not work as expected.
Any assistance would be greatly welcomed.
HTML:
The default value for the height of the image was not configured.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header').addClass("scroll");
$('.header-image').addClass("header-image-scroll");
} else {
$('header').removeClass("scroll");
$('.header-image').removeClass("header-image-scroll");
}
});
});body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
}
#Page {
padding-top: 100px;
}
header {
background-color: #1c1c1b;
font-family: 'Century gothic';
font-size: 180%;
height: 100px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
overflow: hidden;
transition: all 0.8s ease;
}
.header-image {
align-content: center;
height: 200px;
transition: all .5s ease;
}
.scroll {
height: 80px;
font-size: 180%;
}
.header-image-scroll {
height: 80px;
transition: all .5s ease;
}
#center-column {
background-color: white;
width: 1080px;
height: 100%;
box-shadow: 0px 1px 5px #888888;
margin: 0 auto;
padding-bottom: 10px;
}
nav {
}
nav ul {
text-align: center;
display: table;
margin: auto;
}
nav li {
display: table-cell;
vertical-align: middle;
/*display: inline;*/
padding: 0 10px;
}
nav li a {
color: #009641;
text-decoration: none;
}
nav li a:hover {
color: #e2030e;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<body id="chesters">
<header>
<nav>
<ul>
<li><a href="Menu.html">Menu</a></li>
<li><a href="Burritos.html">Burritos</a></li>
<li><a href="index.html"><img class="header-image" src="http://wallpaper-gallery.net/images/image/image-13.jpg"></a></li>
<li><a href="Contact.html">Contact Us</a></li>
<li><a href="About.html">About Us</a></li>
</ul>
</nav>
</header>
<div id="Page">
[Content Removed for Brevity]
<p>
</div> <!-- Page -->
</body>It's important to note that in addition to adding transition:all 0.8s ease to achieve the desired effect, setting the initial height of the element is also necessary.
This is because the default value of height is set to auto, making it impossible to animate smoothly.
Check out the demo here: https://example.com/demo
I need help extracting the value of a span using a CSS selector soup = BeautifulSoup("<body><main><div class='rentalprice'><span>3.000</span></div></main></body>") pagecontent = soup.find( ...
Currently, I am utilizing the OGRE web client to convert GeoJSON text data into ESRI shapefiles by making a POST request with Ajax. var data = { "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "Point", "coord ...
Have you ever wondered if it's possible to display titles for the x and y axes on a Flot graph? Take a look at the following code snippet: $.plot($("#placeholder_1w"), [d], { series: { lines: { show: true, fill: false, fillColor: "red" } ...
`I have a webpage that showcases testimonials. I am looking to only display the testimonials with a "status" of "1" in my database. How can I quickly update the "status" column from "0" to "1" right after the admin clicks on update? I am also incorporati ...
I am currently working on creating a progress bar similar to those commonly found in checkout processes. One issue I have encountered is that the borders between the arrows appear transparent, and the entire design needs to be responsive. So far, I have m ...
I am facing an issue with my modal wizard. The width of the first modal is perfect, but when I navigate to the second and third modals by pressing next, they automatically take on a fixed width size that I need to modify. I have tried declaring the width ...
Struggling with incorporating HTML div tags into a booking system. I have the user input fields for city, date, and pet type set up, but getting lost when it comes to passing this information to a SQL database using PHP. Can someone provide guidance on how ...
I recently implemented a More/Less toggle button using resources from this website. The functionality is there, but I now want to add a smooth transition effect. When the user clicks on "read more," I would like the hidden content to gradually appear, and ...
I am attempting to align 4 divs next to each other within a parent div at specific positions. The proposed div structure is as follows (referred to as the maindiv): <div> <div>1</div> <div>2</div> <div>3< ...
Do we have to create a pull request, or is it possible to achieve under an installed NuGet package? ...
Welcome! I am a newcomer to Angular and would greatly appreciate any assistance. The parent component of my picker has the ability to create various rules for each option. However, these rules are dynamic and can change frequently. I need to ensure that ...
I'm currently facing an issue with aligning elements and spacing them correctly in my project. How can I resolve this using only the col class and Bootstrap 4, without resorting to CSS? I have attempted various margin spacing options like ml-md-4 and ...
I am looking to populate a few select menus using JSON data retrieved from my PHP script. Each select menu should display different values based on the selections made in the other menus. While I understand how to clear and fill a select menu using JavaScr ...
Is there a more idiomatic JavaScript solution for this situation: const addTuple = (map, tuple) => { map[tuple[0]] = tuple[1]; return map; }; I am looking to refactor this example (refer to finance3.js) in a more functional style: angular.module(&apo ...
When my index.html page starts, it plays a full-screen video. Once the video ends, a button appears on the screen. Clicking the button redirects to another page. However, I am facing an issue with the "autoplay muted" property as it mutes the audio. I wa ...
Currently, I am working on a new feature that involves rendering images from servers. In the process of aligning these images, I noticed an excessive amount of white space due to loading images with broken links. https://i.stack.imgur.com/jO8BR.png Here ...
I am facing a challenge while trying to remove a user in redux. The issue arises when I use the map function in the reducer.js file and encounter a 'state.users.map is not a function' error. Upon investigation, I realized that the array consists ...
I created a webpage that includes a header and a table at this link Can anyone help me align the left border of the table with the left border of the header image? I'm not sure how to do it. Appreciate any assistance! ...
Currently, I am following a course where I have implemented a simple login form inside the navigation bar: <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary"> <div class="container"> ...
I'm struggling to resize my background image using media queries. Can anyone offer suggestions or solutions? I've tried applying the media query for my background image like I do with other elements, and it's not working properly. The issue ...