Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section id="start">

  <img id="img" class="size" src="https://iconape.com/wp-content/files/ux/51831/svg/digikala-2.svg">
  <img class="img_arrow size" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Arrow-down.svg">
  <img class="img_arrow size" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Arrow-down.svg">
  <img class="img_arrow size" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Arrow-down.svg">
</section>

<h2 class="h2">راهنمای استفاده از سرویس پرداخت در محل دیجی‌کالا</h2>
<p class="p">به کاربران محترم توصیه می‌شود جهت تسریع در پردازش سفارش، پرداخت خود را به صورت اینترنتی انجام دهند. با این وجود، برای آسودگی بیشتر آن دسته از مشتریانی که تمایل دارند هزینه سفارش خود را هنگام دریافت آن پرداخت کنند، دیجی‏‌کالا این امکان را فراهم آورده است که در صورتی که آدرس تحویل سفارش آن‌ها، تهران یا یکی از شهرهای تحت پوشش تحویل اکسپرس دیجی‌کالا باشد، هزینه را هنگام تحویل گرفتن سفارش پرداخت کنند. لازم به ذکر است، سفارش‌هایی که از طریق باربری ارسال می‌شوند یا مبلغ آن‌ها بیشتر از سی میلیون ریال است، لازم است پیش از ارسال، از طریق پرداخت اینترنتی تسویه شوند. از آن‌جا که همگی ماموران تحویل سفارش دیجی‏‌کالا دستگاه‏‏‌های کارت خوان سیار (POS) همراه دارند، می‌توان هنگام تحویل سفارش در محل، با استفاده از کارت‌های عضو شبکه شتاب پرداخت خود را انجام داد.</p>
<br>
<br>

<h2 class="h2">راهنمای مرجوع کردن و ضمانت تعویض دیجی‌کالا</h2>
<p class="p">آسودگی خاطر و رضایت‌مندی مشتریان همواره از اولویت‏‌های دیجی‌کالا بوده است و دیجی‌کالا در این راستا می‏‌کوشد تا هر سفارش در شرایط مطلوب و مورد انتظار به دست مشتری برسد. با وجود این ممکن است مشتریان محترم پس از خرید، با مسائلی روبرو شوند که درچنین مواردی خدماتی در چارچوب خدمات پس از فروش در نظر گرفته شده است. با توجه به گستردگی گروه‌های کالای ارائه شده در وب‌سایت دیجی‌کالا، همه محصولاتی که باید از نظر فیزیکی سالم به دست مصرف‌کننده برسند (مانند کالاهای گروه‌ فرهنگ و هنر، ورزش و سرگرمی، پوشاک و کفش، لوازم خانگی غیربرقی، اسباب‌بازی، عطر و ادوکلن، زیورآلات و اکسسوری، لوازم آرایشی و بهداشت و مراقبت، لوازم شخصی برقی و غیربرقی، کالاهای مصرفی مانند کارتریج و جوهر چاپگر و قطعات داخلی کامپیوتر مانند کارت گرافیک، مادربرد، پردازنده و نظایر آن، گروه فرش، لوازم مصرفی خودرو و لوازم حیوانات خانگی) دارای گارانتی اصالت و سلامت فیزیکی هستند و تا هفت روز امکان مرجوع کردن کالا وجود دارد. اما اقلامی که به عنوان هدیه‌ از طرف دیجی‌کالا همراه سفارش ارسال و در فاکتور فروش با مبلغ صفر ریال درج شده‌اند، مشمول ۷ روز ضمانت تعویض نیستند. برای سایر محصولاتی که نیاز به مهلت تست دارند، دیجی‌کالا ۷ روز فرصت برای بازگشت درنظر گرفته است.</p>
<button class="btn_more">
  <h4>اطلاعات بیشتر</h4>
</button>
              
            
!

CSS

              
                body {
  background: #efefef;
  font-family: sans-serif;
  margin: 0;
}
.header {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #fee;
}
#img {
  padding: 20px;
  width: 80%;
  height: 50%;
}
#start {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  width: 100%;
  height: 100vh; /* if you don't want it to take up the full screen, reduce this number */
  /*   overflow: hidden; */
  background-size: cover;
}

p {
  margin-left: 150px;
  text-align: center;
  color: #636363;
  font-size: 2vw;
  width: 80%;
  height: 60%;
}
@media screen and (max-width: 600px) {
  p {
    font-size: 3vw;
  }
}
.img_arrow {
  width: 40px;
  height: 40px;
}
.h2 {
  margin-right: 190px;
  text-align: right;
  font-size: 2vw;
}
.btn_more {
  position: relative;
  background-color: #035653;
  width: 200px;
  height: 60;
  border-radius: 10%;
  right: -700px;
}
.btn_more h4 {
  font-size: 1vw;
}

              
            
!

JS

              
                gsap.registerPlugin(ScrollTrigger, GSDevTools, SplitText);
let split_h2;
let split_p;
function init() {
  split_h2 = new SplitText(".h2", { type: "words" });
  split_p = new SplitText(".p", { type: "lines" });
  var animation = gsap.timeline({ repeat: 10 });
  animation
    .from("#img", { opacity: 0, duration: 2 })
    .from(".img_arrow", {
      opacity: 0,
      scale: 0,
      stagger: 0.3,
      y: -20,
      repeat: -1,
      ease: "back(2)",
      scrollTrigger: {
        trigger: ".img_arrow",

        // start: "top 60%",
        // end: "bottom 40%",
        //events: onEnter onLeave onEnterBack onLeaveBack
        toggleActions: "play pause none none"
        //options: play, pause, resume, reset, restart, complete, reverse,none
      }
    })

    .from(split_h2.words, {
      opacity: 0,
      x: 50,
      scale: 3.5,

      ease: "back(2)",
      stagger: { each: 0.05, from: "end" },
      scrollTrigger: {
        trigger: ".img_arrow",

        // start: "top 60%",
        // end: "bottom 40%",
        //events: onEnter onLeave onEnterBack onLeaveBack
        toggleActions: "play none none none"
        //options: play, pause, resume, reset, restart, complete, reverse,none
      }
    })

    .from(split_p.lines, {
      transformOrgin: "50% 50% -200",
      rotationX: -90,
      rotationY: -180,
      opacity: 0,
      duration: 2,
      stagger: { amount: 0.5, from: "left" },
      ease: "power4.out",
      scrollTrigger: {
        trigger: ".img_arrow",

        // start: "top 60%",
        // end: "bottom 40%",
        //events: onEnter onLeave onEnterBack onLeaveBack
        toggleActions: "play none none none"
        //options: play, pause, resume, reset, restart, complete, reverse,none
      }
    });
  GSDevTools.create({ animation: animation });
}
window.addEventListener("load", init);

              
            
!
999px

Console