javascript - 停止
我是编程界的新手,当教授点击“PLAY MUSIC”这个词时,他要求我停止弹出并在主页背景中播放音乐。我不知道该怎么做,尽管我已经尝试了很多。甚至有可能做到这一点吗?
问题描述
我是编程界的新手,当教授点击“PLAY MUSIC”这个词时,他要求我停止弹出并在主页背景中播放音乐。我不知道该怎么做,尽管我已经尝试了很多。甚至有可能做到这一点吗?
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
@keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div><a class="sig" href="https://audio.code.org/win1.mp3" target="_blank">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
您可以按照以下步骤操作:
使用包含您要播放的音频的 URI 的属性<audio>
向您的 HTML添加一个标签。src
这个标签是将从中加载内容的标签https://audio.code.org/win1.mp3
。
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
从您的锚 ( ) 元素中删除该href
属性,因为它不会再将用户带到音频资源网页。相反,它将像一个按钮一样工作,当点击时负责播放音频。.sig
<a>
将<a>
元素作为元素工作<button>
并不利于可访问性,除非您通过role="button"
. 此属性将表明您<a>
将作为按钮工作。<button>
是的,只要您愿意修改 CSS 以保持美观,您也可以用标签替换该标签。
<a class="sig" role="button">PLAY MUSIC</a>
在您的 JavaScript 代码中,将点击事件附加到.sig
,告诉它在点击时播放您想要的音频。
$('.sig').on('click', () => $('#myAudio').get(0).play());
在下面试试。
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
$('.sig').on('click', () => $('#myAudio').get(0).play());
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
@keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div>
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
<a class="sig" role="button">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
解决方案
您可以按照以下步骤操作:
使用包含您要播放的音频的 URI 的属性<audio>
向您的 HTML添加一个标签。src
这个标签是将从中加载内容的标签https://audio.code.org/win1.mp3
。
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
从您的锚 ( ) 元素中删除该href
属性,因为它不会再将用户带到音频资源网页。相反,它将像一个按钮一样工作,当点击时负责播放音频。.sig
<a>
将<a>
元素作为元素工作<button>
并不利于可访问性,除非您通过role="button"
. 此属性将表明您<a>
将作为按钮工作。<button>
是的,只要您愿意修改 CSS 以保持美观,您也可以用标签替换该标签。
<a class="sig" role="button">PLAY MUSIC</a>
在您的 JavaScript 代码中,将点击事件附加到.sig
,告诉它在点击时播放您想要的音频。
$('.sig').on('click', () => $('#myAudio').get(0).play());
在下面试试。
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
$('.sig').on('click', () => $('#myAudio').get(0).play());
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
@keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div>
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
<a class="sig" role="button">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
推荐阅读
- testing - 不同类别的不同测试(Nora ui)
- netbeans - Netbeans 构建将时间戳添加到 project.properties
- java - 如何使用 graaljs ?有没有地方可以获取 .jar 文件/文件?
- codeigniter - 无法访问受保护的属性 CI_DB_mysqli_driver::$_protect_identifiers
- android - React Native - 禁用“屏幕大小”设置
- javascript - 使异步代码像同步一样工作 - Javascript
- chatbot - Facebook 信使聊天机器人
- java - 如何检查文件夹中文件名中的元素是否包含字符串数组列表中的字符串名称?
- c - 如何在C中打印双指针值
- python-3.x - 在python中的函数内使用函数的实用程序
我是编程界的新手,当教授点击“PLAY MUSIC”这个词时,他要求我停止弹出并在主页背景中播放音乐。我不知道该怎么做,尽管我已经尝试了很多。甚至有可能做到这一点吗?
问题描述
我是编程界的新手,当教授点击“PLAY MUSIC”这个词时,他要求我停止弹出并在主页背景中播放音乐。我不知道该怎么做,尽管我已经尝试了很多。甚至有可能做到这一点吗?
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
@keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div><a class="sig" href="https://audio.code.org/win1.mp3" target="_blank">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
您可以按照以下步骤操作:
使用包含您要播放的音频的 URI 的属性
<audio>
向您的 HTML添加一个标签。src
这个标签是将从中加载内容的标签https://audio.code.org/win1.mp3
。<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
从您的锚 ( ) 元素中删除该
href
属性,因为它不会再将用户带到音频资源网页。相反,它将像一个按钮一样工作,当点击时负责播放音频。.sig
<a>
将
<a>
元素作为元素工作<button>
并不利于可访问性,除非您通过role="button"
. 此属性将表明您<a>
将作为按钮工作。<button>
是的,只要您愿意修改 CSS 以保持美观,您也可以用标签替换该标签。<a class="sig" role="button">PLAY MUSIC</a>
在您的 JavaScript 代码中,将点击事件附加到
.sig
,告诉它在点击时播放您想要的音频。$('.sig').on('click', () => $('#myAudio').get(0).play());
在下面试试。
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
$('.sig').on('click', () => $('#myAudio').get(0).play());
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
@keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div>
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
<a class="sig" role="button">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
您可以按照以下步骤操作:
使用包含您要播放的音频的 URI 的属性
<audio>
向您的 HTML添加一个标签。src
这个标签是将从中加载内容的标签https://audio.code.org/win1.mp3
。<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
从您的锚 ( ) 元素中删除该
href
属性,因为它不会再将用户带到音频资源网页。相反,它将像一个按钮一样工作,当点击时负责播放音频。.sig
<a>
将
<a>
元素作为元素工作<button>
并不利于可访问性,除非您通过role="button"
. 此属性将表明您<a>
将作为按钮工作。<button>
是的,只要您愿意修改 CSS 以保持美观,您也可以用标签替换该标签。<a class="sig" role="button">PLAY MUSIC</a>
在您的 JavaScript 代码中,将点击事件附加到
.sig
,告诉它在点击时播放您想要的音频。$('.sig').on('click', () => $('#myAudio').get(0).play());
在下面试试。
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
$('.sig').on('click', () => $('#myAudio').get(0).play());
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
@-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
@keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div>
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
<a class="sig" role="button">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>