Bootstrap で Web サイトを作成しています。私は自分のウェブサイトに統合したいこの素晴らしいモーダル効果に出くわしました. ただし、これを行う方法に関する情報は見つかりませんでした。
参照: http://tympanus.net/Development/ModalWindowEffects/
特に効果 18: 'Make Way' 効果の CSS:
/* Slide from right with perspective on container */
.md-show.md-effect-18 ~ .container {
height: 100%;
overflow: hidden;
}
.md-show.md-effect-18 ~ .md-overlay {
background: rgba(143,27,15,0.8);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.md-show.md-effect-18 ~ .container,
.md-show.md-effect-18 ~ .md-overlay {
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 0% 50%;
-moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
transform-style: preserve-3d;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-o-animation: rotateRightSideFirst 0.5s forwards ease-in;
animation: rotateRightSideFirst 0.5s forwards ease-in;
}
@-webkit-keyframes rotateRightSideFirst {
50% {
-webkit-transform: translateZ(-50px) rotateY(5deg);
-moz-transform: translateZ(-50px) rotateY(5deg);
-ms-transform: translateZ(-50px) rotateY(5deg);
-o-transform: translateZ(-50px) rotateY(5deg);
transform: translateZ(-50px) rotateY(5deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translateZ(-200px);
-moz-transform: translateZ(-200px);
-ms-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
transform: translateZ(-200px);
}
}
@-moz-keyframes rotateRightSideFirst {
50% {
-moz-transform: translateZ(-50px) rotateY(5deg);
-ms-transform: translateZ(-50px) rotateY(5deg);
-o-transform: translateZ(-50px) rotateY(5deg);
-webkit-transform: translateZ(-50px) rotateY(5deg);
transform: translateZ(-50px) rotateY(5deg);
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-moz-transform: translateZ(-200px);
-ms-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
-webkit-transform: translateZ(-200px);
transform: translateZ(-200px);
}
}
@keyframes rotateRightSideFirst {
50% { -moz-transform: translateZ(-50px) rotateY(5deg); -ms-transform: translateZ(-50px) rotateY(5deg); -o-transform: translateZ(-50px) rotateY(5deg); -webkit-transform: translateZ(-50px) rotateY(5deg); transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
100% { -moz-transform: translateZ(-200px); -ms-transform: translateZ(-200px); -o-transform: translateZ(-200px); -webkit-transform: translateZ(-200px); transform: translateZ(-200px); }
}
.md-effect-18 .md-content {
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
opacity: 0;
}
.md-show.md-effect-18 .md-content {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: all 0.5s 0.1s;
-moz-transition: all 0.5s 0.1s;
-o-transition: all 0.5s 0.1s;
transition: all 0.5s 0.1s;
}
HTML ページ
<div class="modal fade" id="AddGameModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="myModalLabel">Woowie! Not so fast</h2>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<h4>Remember!</h4>
<p>You have to have the physical game in order to complete a share, no digital copies allowed.</p>
</div>
<h2>Please confirm you have entered the right game:</h2>
<div id="ConfirmDetails">
<h3>Title of the game</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet luctus sapien, ut lacinia felis. Sed adipiscing vitae orci at porttitor. Integer ullamcorper et risus vel interdum. Nulla rutrum, lectus quis vestibulum mollis, lectus nisi dapibus mi, at dapibus leo augue non dolor. Sed nec felis porttitor, bibendum augue sit amet, euismod tellus. Vivamus suscipit, purus id luctus dapibus, dui mauris ultricies orci, quis lacinia neque elit nec nisl. Pellentesque suscipit urna in nibh venenatis, a aliquet arcu mattis. Integer ultricies ipsum justo, eget interdum arcu auctor id. Donec ultricies sem quam, sed egestas turpis adipiscing quis. Maecenas sit amet faucibus nisl, nec tempus nulla. Maecenas porta lectus mi, non commodo odio suscipit et. Etiam ultrices neque et adipiscing tristique.</p>
<p>Platform of the game</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Oh damn wrong one!</button>
<button type="button" class="btn btn-success">Yes that's the one mate </button>
</div>
</div>
</div>
</div>