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

سوال

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

https://www.portal.ir/shopbuilder/

اینم لینک عکسش
https://www.portal.ir/themes/custom-5480/img/theme_preview_1.jpg

حل شد 0
, ۱۳۹۷/۱۱/۱۴ ۱۹:۱۳:۱۷ 1 پاسخ ها کاربر تازه 0

پاسخ ها ( 1 )

  1. SOLTANE GHALBHA
    1
    ۱۳۹۷/۱۱/۱۵ ۲۰:۵۱:۱۷
    پاسخ

    سلام دوست عزیز

    با transition تو css میتونی انجام بدی، نمونه کدی برات آماده کردم

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    ۲۰
    ۲۱
    ۲۲
    ۲۳
    ۲۴
    ۲۵
    ۲۶
    ۲۷
    ۲۸
    ۲۹
    ۳۰
    ۳۱
    ۳۲
    ۳۳
    ۳۴
    ۳۵
    ۳۶
    ۳۷
    ۳۸
    ۳۹
    ۴۰
    ۴۱
    ۴۲
    ۴۳
    ۴۴
    ۴۵
    ۴۶
    ۴۷
    ۴۸
    ۴۹
    ۵۰
    ۵۱
    ۵۲
    ۵۳
    ۵۴
    ۵۵
    ۵۶
    ۵۷
    ۵۸
    ۵۹
    ۶۰
    ۶۱
    ۶۲
    ۶۳
    ۶۴
    ۶۵
    ۶۶
    ۶۷
    ۶۸
    ۶۹
    ۷۰
    ۷۱
    ۷۲
    ۷۳
    ۷۴
    ۷۵
    ۷۶
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> اسکرول خودکار تصویر </title>
    <meta charset="UTF-8">
    </head>
    <style>
    body {
      background: #۲d97db;
    }
     
    .webpage {
      border-radius: ۱em;
      border: ۲em solid #fff;
      background: #e45763;
      background: #e25865 url(http://s9.picofile.com/file/8351231826/beporsam.jpg) no-repeat top left;
      background-size: ۹۸% auto;
      width: ۴۰em;
      height: ۳۰em;
      position: absolute;
      top: ۵۰%;
      left: ۵۰%;
      transform: translate(-۵۰%, -۵۰%);
      animation: scroll ۵s infinite cubic-bezier(.۵۲, -۰.۳۹, .۳, ۱.۴۳);
    }
     
    @keyframes scroll {
      ۰,
      10% {
        background-position: ۰ ۰;
      }
      ۲۰%,
      30% {
        background-position: ۰ -۲۲em;
      }
      ۵۰%,
      60% {
        background-position: ۰ -۵۰em;
      }
      ۹۰%,
      100% {
        background-position: ۰ ۰;
      }
    }
     
    .hover-message {
      background: rgba(۰, ۰, ۰, ۰.۵);
      border-radius:۰.۵em;
      position: absolute;
      top: ۴em;
      right: ۴em;
      bottom: ۴em;
      left: ۴em;
      line-height: ۶.۷۵em;
      font-size: ۲em;
      font-family: sans-serif;
      color: #fff;
      text-align: center;
      opacity:۰;
      transition:all ۰.۲s ease-out;
      transform:translateY(۰.۸em);
    }
    .webpage:hover {
      animation-play-state: paused;
    }
    .webpage:hover .hover-message{
      opacity: ۱;
      transform:none;
    }
    </style>
    <body>
    <div class="webpage">
    <div class="hover-message">توقف وقتی که ماوس میاد رو عکس</p>
    </div>
    </body>
    </html>

    موفق باشید.

    بهترین پاسخ

ارسال یک پاسخ