Animated resize making logo image larger on scroll up not working

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>


<style>
#logo {
  width:100%;
  margin:0 auto;
  position: fixed;
 
  }
  
 #content {
  width:100%;
  margin:0 auto;
  } 
  
  header {
  	width: 100%;
 	  padding: 30px 0;
	  background: #000;
  	border-bottom: 1px solid #fff;
  	/* animation magic */
  	-webkit-transition: all 0.4s ease-in-out;
  	-moz-transition: all 0.4s ease-in-out ;
  	z-index: 9999;
 	  top: 0;
  	position: fixed;
}

.shrink {
  	padding: 0;
}
  

	
.shrink img { max-width: 150px; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

</head>
<body>
<div id="logo">
<header><img src="https://www.computerhope.com/cdn/computer-hope.jpg"></header>
</div>
<script>

	

$(document).on("scroll", function(){
		if
      ($(document).scrollTop() > 50){
		  $("header").addClass("shrink");
		}
		else
		{
			$("header").removeClass("shrink");
		}
	});


</script>
<div id="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

</div>
</body>
</html>

Here’s a demo of what I’m trying to do:

http://dexydemo.com/demo/

Notice when you scroll back up and the header height grows, the logo abuptly (without animation) grows larger. I want to figure out why it is not animating the logo size on scroll up

It’s probably this. You are using some old vendor prefixes, but you don’t have the version without the prefix. You could probably drop those altogether now.

I also recommend that you validate your code, there are a few errors in there.

Why are you using this doctype declaration, then using html5 elements like header?

1 Like

Hi there jjsmithaz12 ,

I do not use “jQuery” at all and even if I did then I
would not use it for something as basic as this. :unhappy:

Sledgehammer, crack, and egg come to mind. :rolleyes:

As for your problem you need to add but also
remove classes. :winky:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
html, body {
    height: 100%;
    margin: 0 0.5em;
 }
body {
    height: 150%; /* this is only for  scroll testing  */
    background-color: #f0f0f0;
 }
#header {
    position: fixed; 
    top: 0;
    left: 0;
  	z-index: 9999;
  	width: 100%;
  	border-bottom: 0.062em solid #fff;
	background-color: #000;
 }
#header img {
    display: block;
    height: auto;
 }
.grow {
 	padding: 1.8745em 0;
    transition: 0.5s ease-in-out; 
 }
.grow img { 
    width: 25.75em; 
    transition: 0.5s ease-in-out; 
 }
.shrink {
  	padding: 0;
    transition: 0.5s ease-in-out ;
 }
.shrink img { 
    width: 9.375em; 
    transition: 0.5s ease-in-out; 
 }
</style>
</head>
<body> 
 <div id="header" class="grow">
  <img  src="https://www.computerhope.com/cdn/computer-hope.jpg" width="412" height="82" alt="logo">
 </div>
<script>
(function() {
   'use strict';
   var he = document.getElementById('header');
   var startShrink = 50;
   window.addEventListener('scroll',
      function() {
         if( window.pageYOffset > startShrink ) {
             he.classList.remove( 'grow' );  
             he.classList.add( 'shrink' );           
          }
         else {
             he.classList.remove( 'shrink' );  
             he.classList.add( 'grow' ); 
          }
       },false);
 }());
</script>
</body>
</html>

coothead

1 Like

Because you have no animation rules for the default state. You are only adding the animation rules when the shrink class is added so when you remove the class there is no animation.

Add this to start with and it will work:

.logopad img{
    transition: all .3s ease-in-out;
}

Now it will scale up and down.

2 Likes

Thanks PaulOB, your suggestion works like a charm!

1 Like

Thanks for the advice coothead, I will keep that in mind.

I noticed one more issue. Testing in IE11, the image height does not resize/transform smaller upon scroll.

http://dexydemo.com/demo

By the way, the logo image is actually an SVG file, which seems to be the problem in IE 11. I tested a PNG file and that worked fine, but I really would like to be able to use an SVG file.

Just found the solution for SVG files scaling properly in IE 11, just add the following to CSS:

The following will target all img tags containing an SVG file, in IE6+ (only IE9+ support SVG files, however).

/*

  • Let’s target IE to respect aspect ratios and sizes for img tags containing SVG files
  • [1] IE9
  • [2] IE10+
    /
    /
    1 /
    .ie9 img[src$=“.svg”] {
    width: 100%;
    }
    /
    2 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    img[src$=“.svg”] {
    width: 100%;
    }
    }

Hi there jjsmithaz12,

this works OK in IE11, with none of that messing about…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
html, body {
    height: 100%;
    margin: 0 0.5em;
 }
body {
    height: 150%; /* this is only for  scroll testing  */
    background-color: #f0f0f0;
 }
#bar {
    position: fixed;
    top: 0;
    left: 0;
  	width: 100%;
    min-height: 2.5em;
    background-color: #008ac6;
 }
#header {
    position: fixed; 
    top: 2.5em;
    left: 0;
  	z-index: 9999;
  	width: 100%;
    border-bottom: 0.162em solid #999;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.4);
 }
#header img {
    display: block;
    height: auto; 
    margin-left: 1.55em;
 }
.grow {
 	padding: 1.25em 0;
    transition: 0.3s ease-in-out; 
 }
.grow img { 
    width: 16.8125em; 
    transition: 0.3s ease-in-out; 
 }
.shrink {
  	padding: 0.625em 0;
    transition: 0.3s ease-in-out ;
 }
.shrink img { 
    width: 9.375em; 
    transition: 0.3s ease-in-out; 
 }
</style>
</head>
<body> 
 <div id="bar"></div>
  <div id="header" class="grow">
   <img src="http://dexydemo.com/demo/picts/logo.svg" width="552" height="188" alt="logo">
  </div>
<script>
(function() {
   'use strict';
   var he = document.getElementById('header');
   var startShrink = 50;
   window.addEventListener('scroll',
      function() {
         if( window.pageYOffset > startShrink ) {
             he.classList.remove( 'grow' );  
             he.classList.add( 'shrink' );           
          }
         else {
             he.classList.remove( 'shrink' );  
             he.classList.add( 'grow' ); 
          }
       },false);
 }());
</script>
</body>
</html>

coothead

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.