CSS changes in scrolling but at scroll speed
I want to make the usual "scrollable title changes" Right now the "change" animation is pure CSS3 animation, which means the animation runs on its own, but I want it to run at the same time as the scroll speed.
Right now:
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>100){
$("#header").removeClass("large").addClass("small");
} else{
$("#header").removeClass("small").addClass("large");
}
});
</script>
This is what I did (and you can see why I want to bind the animation / scroll): http://thomasmaier.me/beispiel/
This is an example of what I want: http://www.apple.com/imac-with-retina/ . (you will have to wait a bit until the huge wallpaper appears. When you scroll, the css changes at the same speed as the scroll).
How can I do this (using jQuery)? (I'm not a professional) Or do you have a better, nicer solution?
The best
Thomas
source to share
Add an HTML attribute (onscroll) that ever the parent block will do your scrolling to.
// HTML BLOCK
<main onscroll = myfunction(event) </main> //make sure you pass the event parameter
// JS BLOCK
function myfunction(e){
window.MainBlock = e.target; //set event element to a variable
window.ScrollVert = e.scrollY; //live feed of vertical scroll position
//add simple if statement based on values to change zoom value based on the scrollY.
MainBlock.style.zoom = "100%"
}
//CSS BLOCK
.main {
zoom: 150%;
}
source to share
To reproduce a similar effect with a Mac retina webpage, I would try to catch the function event, and instead of animating the logo ("Neue Liberale") with classes, I would adjust its size and only allow the window to scroll if the logo size was reduced to a certain size.
For example, your logo is 442 pixels wide on page load, let's say you want to shrink it 25% before the class animates and allow the user to scroll down.
CSS
html.noscroll,
body.noscroll {
overflow-y:hidden;
}
JS:
$(document).ready(function() {
$("hmtl, body").addClass("noscroll");
// Storing variables under window so they can be accessed by other scripts as well
window.logoWidth = $("#logo").width();
window.animated = false;
// 'animateOnce' Will run the logo animation only once if set to true
window.animateOnce = false;
});
$(document).on("mousewheel", function (e) {
var switchClass = function() {
$("html, body").removeClass("noscroll");
if ($(document).scrollTop() > 10) {
$("#logo").removeAttr("style");
$("#header").removeClass("large").addClass("small");
} else {
$("#header").removeClass("small").addClass("large");
}
};
if( e.originalEvent.wheelDeltaY > 0 ) {
switchClass();
return true;
} else {
var animate = window.animated;
if( !animate ) {
var targetW = window.logoWidth * 0.75,
currW = $("#logo").width(),
// You can seed the animation up or down by changing the 'increment' (the higer the faster)
increment = 0.20;
if( currW > targetW ) {
$("#logo").width( currW - (currW * increment) );
return false;
} else {
if( window.animateOnce )
window.animated = true;
switchClass();
return true;
}
} else {
switchClass();
}
}
});
JSFiddle:
Here's a JSFiddle for reference.
source to share