Scrollable Website Tutorial!


#1

This topic is in help with code because if you want to code a scrollable website, this could help you with your code!

This was inspired by @StarryDream! Her tutorial topic inspired me to make this tutorial! :D


Alright! So today I will teach you guys how to make your very own simple scrollable website! So, let's get started!

So first, let's drag out an object. I like to name it "SCROLL" with all caps so it really stands out. You also might want to name the actual object "scroll" so it will be easier to find in the editor.

Set the when to when the game starts. Then, drag out a set text block. Type in the title of your website. Then, pick a color for the text to be. Now, we need to set the scroll to something. If we don't, people will have to scroll up before they start reading it. I think that if you are in landscape mode, set it to 650 or 600. If you are in portrait mode, I'd set it to 925. Now, drag out a repeat forever block. You could also make a new rule and make the when to "When 7 = 7", but I think it would be easier to just do a repeat forever block. Now drag out a set position block. Now, I made this in landscape mode. So I set the X to the middle of the screen in landscape mode. If you want the middle in portrait mode, it is 384. Now, we need to set the y to a value. So go to values, and make a new one. Name it scroll. Set the y position to "scroll".

Now, drag out a new when object. This will be "when _ is pressed". Now, drag out a set value block. Make a new value. Call it whatever you would like! I called it value for scroll code. Set value "value for scroll code" to "last touch y". Now, we need an increase value block. Increase value "scroll" by "last touch y - value for scroll code x 2".

Now that's great!! But, one problem. There are no boundaries! People can scroll up and down as far as they want! We need to fix that.

Make a new when. Drag out "when _ < _". The first blank will be the value "scroll". The second blank, for me, will be 650. Drag out a set value block. Make it set value scroll to 650.

Now, we knew the first number, we have to guess this number though! So think, how big will your website be? Will it be fairly small, or pretty big? Will it be in the middle? I think that it will be around 1100. So this is basically the same code, except this time, the when will be "when _ > _". It will also be with 1100 instead of 650.

Yay! You have completed the scroll object!

Below this is all the shapes that go into your website. I personally think that shapes are very important when making a website. If you have FanceyKey, I would recommend it for some things, but then you would have to switch back and forth and back and forth. So for now, I would just use the shapes that Hopscotch provides.


Drag out a platform object. Set it to whatever color you would like it to be. Now, we also need to send this to back. If we didn't, we wouldn't be able to see our scroll text! Let's set the size to 500. Now, drag out a repeat forever. "Set position to X '512' y 'scroll'".

Now, drag out a square object. The when will be "when game starts". Set the color to whatever color you would like. I would set the size of the square to 500. Drag out repeat forever, and then a set position block. Let's set the X position to 300, and the y to "scroll - 300".

Let's drag out another square object. This will be a paragraph. It is basically the same code except for the X position. The when is when game starts. I alternated the colors because I want a checkerboard pattern, but you can do whatever you want! Your website, your design! :D Set the size to 500. Repeat forever, set position X 750, y scroll - 300.

Great job so far! Now we need the other two paragraphs.


Alright! Now this paragraph will have the same code as paragraph one except that its y will be scroll - 700 this time! When game starts, set the color to whatever you would like, and size to 500. Repeat forever, set position X 300, and y scroll - 700.

This is about the same code, just like the other squares. :D When game starts, set color to whatever you would like, and set size to 500. Repeat forever, set position X 750, y scroll - 700.

Awesome! Now we have to code the tabs and the text for the paragraphs. I will only show you one tab and one paragraph though! Don't worry though! It is pretty simple at this point!


Drag out a text object and name it whatever you want the first tab to be. A lot of people like to call it "Home", but you call it whatever you would like!
Set color to a color you haven't used yet. Repeat forever, set position X 300, y scroll - 200. The other tabs are the same code except scroll - 240, scroll - 280, and so on depending on the number of tabs you have. Please note that the y of the other tabs will not be the numbers I listed, that was just an example.

