MOCpages : Share your LEGO® creations
LEGO models my own creation MOCpages toys shop HTML Animation TutorialStar Wars
Welcome to the world's greatest LEGO fan community!
Explore cool creations, share your own, and have lots of fun together.  ~  It's all free!
HTML Animation Tutorial
Most of you reading this have probably seen the animations on my home page. This tutorial will give you the specs on these simple but effective graphics.
About this creation
So, these animations are really very, very simple. Just follow along.

Note: Due to the fact that your web browser will simply display the animation if I type in the code, I have to write using the entity codes for certain symbols. Therefore, you should probably type in the code by hand, instead of copy-pasting.

What you need:
>A computer with Internet access

1) Go to the LEGO Shop @ Home website, and find a set with the 360 degree view preview feature. I'll be using the Venator.

2) The 360 spin doesn't let you use the copy picture function, so use Print Screen on your keyboard instead. (sometimes "Prt Scrn") Make sure you have rotated the virtual model so that the virtual minifigs cannot be seen, and the model's front is pointing directly right or left. You should be looking at a side profile shot.

3) Paste the pic into a photo editor, crop, and adjust the background color. Like so. When cropping, make sure you note the width and height.

4) On your MOCpages homepage, click "Add a LEGO Creation, and upload the photo.

5) Go back to your homepage, and hit "Photos". (under the "organize" tab on the command bar.

6) Click on the uploaded image. This takes you to the source page of the online image. It should look like this. Copy the url.

7) No comes the animation part. Go to wherever you want the animation.

write,
<marquee scrollamount=however fast you want it to go direction=left or right>
<img src="paste the url here" width="photo width" height="photo height">
</marquee>

That's it!





BONUS!
Here's the code for my Venator animation:

<marquee scrollamount=5 direction=right>
<img src="http://www.mocpages.com/user_images/17471/1246666822m_DISPLAY.jpg" width="800" height="275">
</marquee>

Tip:
You can increase the number of vehicles in an animation simply by adding more images to the marquee.
_________________________________________________________________________________________

Please leave a comment and give me credit for these animations!
Thanks in advance!



Comments

 I like it 
  June 22, 2013
Good tutorial, but MocPages doesn't allow 'marquee' or 'blink' codes. :(
 I like it 
  February 1, 2011
Hey I was looking for a way to add a pic to your homepage and I found this. I based it off how you add the creation and use the HTML. Thanks again.
 I like it 
  January 12, 2011
THIS IS SOOO COOL!! THANKS SO MUCH!!
 I like it 
  August 13, 2010
THANK YOU VERY MUCH MAN!!!!
 I like it 
  January 26, 2010
i used this to a picture with my speeder! but it was very hard to do!
 I like it 
  January 12, 2010
Thank you again! You were smart for posting these!
 I like it 
  October 20, 2009
Perfect! Im going to use this for my tank!! Thank you!!
 I like it 
  September 25, 2009
i finally learn how to do this, thanks!
Brickdoctor -
 I like it 
Slip Knot (The Marshmallow)
  September 7, 2009
Brilliant! I'm gonna put a whole load of these on my page! Also, can you check out a few of my MOCs? I'm from the 'Get your Creations noticed' group. Thanks.~Slip
Brickdoctor -
 I like it 
Slip Knot (The Marshmallow)
  September 7, 2009
Brilliant! I'm gonna put a whole load of these on my page! Also, can you check out a few of my MOCs? I'm from the 'Get your Creations noticed' group. Thanks.~Slip
Brickdoctor -
 I like it 
General Cody unit 2224
  September 1, 2009
DUDE!! YOUR BETTER THAN ME BY A MILE!! AWESOME!!
 I like it 
  August 21, 2009
thx doc
  July 31, 2009
Thx doc, I put it on my file( home page).
 I made it 
  July 31, 2009
Quoting Field Marshal Cliffe Well, my friend, if you're the original creator of this, you'll be proud to hear I see tons of these all over MOCpages! People love them!
I am!
  July 31, 2009
Well, my friend, if you're the original creator of this, you'll be proud to hear I see tons of these all over MOCpages! People love them!
  July 9, 2009
What photo editors do you recommend? Would any program on a computer (not on the internet) work?
 I made it 
  July 7, 2009
Quoting Lieutenant J may i use that venator one?
Sure.
 I like it 
  July 7, 2009
may i use that venator one?
 I like it 
  July 6, 2009
I have a problem when i upload my picture it turns all my transparency black so it doesnt look right. Any ideas i have tried everything.
 I like it 
  July 6, 2009
Awsome. Thanks.
 I like it 
  July 6, 2009
VERY COOL I USED IT ON MY PAGE I GAVE U CREDIT
 I like it 
  July 5, 2009
Wow!
 I like it 
  July 5, 2009
Thank you for this info! I have been wondering for a while how you do this. This is some of the most useful information around the pages. 5/5
 I made it 
  July 5, 2009
Quoting Moodswim !!!! Wow. That actually looks pretty easy. Thanks for this post:)
You're welcome. It's very easy. I'll have a more complicated one up soon.
 I like it 
  July 5, 2009
Wow. That actually looks pretty easy. Thanks for this post:)
 I made it 
  July 5, 2009
Quoting Brady G Oh, and for the line, did you just use lots of _s, or use the <hr> tag? That's the one I'm playing around with on Thomas Thomas' page.
I just used a whole bunch of _s. I was feeling too lazy to press more than one character.
 
By Brickdoctor -
Add to my favorite builders

23
people like this. See who.

2,719 visitors
26 comments
Added July 5, 2009
 


LEGO models my own creation MOCpages toys shop HTML Animation TutorialStar Wars


You Your home page | LEGO creations | Favorite builders
Activity Activity | Comments | Creations
Explore Explore | Recent | Groups
MOCpages is an unofficial, fan-created website. LEGO® and the brick configuration are property of The LEGO Group, which does not sponsor, own, or endorse this site.
©2002-2014 Sean Kenney Design Inc | Privacy policy | Terms of use