I've been searching for this for quite a long time:
I want the users to scroll down immediately on the page, so that the header image is hidden (because of the scroll down). The reason being too small displays.
It should however be visible on the front page, as well if you scroll up too much, to be some kind of a goodie.
Currently i'm using anchored links on all of the subpages, like contact/#menu. But that does neither look good, nor is it SEO friendly.
Is there some way to scroll down with pure css? I don't wanna use js if not neccessary (though I would know how to do it that way).
Margin and padding on body or html won't help me there I'm afraid.
The website I'm talking about btw is http://www.poessnitzberg.at/kontakt/#menu
Thanks!
Let me start off by giving you an easy jQuery way of doing it:
$('html, body').animate({
scrollTop: $("#menu").offset().top
},1000);
You could combine this with $(window).load or $(document).ready to immediately fire once the page loads or the document is ready.
As for pure CSS, I do not know of any really viable ways. If there are, I think they'd be more complicated then using this piece of jQuery.
Related
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
Find out a website http://www.boy-coy.com/#home. When you scoll down all content scrolls very smooth. Even if you scroll it fast, scroll is done at specific speed. This makes the website faster and responsive. How this can be achieved with the help of css and jquery?
At first glance.
Try reading their html source code output.
They use a few jquery plugins and legacy browser js plugin calls.
They have a custom and partially obfuscated .js script that is in depth, but you can see the specific properties it is setting on items in the page.
Barring any terms of use issues, you could likely decipher this pages cool scroll technique by working with this sample code as an example. But it is definitely a fair amount of work to write from scratch or post the entire solution here.
Im going to go and look for a smaller example that isnt as involved as this parallax.
And check out this link http:// codepen.io/JTParrett/pen/BkDie its got some starting principals here of some of the images positioning at different locations in the viewport when you scroll.
This link in SO can also help Can I change the scroll speed using css or jQuery?
Kirupa has a nice tutorial that can likely help in getting the smoothe scrolling effect stared too. http://www.kirupa.com/html5/smooth_parallax_scrolling.htm
And this one is pretty awesome. I think I would look into this demo. Be sure to test all of click event demos here. Im sure you could tie in your jquery tween event for the scroll bar with this http://plugins.compzets.com/animatescroll/
Another decent example http://bassta.bg/demos/smooth-page-scroll/
It is called Parallax,
Check this: http://www.w3schools.com/howto/howto_css_parallax.asp
http://matthew.wagerfield.com/parallax/
I have a web page with anchor links and I wish for them to stay highlighted when they are clicked AND when the user manually scrolls down. I have seen some jquery code here codepen.io/jakob-e/pen/mhCyx that does what I wish to do, however I wish to achieve this effect using raw javascript and I can't see it posted anywhere. Thanks for any help.
Sounds like you're looking for animated scrolling and scrollspy functionality? Shameless plug for two native JS (non-jQuery) scripts I wrote that are designed to work together:
Smooth Scroll: https://github.com/cferdinandi/smooth-scroll
Gumshoe for scrollspy: https://github.com/cferdinandi/gumshoe
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
If you click on the navigation links on Hardly Code's website the browser scrolls to another section of the page.
Can anyone point me to some good reading materials for recreating this effect? I am using jquery, and want the animation to be as smooth as is it on hardlycode.com
The command is
$('html,body').animate({scrollTop : 0},'slow');
Or, if the link has class scrolltop_btn
$('.scrolltop_btn').click(function() {
$('html,body').animate({scrollTop : 0},'slow');
});
as a catch effect, in case javascript is disabled, you should always include the standard HTML anchors too.
If you want to change the duration, you can change 'slow' to the number of milliseconds you want the effect to last.
Use the ScrollTo jQuery plugin: http://flesler.blogspot.com/2007/10/jqueryscrollto.html - http://plugins.jquery.com/project/ScrollTo
Here's a blog post on doing it with jQuery: Improved Animated Scrolling Script for Same-Page Links
You can do just scrolling to top, but that method lets you point it to any section of the page exactly the same as if you were using #anchors. It's a great example of progressive enhancement, since the fancy Javascript effect is in addition to an already completely functional no-Javascript system.
Here a good one:
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Try the demo first:
http://demos.flesler.com/jquery/scrollTo/
Good luck!
A very simple one which requires no in-page javascript (it simply finds all links which contain an anchor and makes them scroll instead): http://www.kryogenix.org/code/browser/smoothscroll/