Drag out another text object. Call it paragraph one. When game starts, set text to "your text for this paragraph" and make the color whatever you would like. I would shrink it by 50, but shrink it however much you would like. Repeat forever, set position X "square 2 X" y "square 2 y". For the others, do the same code except, do the position square 3, then square 4, and so on depending on the number of paragraphs there are.

Great! Now time for the footer! Don't know what a footer is? Look at the picture from a YummyMuffin website:


See that at the bottom? That's a footer! They usually say things like "Thanks for Viewing!", "Have a Nice Day!", or "See You Soon!". Now, if you don't want a footer, you can skip over this part.

Now, I forgot to screenshot one thing, and it happened to be the backboard for the footer. XD But it's alright! You have made it this far, I know you can do it! Drag out a platform. Make it whatever color you would like. Set the size to 1000. Repeat forever, set position X 512, y scroll - 1100. If it's not 1100, try 1150. Great! We are almost done!

Drag out a text object and name it "Footer". When game starts, set text to (Your Footer Message), and set the color to any color. I would make it grow by 25 percent, but you can grow or shrink it however much you would like! Repeat forever, set position X 512, y scroll - 1050.

Bam

You're done :00010010010

Websites like these take patience, and you need to adjust things so they are almost perfect if not perfect. There are tons of ways to make websites easier. I will share shortcuts and techniques shortly!

Thank you for reading all of this! If you made a website from this tutorial, I would love to see it!

Thank you! Have an exuberant day!


Topic Portal and FAQ
MobCraft's Topic Portal
#2

This is a cool tutorial, especially because most of the tutorials from THT are gone.:grinning:


#3

Thanks! It is not finished though. Because the forum glitched on me.


#4

It will be cool when it's finished!:grinning:


#5

NOICE tutorial! TBH this should be pinned :smiley:


#6

Omg that's so cool do you do any other tutorials I'd love to read them this one really helped​:smile::grinning:


#7

It isn't even half way done yet though. XD

My hands are tired. XD

I know it sounds silly but what does tbh stand for?

#8

To be honest


#9

It's not finished. XD

I'm taking a quick break and finishing it later.


#10

But it's still really awesome so do you have a other how to's or any thing like that?:hugging:


#11

It must be really hard to type that much how do you do it​:slight_smile:?!


#12

Not right now... maybe I should make this into a topic with tutorials on several things... ¯_(ツ)_/¯

Thank you!


#13

Great your good at it.


#14

A little more progress...


#15

Oh gosh I finished it after 42 minutes of typing.

I. Am. Exhausted.

I just hope you guys enjoy it and find it useful!


#16
top secret macaroni stuffz

List
@BB-Box
@Kitkat26
@KVJ
@Black_Panther
@Holly_Aarmau
@Deadfr
@EsteemedTrout
@Catface4
@Paydent12
@karmicsans618
@RubyStars
@Sensei_Coder
@FunkyGoldfish
@Candycane
@William04GamerA
@Jess888
@ArtyAnimal
@EmmabugOnTheForum
@waddlemarco
@CreationsOfaNoob
@Rainboom
@PixelMaster64
@Potter_Head
@StRiKe_Charler123
@StarryDream
@codingCupcake123
@Murphy1
@treefrogstudios
@MrHotdog64
@Sugarisyummy
@AvocadoDont
@bluedogmc-official
@Ella_13
@Sweetlina
@xXBARNSLEYFCXx
@FluffyMarshmellow
@GLaDOS_On_Da_Forum
@BubblegumCupcakeMix
@YuxinaYammy
@PerfectPanda24
@Explorer_
@ColourfulBlack
@JojoDude
@happy12345678910
@Sprouse
@GiraffeProductions
@TheGreenBanana
@MR.GAM3R
@Themasterofairjitzu
@HopedHoper
@AwesomeNachos
@FortatoBuilder
@Valgo
@Pixel
@Vortex.inc
@ConnellCoder
@VanillaBlossom
@JaggedJeans
@KoolM123
@PandaBlossom
@ButterBark


#17

Wow, that was an essay!
I want to like it so badly!
I've run out of likes. ;-;
Very helpful! :slight_smile:


#18

Thank you!


#19

Great tutorial @Catface4!:grinning:


#20

Thanks!