<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> *{ padding: 0; margin: 0; } body { padding: 80px 0; } .bg-video { pointer-events: none; min-width: 100%; height: 100%; left: 50%; transform: translateX(-50%); object-fit: cover; -o-object-fit: cover; } .gFPgkd { background: #fff; display: flex; } .sc-kwTAbF { -webkit-box-align: center; align-items: center; display: flex; flex: 1 1 40%; flex-direction: row; -webkit-box-pack: center; justify-content: center; position: relative; text-align: left; } .sc-izAXJK { padding-top: 80px; display: grid; flex: 1 1 60%; max-width: 60vw; overflow: hidden; height: 600px; pointer-events: none; -webkit-box-pack: center; justify-content: center; position: relative; } .sc-izAXJK .bg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 90%; } .sc-box { max-width: 350px; position: relative; } .sc-box>ul { padding: 0; } .sc-box li { list-style: none; padding-left: 40px; position: relative; cursor: pointer; } .sc-progress-bg { position: absolute; content: ''; height: 100%; top: 0; left: 0; width: 3px; background-color: rgb(241, 241, 241); } .item-title { font-weight: 700; letter-spacing: 0.1em; line-height: 1.375em; text-transform: uppercase; font-size: 14px; color: #000; margin-bottom: 30px; transition: color 250ms ease 0s; opacity: .5; } .item-info { font-weight: 300; letter-spacing: 0.025em; line-height: 1.5em; font-size: 13px; color: rgb(101, 102, 106); opacity: 0; transition: height .7s; height: 0; overflow: hidden; } .sc-box li:first-child .item-info { height: 92px; opacity: 1; } .sc-box li:first-child .item-title { opacity: 1; } .sc-progress { position: absolute; top: 0; left: 0; width: 3px; background-color: #55bed5; height: 30%; opacity: 0; } .sc-box li:first-child .sc-progress { opacity: 1; } .gFPgkd-web { display: none; } .sc-izAXJK { font-size: 100px; } .sc-dx { position: absolute; background: #fff; transition: all .5s; opacity: 0; width: 656px; height: 355px; left: 50%; top: 96px; transform: translateX(-50%) } </style> <body> <div class="gFPgkd"> <div class="sc-kwTAbF"> <div class="sc-box"> <div class="sc-progress-bg"></div> <ul> <li class="sc-li"> <div class="sc-progress"></div> <div class="item-title">TRAIN WITH A RHYTHM GAME</div> <div class="item-info">Experience a fun interactive game in which you ride to the rhythm and score by your rhythmic pedal accuracy.</div> </li> <li class="sc-li"> <div class="sc-progress"></div> <div class="item-title">CONNECT WITH YOUR PALS</div> <div class="item-info">Accept the challenge from friends and family. Climb up the leaderboard to make the most out of your fitness adventure.</div> </li> <li class="sc-li"> <div class="sc-progress"></div> <div class="item-title">PERFORMANCE TRACKING</div> <div class="item-info">Our sensors won't miss a single pedal and receive instant performance tracking results at every beat.</div> </li> <li class="sc-li"> <div class="sc-progress"></div> <div class="item-title">DIVERSE CLASS TPYES</div> <div class="item-info">Experience studio fitness from the comfort of your own home with thousands of on-demand classes to choose from every day.</div> </li> </ul> </div> </div> <div class="sc-izAXJK"> <img class="bg" src="https://cdn.shopifycdn.net/s/files/1/0592/3766/2905/files/AEAA.jpg?v=1629972745"> <div class="sc-dx"> <video class="bg-video" style="position: absolute;z-index:1;" webkit-playsinline="true" playsinline="true" autoplay="autoplay" muted="muted" loop="loop" src="https://cdn.shopify.com/s/files/1/0592/3766/2905/files/1_1920X1080_-_01.mp4?v=1629884150"></video> </div> <div class="sc-dx"> <video class="bg-video" style="position: absolute;z-index:1;" webkit-playsinline="true" playsinline="true" autoplay="autoplay" muted="muted" loop="loop" src="https://cdn.shopify.com/s/files/1/0592/3766/2905/files/2_1920X1080_-_01.mp4?v=1629884150"></video> </div> <div class="sc-dx"> <video class="bg-video" style="position: absolute;z-index:1;" webkit-playsinline="true" playsinline="true" autoplay="autoplay" muted="muted" loop="loop" src="https://cdn.shopify.com/s/files/1/0592/3766/2905/files/3_1920X1080_-_01.mp4?v=1629884150"></video> </div> <div class="sc-dx"> <video class="bg-video" style="position: absolute;z-index:1;" webkit-playsinline="true" playsinline="true" autoplay="autoplay" muted="muted" loop="loop" src="https://cdn.shopify.com/s/files/1/0592/3766/2905/files/4_1920X1080_-_01.mp4?v=1629884150"></video> </div> </div> </div> <script type="text/javascript"> function Effect(){ this.sc_li = document.getElementsByClassName('sc-li'); this.item_title = document.getElementsByClassName('item-title'); this.sc_progress = document.getElementsByClassName('sc-progress'); this.sc_info = document.getElementsByClassName('item-info'); this.sc_dx = document.getElementsByClassName('sc-dx'); this.timer = null this.proHeight = null this.setTimer = null this.height = 30 } Effect.prototype = { init: function(){ for (let i = 0; i < this.sc_li.length; i++) { this.sc_li[i].addEventListener("click", (e) => { this.activeFun(i) }); } }, activeFun: function(index){ this.height = 30 this.height2 = 30 clearInterval(this.timer) clearInterval(this.proHeight) clearTimeout(this.setTimer) this.animation(index) let num = index + 1 if (num === this.sc_progress.length) { num = 0 } this.timer = setInterval(() => { clearInterval(this.proHeight) clearTimeout(this.setTimer) this.animation(num) if (num === this.sc_progress.length - 1) { num = 0 } else { num++ } }, 5000) }, animation: function(index){ for (let i = 0; i < this.sc_progress.length; i++) { if (i === index) { this.sc_dx[i].style.opacity = "1" this.sc_progress[i].style.opacity = "1" this.sc_info[i].style.opacity = "1" this.sc_info[i].style.height = '92px' this.sc_li[i].style.pointerEvents = 'none' this.item_title[i].style.opacity = "1" this.height = 30 this.proHeight = setInterval(() => { this.sc_progress[i].style.height = this.height++ + "%" }, 71.428571) this.setTimer = setTimeout(() => { clearInterval(this.proHeight) clearTimeout(this.setTimer) }, 5000) } else { this.height = 30 this.sc_dx[i].style.opacity = "0" this.sc_li[i].style.pointerEvents = 'auto' this.sc_progress[i].style.opacity = "0" this.sc_progress[i].style.height = "30%" this.sc_info[i].style.opacity = 0 this.sc_info[i].style.height = 0 this.item_title[i].style.opacity = "0.5" } } } } </script> <script type="text/javascript"> var aa = new Effect() aa.init() aa.activeFun(0) </script> </body> </html>
