JQuery elements on each page of my website

Home Page:

Logo hides when scrolling
Parallax effect
Self typing effect
Sticky menu
Particles
Hover effect on logos

Graphic Design Page

Parallax effect
Sticky menu
Hide and show element
Click to enlarge bottom picture

Web design page

Parallax effect
Sticky menu

Theory page

Parallax effect
Sticky menu
Click show and hide button
Hover to enlarge

Photography page

Parallax effect
Sticky menu
Image slider

Work Experience page

Parallax effect
Sticky Menu
Click and Drag to enlarge

Making my website live

I was recommended a website to use to learn how to make my website open to the world wide web. I called the company a few times however they did not answer or call me back. Therefore I had to research into finding a different company, and I came across a company called 1 and 1. They had a promotional offer of 99p a month for having my website live and having a free domain name; I felt a bit pressured deciding a domain name so do not judge me for it:

harpreet.me.uk

Because I have never made a website properly before, or even attempted to make it live; I wanted to make sure that I understood what the process was to do it. So, I understood that I had to buy hosting and sometimes the domain name comes with the package, and other times I have to pay for it separately.

Once I paid for it and I have my online account open, I was thinking, well what now? I tried clicking on a few buttons to try figure out how to attach my website to my account to make it live but I could not find any option to let me do so. Therefore, I called 1 and 1 again and asked the technical team to talk me through what I had to do. The woman on the phone was not as patient with me as I would have liked but nevertheless, she explained that I had to download a software called Filezilla to be able to control what happens on my website.

After following her instructions, make attempts to make my website live was successful! I am still yet to play around with Filezilla to understand how it actually works, and what happens if I was to change something on my code, but for now, I am extremely excited to have a fully functioning website!

Image Slider

A fellow classmate created an image slider, so I decided to find another tutorial as I wanted to follow the step by step guide on how to create this animation using JQuery.

As I am using Bootstrap in my website, I find that I cannot use CSS tags such as ‘position: absolute’ and ‘margin:100px 40px’. As I find that this cancels out the Bootstrap grid system. Therefore I cannot have just one image shown and the rest of the images hidden like I have done on Code Pen:

However, I know that I would need to apply a JQuery ‘if’ statement to hide the images that are not meant to be seen. As I unfortunately do no know how to figure it out on my own, I am finding that I will have to refer back to tutorials to understand how and what to do.

JQuery Particles

Well… bloody hell this was difficult.

Thank God for this guy and his awesome tutorial:

http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/

Looking at each bit of the tutorial makes a lot of sense as it is explained well, I managed to break it down and change the size, colour and direction of the particles. On the other hand, I know I would still find it difficult to understand and create these particles on my own:

When I applied this to my website, I found that other JQuery effects would break the particles and they would stop working. Therefore I placed the particles in their own JQuery file, this solved the problem🙂

JQuery effects to display long text

As I am building a portfolio website for myself, I needed to find a sutible way to portray my theory work. Therefore I thought of the show more and hide button, and created this:

I enjoyed figuring this out! Quite a simple bit of JQuery code. However for some reason, when I apply this to my own code, the ‘show more’ button  does not hide once clicked, but it does work on Code Pen. Slightly strange.

Next, I found a way of hovering over text to enlarge small text so that it is easier to read, and created this:

I thought I would have been able to do this animation in CSS, however as I am concentrating on learning JQuery for this project, I wanted to figure it out using JQuery.

I researched how to do a hover effect through JQuery and figured out how to make the text larger.

JQuery Lightbox

I was creating my website page, and I thought that it would be good if I could apply an animation on my web page that allows the user to click on an image that will open up a separate screen that will enlarge the image, i did follow another tutorial and I figured this out:

However, this process seemed more complicated than I think it should be. Took me a long time to do that, but I was not happy with it, so I wanted to find a simpler way of doing it. So I tried this:

However, I then I came across ‘JQuery Lightbox’ which had a brilliant tutorial, therefore and created this instead:

Looks so proffessional, I love it!

However, when I applied it to my website, it had to refresh the page to be able to open the image within the lightbox, I tried various ways of fixing this, but again, I wasted too much time on it and gave up😦