swiper实现全屏垂直滚动幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:swiper实现全屏垂直滚动幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.4.5.1.css"> <style> :root { --dark-green: #9cc675; --dark-yellow: #e89a3d; --extra-light-brown:#fdf0d7; --light-brown: #ecd5ab; --dark-brown:#915b40; --light-yellow:#f8e3a8; --light-red:#f3ac99; --light-teal:#a6c8cc; --light-gray:#ddd5d6; --default-color: #a6c8cc; --secondry-color: #e89a3d; } html, body { position: relative; height: 100%; font-family: sans-serif; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { font-size: 18px; color:#fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 60px; } .parallax-bg { position: absolute; left: 0; top: 0; width: 130%; height: 100%; -webkit-background-size: cover; background-size: cover; background-position: center; } .swiper-slide .subtitle { padding-left: 60px; } .colored-container { width: 100%; height: 100%; position: relative; background: #fff; } .halfbox { content: ''; position: absolute; top: 0; left: 0; background: var(--default-color); width: 50%; height: 100%; padding: 50px 50px; box-sizing: border-box; } .slidebox { position: relative; width: 450px; } .bordered-img { width: 350px; position: relative; } .bordered-img img{ width: 100%; height: 100%; padding: 2px; } .bordered-img:before, .bordered-img:after { content: ''; border: 8px solid #fff; width: 100%; height: 96%; position: absolute; display: block; } .bordered-img:after { border-color: var(--secondry-color); top: 0; /* left: 2px; */ width: 29%; right: -10px; border-left-width: 0; } .title { font-size: 50px; text-transform: uppercase; position: relative; letter-spacing: 3px; font-weight: bold; margin-left: 18px; color: var(--secondry-color); } .title >span { color: var(--default-color); margin-right: 15px; } .tag-box { --size: 110px; background: var(--default-color); /*color: var(--dark-brown);*/ border: 5px solid #fff; width: var(--size); height: var(--size); position: absolute; left: -95px; top: 70px; font-size: 30px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 0 22px #00000029; } .swiper-slide .subtitle { font-size: 18px; color: #888; font-weight: 300; padding: top; margin: 15px 0; margin-bottom: 50px; } .content-box { position: absolute; left: 62%; width: 300px; top: 8%; text-align: right; } .btn.btn-main { background: var(--secondry-color); color: #fff; font-size: 16px; font-weight: 400; outline: none; border:none; position: relative; padding: 15px 40px; } .btn.btn-main:before { content: ''; width: 5px; background: var(--dark-brown); height: 100%; position: absolute; top: 0; left: 0; } .slider-nav-wrapper { width: 10%; position: absolute; top: 85%; margin: auto; left: 0; right: 0; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; z-index: 10; cursor: pointer; background-position: center; background-repeat: no-repeat; background: var(--secondry-color); padding: 0px; background-repeat: no-repeat; width: 45px; height: 45px; border-radius: 50%; background-position: center; padding: 3px; box-shadow: bord; box-sizing: border-box; background-size: 17px !important; } .verticle-animation .swiper-slide { display: flex; justify-content: flex-end; } .slidebox { margin-right: 100px; margin-top: 50px; } .swiper-pagination { position: absolute; left: 0; right: inherit !important; } .swiper-pagination-bullet { width: 20px; height: 4px; display: inline-block; border-radius: 100%; background: #000; border-radius: 0; opacity: 1; margin: 14px 0 !important; transition: all .3s; } .swiper-pagination-bullet-active { opacity: 1; background: #000000; width: 30px; } .team-info .team-info-item { font-size: 22px; padding: 15px 30px; display: none; position: absolute; display: none; } .team-info .team-info-item.active { display: block; } @-webkit-keyframes team-info-item { from { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); } } .team-info-item.active .heading, .team-info-item.active .content{ -webkit-animation-name: team-info-item; animation-name: team-info-item; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: 0s; } .team-info-item.active .content p { font-weight: 300; } .team-info-item.active .content { -webkit-animation-delay: .2s; } </style> </head> <body> <!-- partial:index.partial.html --> <!-- Swiper --> <div class="colored-container"> <div class="swiper-container verticle-animation"> <div class="halfbox team-info"> <li class="team-info-item active"> <h1 class="heading">Hi, my name is Aqil </h1> <article class="content"> <p> I'm AU/UX designer developer please don't forget to like <br> your likes Mean A lot to me </p> <p> Fork on Github <a href="">Md Aqil</a> </p> <p> Find My Portfolio: <a href="">Md Aqil</a> </p> </article> </li> <li class="team-info-item active"> <h1 class="heading">Hi, my name is Aqil </h1> <article class="content"> <p> I'm AU/UX designer developer please don't forget to like <br> your likes Mean A lot to me </p> <p> Fork on Github <a href="">Md Aqil</a> </p> <p> Find My Portfolio: <a href="">Md Aqil</a> </p> </article> </li> <li class="team-info-item active"> <h1 class="heading">Hi, my name is Aqil </h1> <article class="content"> <p> I'm AU/UX designer developer please don't forget to like <br> your likes Mean A lot to me </p> <p> Fork on Github .........完整代码请登录后点击上方下载按钮下载查看
网友评论0