Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

CSSとJavaScriptを使用したライトボックスのアニメーション

CSSとJavaScriptを使用して、Webページでライトボックスのスタイルを設定できます。次の例はライトボックスのスタイルを設定します。

例

<!DOCTYPE html>
<html>
<style>
#parent {
   margin: 2%;
   padding: 0;
   box-sizing: border-box;
   background: cornflowerblue;
   text-align: center;
}
html,body {
   height:100%;
   max-height:100%;
   min-height:100%;
}
.smart {
   display: block;
   margin: 0 auto;
   width: 150px;
   height :150px;
}
.animation2 {
   -webkit-transition: .4s ease-in-out;
   -moz-transition: .4s ease-in-out;
   -ms-transition: .4s ease-in-out;
   -o-transition:.4s ease-in-out;
   transition:.4s ease-in-out;
}
.customLightbox img {
   position: absolute;
   margin: auto;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   max-width: 0%;
   max-height: 0%;
}
#lightbox-controls {
   position: fixed;
   height: 70px;
   width: 70px;
   top: -70px;
   right: 0;
   z-index: 2;
   background: rgba(0,0,0,.1);
}
#close-lightbox {
   display: block;
   position: absolute;
   overflow: hidden;
   height: 50px;
   width: 50px;
   text-indent: -5000px;
   right: 10px;
   top: 10px;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}
#close-lightbox:before {
   content: '';
   display: block;
   position: absolute;
   height: 0px;
   width: 3px;
   left: 24px;
   top :0;
   background: white;
}
#close-lightbox:after {
   content: '';
   display: block;
   position: absolute;
   width: 0px;
   height: 3px;
   top: 24px;
   left:0;
   background: white;
}
.customLightbox:target {
   top: 0%;
   bottom: 0%;
   opacity: 1;
}
.customLightbox:target img {
   max-width: 100%;
   max-height: 100%;
}
.customLightbox:target ~ #lightbox-controls {
   top: 0px;
}
.customLightbox:target ~ #lightbox-controls #close-lightbox:after {
   width: 50px;
}
.customLightbox:target ~ #lightbox-controls #close-lightbox:before {
   height: 50px;
}
@-webkit-keyframes smart {
   0% {
      -webkit-transform: rotate(2deg);
   }
   20% {-webkit-transform: rotate(-2deg);}
   40% {-webkit-transform: rotate(2deg);}
   60% {-webkit-transform: rotate(-2deg);}
   80% {-webkit-transform: rotate(2deg);}
   100% {-webkit-transform: rotate(-2deg);}
}
</style>
<body>
<div id="parent">
<h3>Lightbox Example</h3>
<a href="#picture" class="smart"><img src="https://images.unsplash.com/photo1611460116297-
586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=130&ixlib=rb1.2.1&q=80&w=130"/>
<div class="customLightbox" id="picture">
<img class="animation2" src="https://images.unsplash.com/photo-1611460116297-
586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=630&ixlib=rb1.2.1&q=80&w=630"/>
</div>
<div id="lightbox-controls" >
<a id="close-lightbox" class="animation2" href="#">Close Lightbox</a>
</div>
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSとJavaScriptを使用したライトボックスのアニメーション

CSSとJavaScriptを使用したライトボックスのアニメーション


  1. JavaScriptを使用してCSSルールをスタイルシートに追加する方法は？

    insertRule（）は、スタイルシートの定義された位置にルールを追加するのに役立ちますが、deleteRule（）は特定のスタイルを削除します。 次の例は、JavaScriptを使用してスタイルシートに追加できるCSSルールを示しています。 例 <!DOCTYPE html> <html> <head> <style type="text/css" id="custom"> body {    background-color: silver; } </style> &

  2. CSSとJavaScriptでアコーディオンを作成するにはどうすればよいですか？

    CSSとJavaScriptを使用してアコーディオンを作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .demo {    background-color: #eee;    cursor: pointer;    paddi