ساخت یک باکس برای نمایش عکس

[vahid66 3]

سلام و عرض ادب
آقا این سایت چطوری این بخش رو ساخته یعنی یک عکس با ارتفاع زیاد رو داخل یک باکس قرار داده و بطور خودکار از بالا تا پایین رو نمایش میده

لینک ها تنها برای اعضای سایت قابل نمایش است.

اینم لینک عکسش
لینک ها تنها برای اعضای سایت قابل نمایش است.

 

 

لینک ها تنها برای اعضای سایت قابل نمایش است.

[Masih 6,279]

درود.

کار خاصی نداره، کافیه یه div و تگ تصویر بنویسید و برای انیمیشن اسکرول بالا به پایین و برعکس هم از یک keyframes استفاده می کنید.

این کد رو در محل مورد نظر از قالبتون باید قرار بدید:

<div class="box-tasvir">
  
  <img src="https://up.20script.ir/file/99f7-023150.png">
  
</div>

بعد این کد رو در فایل CSS قالب قرار بدید:

.box-tasvir {
    overflow: hidden;
    height: 320px;
    width: 320px;
    position: relative;
    margin: 0 auto;
}
@keyframes masihscroll {
    0% {transform: translateY(0%);}
    50% {transform: translateY(-80%);}
    100% {transform: translateY(-0%);}
}
.box-tasvir img {
    width: 100%;
    height: auto;
    max-width: 100%;
    transition: all 3s;
    animation-duration: 25s;
    animation-name: masihscroll;
    animation-iteration-count: 1000;
}

 

 

پیش نمایش همین کد رو ببینید :

[vahid66 3]

در 1 ساعت قبل، Masih گفته است :

درود.

کار خاصی نداره، کافیه یه div و تگ تصویر بنویسید و برای انیمیشن اسکرول بالا به پایین و برعکس هم از یک keyframes استفاده می کنید.

این کد رو در محل مورد نظر از قالبتون باید قرار بدید:

<div class="box-tasvir">
  
  <img src="https://up.20script.ir/file/99f7-023150.png">
  
</div>

بعد این کد رو در فایل CSS قالب قرار بدید:

.box-tasvir {
    overflow: hidden;
    height: 320px;
    width: 320px;
    position: relative;
    margin: 0 auto;
}
@keyframes masihscroll {
    0% {transform: translateY(0%);}
    50% {transform: translateY(-80%);}
    100% {transform: translateY(-0%);}
}
.box-tasvir img {
    width: 100%;
    height: auto;
    max-width: 100%;
    transition: all 3s;
    animation-duration: 25s;
    animation-name: masihscroll;
    animation-iteration-count: 1000;
}

 

 

پیش نمایش همین کد رو ببینید :

خیلی ممنون عالی بود . فقط اگه بخوایم برای اینکه دورش یک قاب قرار بگیره (مثل صفحه لپ تاپ سایت پرتال ) یا رنگی بشه باید چیکار کرد؟

[Masih 6,279]

برای اینکه یک لپ تاپ یا موبایل یا هر چیز دیگه ای رو بتونید بکار ببرید، یک DIV دیگه اضافه می کنید و تصویر لپ تاپ یا موبایل رو بصورت پس زمینه توسط CSS تعریف می کنیم. یکمی هم با width و height باید کار کنید توی CSS تا بتونید محدوده ی عکس با محدوده ی لپ تاپ یا موبایل هم اندازه کنید.

یک نمونه لپ تاپ:

 

یک نمونه موبایل: