I am a semi-noob at web dev, however I am either searching with the wrong terms or I am not a very proficient googler.
I am making a one page website and want the effect that when a new section comes into view scrolling down, that the new section will darken. I can achieve darkening on mouse over, but I want the currently visible section to always remain dark until navigating away from it, not only when the mouse is hovering over the section.
I am thinking it may have to be JS as I cannot seem to find what I need in CSS, but perhaps the collective mind can help!
Cheers!
This is a little push in the right direction: http://jsfiddle.net/f5w35qu8/1/
$(window).scroll(function () {
var scrolled = $(window).scrollTop();
if (scrolled > 10) {
$('section:first').addClass('darker');
}
else $('section:first').removeClass('darker');
});
Related
I have a normal scroll section at the top of the page which has some parallax effects and below it there are more standard animated fullPage.js sections.
It works really great but the problem I have is when I do a fast scrolling from top of the page. It skips second section and maybe the third, depending how fast mouse wheel is fired.
It's very bad user experience especially when using Apple's magic mouse, but issue occurs with any type of mouse.
I guess the problem is because of normal scroll section at the top, but I don't know how to solve it. Does anybody has the idea on how this could be solved?
Here is the link: http://2016.macleo.de
P.S. I have also added an onLeave callback with scrollTop animation triggering manually but still buggy. I can see third section a little when trying to scroll fast through site, like some users would probably do.
onLeave: function(index, nextIndex, direction) {
var leavingSection = $(this);
//after leaving section 1
if(index == 1 && nextIndex == 2 && direction =='down') {
$("html,body").stop().animate({scrollTop:$(window).height()});
}
}
Thanks a ton!
Ok so the effect I am trying to emulate can be found on the nexus 5 site - http://www.google.com/nexus/5/ - when you scroll to the phone section. I've viewed source and looked through the code but there is over 13k lines of js so it was a waste.
Anyways what I did was add a class to fix the position of the images and created a background div that was like 5000px so it would appear to be fixed. The js fixed the position after the screen reached a certain point and then removed the fixed class after the end of the div.
My question is that i know this can be done better than my janky 'hack'. I'd love to hear your thoughts on better implementation.
This is part of the code that adds the fixed class
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".container").addClass("fixed");
}
if (scroll >= 8000) {
$(".container").removeClass("fixed");
}
});
Try this guide:
http://blog.teamtreehouse.com/multiplane-design-with-svgs-and-css-3d-transforms
Demo: http://codepen.io/nickpettit/full/eBCrK
Haven't done something like this before myself however. Also just a note that fixed position elements from my experience act up when viewed on tablet/smartphone.
I'm been trying to get my head around issue and seem to cant find some help.
http://fiddle.jshell.net/DQgkE/7/show/
The experience is a bit jumpy and buggy now- but what i will like is
1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.
2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.
Below is a starting point.
3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up
http://imakewebthings.com/jquery-waypoints/#doc-disable
using disable, destroy, enable option will be nice.
This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/
Thanks for the help in Advance.
I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.
EDIT
I went ahead and fixed the original code. Solution without waypoint plugin is in comments.
Here is the result:
http://fiddle.jshell.net/Taks7/show/
I would recommend to use jQuery (that was a surprise, right?! :P)
$(document).ready(function() { //when document is ready
var topDist = $("nav").position(); //save the position of your navbar !Don't create that variable inside the scroll function!
$(document).scroll(function () { //every time users scrolls the page
var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
$('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
} else { //window is on top position, reaches trigger position from bottom-to-top scrolling
$('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
}
});
});
I really hope I helped!
I'm trying to do something like this.
http://www.mini.jp/event_campaign/big-point/
What I can't figure out is how to make the animation happen based on the scroll when the scroll hits a specific position. I have similar blocks of content that I only want to animate parts of it based on the scroll and when the block is within the browsers view area when scrolling.
I understand using the scroll event to get the scrollTop position I'm more concerned with how everything else would work.
$(window).bind('scroll',function(e){
var scrolledY = $(window).scrollTop();
});
Anyone can help explain some of this.
Thanks
Just like what MiniGod said in the comment, look in to the source code (animate.js), and you can see that they have recorded all the "scenes" and all other things like alpha and pos for everything.
// scene 1
{
scene:"#scene1",
name:".car",
runStatus:[
{p:10,pos:true,x:275,y:240,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1},
{p:180,pos:true,x:275,y:200,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1},
{p:270,pos:true,x:275,y:140,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1},
{p:500,pos:true,x:275,y:-300,alpha:true,opacity:0,scale:true,orgSize:[475,270],scaleSize:1}
]
}
I want to achieve the effect that is used on this Header on this example website:
http://anchorage-theme.pixelunion.net/
You will notice that as you scroll the page, the header slowly moves upward until it disappears from view. I want to achieve this same effect. I believe it will need some JS and CSS positioning but still have no clue how to achieve this. Is this done with parallax scrolling?
Would appreciate if someone could give me a quick example of the code used to do this with a element. So I can then use it on my own site.
Cheers.
the $(window).scroll(function () {...}) is the one you need here
$(document).scrollTop() is the amount of scrolled distance from the top
Use this:
$(window).scroll(function(){
if ($(this).scrollTop() > x){ // x should be from where you want this to happen from top//
//make CSS changes here
}
else{
//back to default styles
}
});