279 lines
9.8 KiB
HTML
279 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Mars Explorer ScrollTrigger demo</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div class="circle">
|
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<circle id="circle" cx="50" cy="50" r="4" stroke="green" stroke-width="1px" fill-opacity="0"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="scroller">
|
|
<svg viewBox="0 0 100 65" xmlns="http://www.w3.org/2000/svg">
|
|
<polygon points="0,0 20,0 50,40 80,0 100,0 50,65" stroke="green" stroke-width="1px" fill="green"/>
|
|
</svg>
|
|
<svg viewBox="0 0 100 65" xmlns="http://www.w3.org/2000/svg">
|
|
<polygon points="0,0 20,0 50,40 80,0 100,0 50,65" stroke="green" stroke-width="1px" fill="green"/>
|
|
</svg>
|
|
<svg viewBox="0 0 100 65" xmlns="http://www.w3.org/2000/svg">
|
|
<polygon points="0,0 20,0 50,40 80,0 100,0 50,65" stroke="green" stroke-width="1px" fill="green"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="loader">Loading<div></div><div></div><div></div></div>
|
|
<div class="watermark">Models and resources from <a href="https://trek.nasa.gov/">NASA</a></div>
|
|
|
|
<div class="section welcome"></div>
|
|
<div class="content">
|
|
<div class="section olympus">
|
|
<div class="section__content">
|
|
<div class="title"></div>
|
|
<div class="info">
|
|
<div class="info__row">
|
|
<div class="coords">
|
|
<div class="lat"></div>
|
|
<div class="lon"></div>
|
|
<div class="nav">
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1px"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/PIA00300_hires.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info__row">
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/calderaOMons_marsexpress_lg.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section curiosity">
|
|
<div class="section__content">
|
|
<div class="title"></div>
|
|
<div class="info">
|
|
<div class="info__row">
|
|
<div class="coords">
|
|
<div class="lat"></div>
|
|
<div class="lon"></div>
|
|
<div class="nav">
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/575963main_PIA14297_full.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info__row">
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/673885main_PIA15986-full_full.jpg" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/713264main_pia16457-full_full.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section valles">
|
|
<div class="section__content">
|
|
<div class="title"></div>
|
|
<div class="info">
|
|
<div class="info__row">
|
|
<div class="coords">
|
|
<div class="lat"></div>
|
|
<div class="lon"></div>
|
|
<div class="nav">
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/581433main_PIA00425_full.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info__row">
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/pia21274.jpg" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/pia21651.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section medusae">
|
|
<div class="section__content">
|
|
<div class="title"></div>
|
|
<div class="info">
|
|
<div class="info__row">
|
|
<div class="coords">
|
|
<div class="lat"></div>
|
|
<div class="lon"></div>
|
|
<div class="nav">
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/PIA00809_hires.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info__row">
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/PIA23522_hires.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section cydonia">
|
|
<div class="section__content">
|
|
<div class="title"></div>
|
|
<div class="info">
|
|
<div class="info__row">
|
|
<div class="coords">
|
|
<div class="lat"></div>
|
|
<div class="lon"></div>
|
|
<div class="nav">
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/PIA02381_hires.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info__row">
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/face2001_mgs.jpg" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/PIA04745_hires.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section tharsis">
|
|
<div class="section__content">
|
|
<div class="title"></div>
|
|
<div class="info">
|
|
<div class="info__row">
|
|
<div class="coords">
|
|
<div class="lat"></div>
|
|
<div class="lon"></div>
|
|
<div class="nav">
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/PIA00408_hires.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info__row">
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/PIA02049_hires.jpg" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/pia11176.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section deimos">
|
|
<div class="section__content">
|
|
<div class="title"></div>
|
|
<div class="info">
|
|
<div class="info__row">
|
|
<div class="coords">
|
|
<div class="lat"></div>
|
|
<div class="lon"></div>
|
|
<div class="nav">
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
|
|
<polyline id="line" points="20,5 50,100 100,100" fill="none" stroke="green" stroke-width="1"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/318064main_pia11826-full_full.jpg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info__row">
|
|
<div>
|
|
<div class="image-container">
|
|
<img class="image" src="https://assets.codepen.io/1443237/283561main_phobos2_hirise_big_full.jpg" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- partial -->
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.4/polyfill.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js'></script>
|
|
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/TextPlugin.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/ScrollTrigger.min.js'></script>
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r118/three.min.js'></script>
|
|
<script src='https://unpkg.com/three@0.118.0/examples/js/loaders/GLTFLoader.js'></script><script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|