Web Design

   There are some really cool things that you can do when it comes to websites. Here I will be showing you a few different websites and the cool things that they did and how they did it using the code.

Seattle Cider Co

   There were a few really cool things that this site had that I wanted to learn how to do.

    The first thing that I thought was cool was how when the site first opened it showed the company logo as well as a large background image and at the bottom some of the tabs. Then you scroll down and the menu comes down from the top as well as the logo in the middle of the menu.

After looking very hard through the code and with a little help I was able to find that it was javascript that controlled it. It is something called window.scroll, it looks at how much you have scrolled on the page and shows the code that you have set for it.

   There was another thing that I thought was pretty cool. It was when you scroll down the site and it showed the process of making cider. When you scroll down it looks like the apples are going into the bucket and the drops go into the buckets and pipes. When looking through the code I found that it was more javascript. This javascript was one that dealt with scroll direction. It looks at which way you are scrolling and shows and hides the specific divs so that it looks like they are moving.

Parcours Canada

This site had two specific things that I liked.

   The first thing is when you hover over the image a new image of the map of that place opens in its place. When it opens it starts from the corner and seems to fold open. this is accomplished using just css. They used animation and visibility when doing this.

   The other thing was that when you hover over an image it zooms in and fades so that the text and/or logo are more visible. We have done this in class before however this was more detailed. They did this by just using transitions in the css.

 

 

 

 

Lifepointe Church

    This site has a few really cool elements. One of these is of background. At first you see a video and then when you scroll down you see text. Then you scroll down more and the next section has an image for its background and just a few words on it. Then as you keep scrolling you can see that the image doesn't move even the though the text does then you keep scrolling, more text, then a different image. This was accomplished by simply using divs and layers and making the images absolute.