کدهای جذاب و دیدنی (Lollipop Transition): پاپ آپ با استایل زیبا

کد پاپ آپ با استایل زیبا

در بعضی از سایت ها گاهی پیش آمد که وقتی دکمه ای را کلیک کرده بودید یک پاپ آپ (پنجره فرم) زیبا برایتان گشوده شده بود. در این نمونه، سورس کد (Lollipop Transition) جالب را در اختیار شما قرار دادیم.

همانطور که مشاهده می کنید، یک پاپ آپ زیبا زمانی که بر روی آیکون پایین صفحه کلیک میکنید ، نمایش داده می شود.

کدهای HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ShahCode.com - Lollipop Transition</title>
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Shah Code - Lollipop Transition</h1>
    <div class='wrap'>
      <div class='content'>
        <h2>خب سلام! خوش آمدید به شاه کد.</h2>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
      </div>
    </div>
    <a class='button glyphicon glyphicon-plus' href='#'></a>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="function.js"></script>
</body>
</html>

کدهای CSS:

body {
    background: #e6e6e6;
    width: 100%;
    height: 100vh;
    position: relative;
}

h1 {
    color: #c7c7c7;
    font-weight: 200;
    text-align: center;
    position: absolute;
    top: 45%;
    width: 100%;
}

h2 {
    color: #007fed;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

p {
    color: #001818;
}

.wrap {
    position: absolute;
    overflow: hidden;
    top: 10%;
    right: 10%;
    bottom: 85px;
    left: 10%;
    padding: 20px 50px;
    display: block;
    border-radius: 4px;
    transform: translateY(20px);
    transition: all 0.5s;
    visibility: hidden;
}
.wrap .content {
    opacity: 0;
}
.wrap:before {
    position: absolute;
    width: 1px;
    height: 1px;
    background: white;
    content: "";
    bottom: 10px;
    left: 50%;
    top: 95%;
    color: #fff;
    border-radius: 50%;
    -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active {
    display: block;
    visibility: visible;
    box-shadow: 2px 3px 16px silver;
    transition: all 600ms;
    transform: translateY(0px);
    transition: all 0.5s;
}
.wrap.active:before {
    height: 2000px;
    width: 2000px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-left: -1000px;
    margin-top: -1000px;
    display: block;
    -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrap.active .content {
    direction: rtl;
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.content p {
    text-align: justify;
}

a.button {
    padding: 11px 11px 13px 13px;
    outline: none;
    border-radius: 50%;
    background: #007fed;
    color: #fff;
    font-size: 24px;
    display: block;
    position: fixed;
    left: 50%;
    bottom: 20px;
    top: auto;
    margin-left: -25px;
    text-decoration: none;
    transition: transform 0.25s;
}
a.button:hover {
    text-decoration: none;
    background: #2198ff;
}
a.button.active {
    transform: rotate(135deg);
    transition: transform 0.5s;
}

کدهای JavaScript:

$('a').on('click', function() {
    $('.wrap, a').toggleClass('active');

    return false;
});

پروژه‌ی سورس کد را در اختیار شما قرار دادیم که می توانید نمونه ی پروژه را دانلود کرده و استفاده کنید.

امیدوارم لذت برده باشید.

کدهای جذاب و دیدنی (Lollipop Transition): پاپ آپ با استایل زیبا

کد پاپ آپ با استایل زیبا

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

کد پاپ آپ با استایل زیبا

مطالب زیر را حتما مطالعه کنید

تبدیل اعداد باینری مبنای 2 به دسیمال مبنای 10 در پایتون

بدست آوردن تعداد بیشترین مقسوم علیه با پایتون

تبدیل تمامی حروف یا رشته به بزرگ یا کوچک در پایتون (Python)

محاسبه واریانس و میانگین با ++C

معکوس کردن رشته و آرایه با پایتون

تبدیل سانتیگراد به فارنهایت و بالعکس با ++C

دیدگاهتان را بنویسید لغو پاسخ