Сжатие изображения при прокрутке

ProgramBox

Сжатие изображения при прокрутке

Post author:admin
Запись опубликована:18 февраля, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

В настоящее время я создаю небольшой сайт и хотел бы, чтобы логотип уменьшался при прокрутке страницы вниз.

В настоящее время, как это работает, заголовок уменьшается в размере, но логотип остается того же размера.

Как мне исправить это, чтобы оно также уменьшало изображение?

Демонстрация: https://jsfiddle.net/LhwvLgvj/

 /*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\s )"   className   "(\s |$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className   ' '   c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' amp;amp; define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );
/**
 * cbpAnimatedHeader.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpAnimatedHeader = (function() {

    var docElem = document.documentElement,
        header = document.querySelector( '.cbp-af-header' ),
        didScroll = false,
        changeHeaderOn = 1; // this is initially set to 300

    function init() {
        scrollPage();
        window.addEventListener( 'scroll', function( event ) {
            if( !didScroll ) {
                didScroll = true;
                setTimeout( scrollPage, 250 );
            }
        }, false );
    }

    function scrollPage() {
        var sy = scrollY();
        if ( sy >= changeHeaderOn ) {
            classie.add( header, 'cbp-af-header-shrink' );
        }
        else {
            classie.remove( header, 'cbp-af-header-shrink' );
        }
        didScroll = false;
    }

    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }

    init();

})();

 body {
  background:skyblue
}

.cbp-af-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #f6f6f6;
	z-index: 10000;
	height: 200px;
	overflow: hidden;
	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	transition: height 0.3s;
}

.cbp-af-header .cbp-af-inner {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1.875em;
}

.cbp-af-header h1,
.cbp-af-header nav {
	display: inline-block;
	position: relative;
}

 /* We just have one-lined elements, so we'll center the elements with the line-height set to the height of the header */
.cbp-af-header h1,
.cbp-af-header nav a {
	line-height: 200px;
}

.cbp-af-header h1 {
	text-transform: uppercase;
	color: #333;
	letter-spacing: 4px;
	font-size: 4em;
	margin: 0;
	float: left;
}

.cbp-af-header nav {
	float: right;
}

.cbp-af-header nav a {
	color: #aaa;
	font-weight: 700;
	margin: 0 0 0 20px;
	font-size: 1.4em;
}

.cbp-af-header nav a:hover {
	color: #333;
}

/* Transitions and class for reduced height */
.cbp-af-header h1,
.cbp-af-header nav a {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.cbp-af-header.cbp-af-header-shrink {
	height: 90px;
}

.cbp-af-header.cbp-af-header-shrink h1,
.cbp-af-header.cbp-af-header-shrink nav a {
	line-height: 90px;
}

.cbp-af-header.cbp-af-header-shrink h1 {
	font-size: 2em;
}

/* Example Media Queries */
@media screen and (max-width: 55em) {
	
	.cbp-af-header .cbp-af-inner {
		width: 100%;
	}

	.cbp-af-header h1,
	.cbp-af-header nav {
		display: block;
		margin: 0 auto;
		text-align: center;
		float: none;
	}

	.cbp-af-header h1,
	.cbp-af-header nav a {
		line-height: 115px;
	}

	.cbp-af-header nav a {
		margin: 0 10px;
	}

	.cbp-af-header.cbp-af-header-shrink h1,
	.cbp-af-header.cbp-af-header-shrink nav a {
		line-height: 45px;
	}

	.cbp-af-header.cbp-af-header-shrink h1 {
		font-size: 2em;
	}

	.cbp-af-header.cbp-af-header-shrink nav a {
		font-size: 1em;
	}
}

@media screen and (max-width: 32.25em) {
	.cbp-af-header nav a {
		font-size: 1em;
	}
}

@media screen and (max-width: 24em) {
	.cbp-af-header nav a,
	.cbp-af-header.cbp-af-header-shrink nav a {
		line-height: 1;
	}
}

 <div class="cbp-af-header">
				<div class="cbp-af-inner">
          <img src="http://placehold.it/600x200">
        </div>
</div>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>
<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>
<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

<p>
test
</p>

1. Попробуйте добавить height:100% к вашему img и его родительскому

2. @DenisSheremet Я пробовал это здесь, но безуспешно: jsfiddle.net/LhwvLgvj/1

3. Обновил мой комментарий

4. @DenisSheremet Оооочень приятно! Можете ли вы добавить в качестве ответа, и я поставлю зеленую галочку 🙂

Ответ №1:

Вы должны добавить height:100% как к своему img , так и к родительскому. Ваш код не работает, потому img что по умолчанию имеет height исходный файл изображения, а не его cotainer.

Ответ №2:

Вы можете сделать это, добавив несколько вещей. Прежде всего, сделайте заголовки inner div, чтобы высота заголовка с:

 .cbp-af-header .cbp-af-inner {
  height: 100%; /* THIS ADDED */
  width: 90%;
  max-width: 69em;
  margin: 0 auto;
  padding: 0 1.875em;
}

Затем сделайте так, чтобы изображение также занимало высоту заголовка с помощью этого:

 .cbp-af-header .cbp-af-inner img {
  width: auto;
  height: 100%;
}

Это самый простой пример того, как вы можете масштабировать изображение. Если вы хотите, чтобы оно оставалось определенной ширины, масштаба и т.д., вам нужно будет сделать еще пару вещей, и есть много вариантов, которые также зависят от ваших потребностей.