I was set the task of setting up a website. How this task came to be is redundant but the main point is I needed a domain name.
Those of you that know me are familiar with my enjoyment of terrible puns – and thus the twain have met.
I was browsing the list of potential top level domains (the .com or .co.uk bit at the end of a web link) and I stumbled across ‘.party’. As soon as I read it this song came into my head….
[kad_youtube url=”https://youtu.be/cF4PsI-xJRQ?t=1m1s” ]
It had to be done – I popped down to my local domain registrar and tossed them a couple quid.
It was at this point I actually read the speck and come to realise this was not what they had in mind…. But I had the domain now, what could I do with it?
The result can be seen here…
http://aintnopartylikeansclub.party/
The Idea
Bouncy SClub CD logo
The Code
Really this is very simple code that can sit inside any block component of an HTML page.
<marquee id="scroll" scrolldelay="7" truespeed="1" direction="down" width="1200" height="500" behavior="alternate">
<marquee behavior="alternate" scrolldelay="15" truespeed="3">
<img src="Assets\Images\SClub.jpg"/>
</marquee>
</marquee>
Let’s break this down:
First understand what the marquee tag does, it scrolls something across the screen. The ‘perameters’ it takes are ID, scrolldealy, direction, width, height, behaviour, and truespeed. Truespeed as a boolean option that basically changes how the thing is rendered.
- The width and height ‘perameters’ denote the area the it will move.
- Behaviour set to alternate means it will change direction ‘randomly’
- The rest are fairly self explanatory. Feel free to go over to w3schools page to find out more.
The first marquee tag sets out the initial path up and down. Notice how indented and inside that block there is another marquee – it’s direction is set horizontal (this is default behaviour and so there is no code to set this).
Finally in the middle we have the <img> tag containing a pic of our lovely group.
This isn’t the whole story however because there is a little more code that I won’t explain too much but all it does is on load set the attributes of the marquees to be the correct size to fit the screen.
This isn’t a js tutorial so I won’t explain these lines too much as they are basic js constructs.
document.getElementById("scroll").width = window.innerWidth;
document.getElementById("scroll").height = window.innerHeight;
As usual all the full code is available at the link below on my github repo.
Repo – https://github.com/cooltennis01/AintNoPartyLikeAnSClubParty.Party