graphic-website

Graphic website of Encryption code, with a lot of animating and fading content which is operated by scrolling

Graphic website is now being hosted on github pages! View it here!

• however, this hosting does not show the compter moving animation. it had to many frames and github wouldnt accept it

It is supposed to be similar to the apple website for iphone where they have to phone animating around as you scroll

• this contains scroll controlled animation and other content

Check out what's done

• Scroll through effects sequence

  • Data security redefined and Encryption code 2.2 float in and fade in
  • 4 lines come in from 2 sides and all new features fades in
  • Black page opens upwards revealing 99% encryption accuracy
  • Encryption accuracy stops moving down and stays with other words
  • 99% moves down to more efficient algorithms
  • Security is built in
  • Security features fade in
  • screen fades from black to white and Encryption code beta pro fade from white to black
  • screen fades back to white
  • computer animation
  • enlarging logo
    • enlarges to medium size and then stops enlarging
    • processor text goes by
    • keeps enlarging and then you go through it
    • becomes slightly opaque as you go though it so that you can see whats behind it (which is the processing gif)
  • processing gif and text

• problems

  • the 99% thing staying in the center while scrolling moves up and down a bit too much
  • it takes some time to load in the begining because it has to load the 143 frames for the animation (I might just make it a gif)

• computer animating

  • takes time in the beginning to load because there are 143 frames
  • has multiple frames from different angles and display them one by one
  • also it takes almost 300 lines of code for the animation and 143 for the image loading
  • I might just make it a gif

• Enlarging logo

  • logo enlarges as you scroll and then you go through it
  • in the middle of enlarging it stops enlarging and then text goes by and the you go though it
  • it fades when you are going through it so that you can see the gif and text behind it
  • as you go though it the processing gif appears along with text that fades in
  • I made a high res logo for this so it doesnt get blurry when it becomes large
  • also this is not super smooth as i want it to be but its not that bad