#cactustutorial | Explore Tumblr posts and blogs

cactusthemes · 7 years ago

Photo

So @vintagelovedesigns asked for a tutorial on how to make a full screen header with a scroll down button, so here you go ^^

The result will give you the bare bones for something like this:

(Graphic made by the lovely @saturnthms !)

The Meta Tags

The only thing you need to add in the meta tags is this line:

This tells you the size of the browser window when a user first accesses it, and it is necessary to make the header stretch all the way across the screen. It should be put in between <head> and <style>, just like all the other meta tags.

The HTML

Now I know I’m doing this a bit out of order, but you need to define your header element first before you can add any CSS to it.

You should put your header element right after your <body> tag, so it’ll physically be on the top of the screen. As for the header element itself, I usually use the <header> tag itself, like so:

Now, all that needs to be added is the HTML for the ‘scroll down’ button, which should be inside the header.

The CSS

Now that you’ve defined your header element - whether with the <header> tag or something else - it’s time to add some CSS to it. This will determine what the header will actually look like. I’m just going to tell you the basics for the CSS, and you’ll have to figure out what style you want for the rest. You should put this between <style> and </style>

So to your header element, you should add this (I’m using header as an example, because that’s what my header element is):

You can style the ‘scroll down’ button by putting something inside the designated element, and adding CSS to .down { }, same as you did for the header.

The JQuery

All that’s left now is the script that actually makes the clicking the button scroll the screen down. For this to work, you must have a JQuery library in your code, so be sure to have that first. The one I use is:

It’s best if you add that between <head> and <style>, if you don’t already have that. After you’ve added a JQuery library in your code, paste this between </body> and </html>

</body> <script type='text/javascript'> $(document).ready(function(){ var height = $(window).height(); // defines the height you want to scroll, in this case the height of the window $('.down').click(function(){ // the selector + what happens if you click on it $('html, body').animate({scrollTop: height }, 1100); //scroll for the predetermined amount return false; // negates the href="#" of the link }); }); </script> </html>

The $(’.down’) should match the class you gave your ‘scroll down’ button!

The End

And that’s it! That’s the bare bones for the effect I showed at the beginning. Your code should look a little something like this:

You can see the same effect in my theme Winter, Summer Night Horizon, and my blog theme (if you press the “enter” button it’ll scroll down). Now if you want a tutorial on how to only have it show up on the first page, @roxiestheme made a tutorial on that here.

If you use this tutorial I would like a little credit somewhere on your theme, not gonna lie. But only an in code mention would be fine, nothing big ^^

#cactustutorial #itsphotoshop #yeahps #tumblr theme #codinghaven #tumblr tutorial #code #post

318 notes · View notes