Ինչպես ստեղծել լուսանկարների պատկերասրահ՝ օգտագործելով HTML, CSS

Սա կարող է թվալ դժվարին խնդիր, բայց դիզայնի և ֆունկցիոնալության համար շատ հնարավորություններ է բացում: Այս հոդվածում մենք ձեզ ցույց կտանք, թե ինչպես ստեղծել վիդեո պատկերասրահ ձեր կայքի համար՝ օգտագործելով HTML և տրամադրել պատրաստի կոդի օրինակ՝ գործընթացը պարզեցնելու համար:

Օրինակի հիման վրա ստեղծենք վիդեո պատկերասրահ։ Ենթադրենք, մենք ունենք ճամփորդական կայք, որտեղ պետք է տեղադրենք մի քանի տեսանյութ տարբեր տարածաշրջանների մասին:

Յուրաքանչյուր տեսանյութ ներկայացված է վերնագրով բլոկի տեսքով: Երբ սավառնում եք դրա վրա, բլոկը աստիճանաբար մեծանում է, և սեղմելուց հետո տեսանյութը սկսվում է նվագարկիչում:

Հիմնական աշխատանքից առաջ.

  • Եկեք պատրաստենք վիդեո ֆայլերը և տեղադրենք դրանք փաստաթղթի ներսում առանձին թղթապանակում:
  • Եկեք ստեղծենք ֆայլերը՝ index.html - նշագրման համար, style.css - ոճերի համար, main.js - սկրիպտների համար։
  • index.html ֆայլում, <head> թեգի ներսում, դուք պետք է տրամադրեք այլ ֆայլերի հղումներ և ավելացնեք jquery helper գրադարանը։ Ամեն ինչ կարծես այսպիսին է.
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script src="main.js"></script>
  </head>

Այժմ եկեք սկսենք ստեղծել պատկերասրահ՝ հետևելով ստորև նշված քայլերին:

HTML կառուցվածքը

Բացեք index.html ֆայլը:

<body> թեգի ներսում մենք վերնագիր ենք դնում <h1> թեգով և «Ճամփորդել Ռուսաստանի շուրջ» տեքստով:

Հաջորդը, եկեք ստեղծենք կոնտեյներային div պատկերասրահների համար «gallery» դասով:

<h1>Ճանապարհորդություն Ռուսաստանում</h1>
<div class="gallery">
</div>

Այս կոնտեյների ներսում կլինեն վերնագրերի և տեսանյութերի փաթաթման բլոկներ:

<div class="gallery">
  <div class="wrap_video_item">
    <h3></h3>
  </div> <!-- END wrap_video_item -->
</div> <!-- END gallery -->

Այժմ մենք պետք է տեսանյութը վերբեռնենք մեր պատկերասրահում: Դա անելու համար wrapper-ի ներսում <div class="wrap_video_item"> մենք կտեղադրենք բլոկ` օգտագործելով <div> թեգը և «video_item» դասը: Եկեք դրա ներսում տեսանյութ ավելացնենք։ Դա անելու համար մենք օգտագործում ենք <video> տարրը, որը պարունակում է src հատկանիշը, որը ցույց է տալիս դեպի վիդեո ֆայլ տանող ուղին, և նվագարկիչի կառավարում ավելացնելու կառավարներ: Քանի որ հենց սկզբում մենք ֆայլերը տեղադրեցինք առանձին թղթապանակում, մեր ճանապարհն այսպիսի տեսք ունի՝ video/file_name։ Որպես օրինակ՝ տեղադրենք Սանկտ Պետերբուրգի մասին տեսանյութ և անմիջապես գրենք վերնագրում։

<div class="container">
  <div class="gallery">
    <div class="wrap_video_item">
      <h3>Санкт-Петербург</h3>
      <div class="video_item">
        <video src="video/piter.mp4" muted controls></video>
      </div>
    </div> <!-- END wrap_video_item -->
  </div>
</div>

Այս կերպ դուք կարող եք ավելացնել մի քանի փաթաթված բլոկներ և փոխել հղումները դեպի ցանկալի տեսանյութեր:

CSS ոճեր

Այժմ, երբ պատկերասրահի հիմնական կառուցվածքը պատրաստ է, կարող եք սկսել այն նախագծել: Բացեք style.css ֆայլը:

Նախ, եկեք սահմանենք մեր կոնտեյների ոճերը «պատկերասրահ» դասի հետ:

.gallery {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

Այնուհետև մենք ոճավորում ենք փաթաթման բլոկը և <video> պիտակը: Մենք կնշենք լայնությունը, իսկ բարձրությունը կլինի ավտոմատ:

 .wrap_video_item{
    width: 30%;
    height: auto;
  }
  video{
    width: 100%;
    height: auto;
  }

Սահմանեք ոճերն այնպես, որ սավառնելիս բլոկը մեծանա:

 .video_item:hover{
    position: relative;
    transform: scale(1.5);
    z-index: 1;
    transition-duration: .5s;
    transition-timing-function: ease-out;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }

Դուք կարող եք նաև նշել ոճերը վերնագրերի համար:

h2 {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
  }
  h3{
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }

Javascript

Մեր պատկերասրահն ավելի ինտերակտիվ դարձնելու համար կարող եք գրել փոքրիկ սցենար: Այն թույլ կտա մեզ սկսել տեսանյութը, երբ կուրսորը սավառնում է, և դադարեցնել, երբ այն հեռանում է:

Եկեք main.js ֆայլին ավելացնենք հետևյալ կոդը

$(document).ready(function() {
    $("video").on("mouseover", function(event) {
      this.play();
    }).on('mouseout', function(event) {
      this.pause();
    });
  })

Պատկերասրահը պատրաստ է։ Մնում է միայն ավելացնել այլ վիդեո ֆայլեր HTML փաստաթղթի ներսում

Ձեռքով կոդ գրելը հնարավորություն է տալիս լիովին վերահսկել դիզայնը և ֆունկցիոնալությունը, բայց այս մոտեցման բացասական կողմերը կան.

  • Գործընթացը երկար ժամանակ է պահանջում և պահանջում է զգույշ վրիպազերծում, հատկապես մեծ քանակությամբ տեսանյութերի դեպքում:
  • Պահանջվում է HTML, CSS և JavaScript-ի ողջամիտ իմացություն:
  • Կարող են լինել տարբեր բրաուզերների համատեղելիության հետ կապված խնդիրներ և կարող են պահանջել լրացուցիչ կազմաձևում:

Պատրաստ լուծումները, ինչպիսիք են Qform վիդեո վիջեթը, ապահովում են տեսանյութեր կայքում տեղադրելու հարմար և արագ միջոց՝ առանց ծրագրավորումը հասկանալու անհրաժեշտության: Դրա միջոցով դուք կարող եք կարգավորել գործարկման պարամետրերը, ցուցադրման տեսակը, գործողության կանչի կոճակը և նպատակներ ուղարկել վերլուծական համակարգ: Սա խնայում է ձեր ժամանակը և հեշտացնում է գործընթացը:

Ձեզ դուր եկավ հոդվածը: Կիսվել!!