Commit7df8e59

committed

add parallax website

1 parent368227b commit7df8e59Copy full SHA for 7df8e59

File tree

+45

-12

lines changed

+45

-12

lines changed

Lines changed: 3 additions & 11 deletions

Original file line number	Diff line number	Diff line change
`@@ -17,17 +17,9 @@ <h4>yayavar</h4>`
`17`	`17`	`</nav>`
`18`	`18`	`<divclass="container">`
`19`	`19`	`<h2class="main-title">Explore.</h2>`
`20`		`-<img`
`21`		`-src="https://i.ibb.co/dK5zQgY/background.png"`
`22`		`-class="background"`
`23`		`-alt=""`
`24`		`-/>`
`25`		`-<imgsrc="https://i.ibb.co/gwtNKDz/man.png"class="man"alt=""/>`
`26`		`-<img`
`27`		`-src="https://i.ibb.co/XJrwv0M/foreground.png"`
`28`		`-class="foreground"`
`29`		`-alt=""`
`30`		`-/>`
	`20`	`+<imgsrc="https://i.ibb.co/rsp6RFJ/bg1.png"class="background"alt=""/>`
	`21`	`+<imgsrc="https://i.ibb.co/237VsHs/girl1.png"class="girl"alt=""/>`
	`22`	`+<imgsrc="https://i.ibb.co/BKtjhV2/rock1.png"class="rock"alt=""/>`
`31`	`23`	`</div>`
`32`	`24`	`<divclass="content">`
`33`	`25`	`<divclass="content-images">`

Lines changed: 19 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,19 @@`
	`1`	`+letcontroller=newScrollMagic.Controller();`
	`2`	`+lettimeline=newTimelineMax();`
	`3`	`+`
	`4`	`+timeline`
	`5`	`+.to(".rock",10,{y:-300})`
	`6`	`+.to(".girl",10,{y:-200},"-=10")`
	`7`	`+.fromTo(".background",{y:-50},{y:0,duration:10},"-=10")`
	`8`	`+.to(".content",10,{top:"0%"},"-=10")`
	`9`	`+.fromTo(".content-images",{opacity:0},{opacity:1,duration:3})`
	`10`	`+.fromTo(".text",{opacity:0},{opacity:1,duration:3});`
	`11`	`+`
	`12`	`+letscene=newScrollMagic.Scene({`
	`13`	`+triggerElement:"section",`
	`14`	`+duration:"300%",`
	`15`	`+triggerHook:0,`
	`16`	`+})`
	`17`	`+.setTween(timeline)`
	`18`	`+.setPin("section")`
	`19`	`+.addTo(controller);`

Lines changed: 22 additions & 0 deletions

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -104,7 +104,7 @@`
`104`	`104`	`\| 96\|[Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/96-cloud%20hosting%20service)\|[Live Demo](https://codepen.io/solygambas/full/oNBrXYr)\|`
`105`	`105`	`\| 97\|[Terminal Style Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/97-terminal%20style%20landing%20page)\|[Live Demo](https://codepen.io/solygambas/full/BaWvXLG)\|`
`106`	`106`	`\| 98\|[Magazine Layout](https://github.com/solygambas/html-css-fifty-projects/tree/master/98-magazine%20layout)\|[Live Demo](https://codepen.io/solygambas/full/OJpGMyj)\|`
`107`		`-\| 99\|[Parallax Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/99-parallax%20website)\|[Live Demo](#)\|`
	`107`	`+\| 99\|[Parallax Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/99-parallax%20website)\|[Live Demo](https://codepen.io/solygambas/full/poeBdPr)\|`
`108`	`108`
`109`	`109`	`This repository is mostly based on 2 courses by Brad Traversy (2020):`
`110`	`110`

Comments

(0)