Skip to content

3D scrolling website made with JavaScript and Three.js + WebGL

Notifications You must be signed in to change notification settings

instamenta/SpaceJam

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SpaceJam

Simple 3D scrolling website made with Vanilla JS and three.js@@

The Entire Webpage is based on the data includede in My CV, if after checking the website you are interested you can find my CV also - link.

Built With

  • NodeJS
  • CSS3
  • HTML5
  • JavaScript
  • Threejs

Get started

! >npm install

Run in development

- npm run development

Demo

#1589F0 Intro

Part1

#c5f015 Education

Part2

#f03c15 Personal Projects

Part3

#c5f015 Skills

Part4

#1589F0 Outro

Part5

Find

The attractive 3D parallax scrolling website SpaceJam made by me
is a beautiful animated space galaxy – in the centre of the page. 
The animated canine scales and rotates as you scroll down the parallax page. 
Its changes position as you hover over the titles of my certificate
collection and recent mostly finished projects. 
Perhaps your favourite touch is that at one point space revolves
in front of you. It's a very smooth presentation.

Scroll

Parallax scrolling websites continue to be a popular trend. 
It was once recommended that sites include as much information
above the fold as possible in order to avoid the user having to 
scroll, but parallax scrolling introduced a way of allowing 
designers to break away from that by making the act of scrolling 
itself engaging for the user. 

Parallax

The Parallax scrolling technique involves designing the background 
of a website layout to move at a slower rate than the foreground 
when the user scrolls, creating a 3D-like effect. Used sparingly,
parallax scrolling can add a subtle element of depth that makes the 
foreground seem to stand out. In other cases, it can be used as the 
main star of the show for a big visual impact. The technique can 
encourage users to stay on a page for longer – great for SEO – and 
to scroll right to the bottom of the content. The examples below show
how Parallax scrolling can be used to different degrees to create
distinctive and memorable websites.

Contact

Jan Milenkov - https://github.com/instamenta - instamenta@abv.bg

Project Link - https://github.com/instamenta/SpaceJam