Hi! Im practicing for my project.


I wanna try things like shape animation, text typwriter effect and toggling visibility of sections.

Section

I absolutely love the website https://classic.qz.com/map-of-the-internet/. I am deriving ALOT of inspiration from it. I am going to do my best not to straight up copy it though.

The hardest part about this is to create the background images and shapes. I cant think of what to draw.

I was thinking originally of drawing all the shapes using javascript, but since most of them are irregular, thats gonna be really hard. Perhaps I can draw them in illustrator or something and animate them?

Section

Here’s something else I’d like to do:

Click on each of these boxes in turn.

Can you spot the problem?

What I am having trouble doing is bringing the height of the box back to its original size after re-displaying the other two boxes.

I have tried a bunch of things I found on the internet but nothing works :/

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I still havent figured out how to make it scroll down like each scroll is a different page but its actually one lonf page if you know what I mean... I’m hoping to do that for the project, I dont want a bunch of HTML pages, I want just one really long one but each time you scroll down it jumps to a different section as if you’d been linked to a whole new page. Hmmmmmm...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

And I am definitely having issues showing/hiding the texts based on the size of the box. Ugh!

All in all I'm really glad for this chance to practice these things before the project. I'm gonna continue working on them until I can hopefully get them to work!