1
Ich möchte meine Header Bildgröße auf 50% Breite/Höhe verkleinern, sobald ich scrollte über die Spitze davon. Vorzugsweise würde es einen Übergang geben und nicht ein plötzlicher Sprung zur Hälfte der Größe sein.Schrumpfbild auf Bildlauf - jQuery
Ich habe etwas unten zusammengestellt, aber der Übergang passiert zu spät. Wie kann ich das beheben, sobald ich es passiert habe?
/*!
* 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' && define.amd) {
// AMD
define(classie);
} else {
// browser global
window.classie = classie;
}
})(window);
/**
* cbpAnimatedHeader.min.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 b=document.documentElement,g=document.querySelector(".cbp-af-header"),e=false,a=300;function f(){window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"cbp-af-header-shrink")}else{classie.remove(g,"cbp-af-header-shrink")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})();body {
text-align:center;
padding:0;
margin:0;
}
img {
padding-top:60px
}
.cbp-af-header {
\t position: fixed;
\t top: 0;
\t left: 0;
\t width: 100%;
\t background: #f6f6f6;
\t z-index: 10000;
\t height: 200px;
\t overflow: hidden;
\t -webkit-transition: height 0.3s;
\t -moz-transition: height 0.3s;
\t transition: height 0.3s;
}
.cbp-af-header .cbp-af-inner {
\t width: 90%;
\t max-width: 69em;
\t margin: 0 auto;
\t padding: 0 1.875em;
}
.cbp-af-header h1,
.cbp-af-header nav {
\t display: inline-block;
\t 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 {
\t line-height: 200px;
}
.cbp-af-header h1 {
\t text-transform: uppercase;
\t color: #333;
\t letter-spacing: 4px;
\t font-size: 4em;
\t margin: 0;
\t float: left;
}
.cbp-af-header nav {
\t float: right;
}
.cbp-af-header nav a {
\t color: #aaa;
\t font-weight: 700;
\t margin: 0 0 0 20px;
\t font-size: 1.4em;
}
.cbp-af-header nav a:hover {
\t color: #333;
}
/* Transitions and class for reduced height */
.cbp-af-header h1,
.cbp-af-header nav a {
\t -webkit-transition: all 0.3s;
\t -moz-transition: all 0.3s;
\t transition: all 0.3s;
}
.cbp-af-header.cbp-af-header-shrink {
\t height: 90px;
}
.cbp-af-header.cbp-af-header-shrink h1,
.cbp-af-header.cbp-af-header-shrink nav a {
\t line-height: 90px;
}
.cbp-af-header.cbp-af-header-shrink h1 {
\t font-size: 2em;
}
/* Example Media Queries */
@media screen and (max-width: 55em) {
\t
\t .cbp-af-header .cbp-af-inner {
\t \t width: 100%;
\t }
\t .cbp-af-header h1,
\t .cbp-af-header nav {
\t \t display: block;
\t \t margin: 0 auto;
\t \t text-align: center;
\t \t float: none;
\t }
\t .cbp-af-header h1,
\t .cbp-af-header nav a {
\t \t line-height: 115px;
\t }
\t .cbp-af-header nav a {
\t \t margin: 0 10px;
\t }
\t .cbp-af-header.cbp-af-header-shrink h1,
\t .cbp-af-header.cbp-af-header-shrink nav a {
\t \t line-height: 45px;
\t }
\t .cbp-af-header.cbp-af-header-shrink h1 {
\t \t font-size: 2em;
\t }
\t .cbp-af-header.cbp-af-header-shrink nav a {
\t \t font-size: 1em;
\t }
}
@media screen and (max-width: 32.25em) {
\t .cbp-af-header nav a {
\t \t font-size: 1em;
\t }
}
@media screen and (max-width: 24em) {
\t .cbp-af-header nav a,
\t .cbp-af-header.cbp-af-header-shrink nav a {
\t \t line-height: 1;
\t }
}<div class="cbp-af-header">
\t \t \t \t <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>
Bitte überprüfen Sie diesen Link: -http: //callmenick.com/post/animated-resizing-header-on-scroll. Wenn Sie wollen, ändern Sie Breite/Höhe wie Sie wollen. –