پروژه Lollipop Transition : پاپ آپ با استایل زیبا

کدهای جذاب و دیدنی (Lollipop Transition): پاپ آپ با استایل زیبا ، که در این پروژه به زبان های html , css را در اختیار شما و دانشجویان قرار می دهیم.

شاید شما هم از آن دسته افرادی باشید که دوست دارند وبسایت زیبا داشته باشند ولی به علت نداشتن مهارت فنی لازم، محدودیت‌هایی در این امر دارند. اصلا جای نگرانی نیست. برای طراحی یک سایت زیبا و چشم‌نواز اصلا نیازی به دانش «CSS» یا «PHP» ندارید، همین‌که مقدار کمی «HTML» مسلط باشید و عمل کپی پیست (Copy-Paste) را خوب بلد باشید، کفایت می‌کند.

طراحی و برنامه نویسی وب یکی از محبوب ترین و پر درآمد ترین حوزه های مربوط به برنامه نویسی است. شما برای ورود به دنیای طراحی وب ابتدا باید Html را یاد بگیرید.
Html یک زبان برای پیاده سازی اسکلت بندی و ساختمان کلی وب سایت است. برای درج متن، عکس، ویدئو و … در هر وب سایت از Html استفاده می شود.

من همیشه از اینکه می‌بینم چکارهایی با سی‌اس‌اس می‌ توان انجام داد، شگفت زده می‌شوم. توسعه دهندگان وب می‌دانند که با سی‌اس‌اس می‌توان لایه‌های خارق العاده و انیمیشن های سفارشی زیبایی را ساخت.

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

در بعضی از سایت ها گاهی پیش آمد که وقتی دکمه ای را کلیک کرده بودید یک پاپ آپ (پنجره فرم) زیبا برایتان گشوده شده بود. در این نمونه، سورس کد (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 : پاپ آپ با استایل زیبا

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

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

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

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

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

اعتبارسنجی کد ملی در لاراول

اعتبارسنجی شماره موبایل در لاراول

تبدیل اعداد دودویی به دهدهی با ++C

تبدیل اعداد دهدهی به دودویی با ++C

جابجایی متغیرها در زبان C

میانگین سه عدد با C

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