کدهای جذاب و دیدنی (Lollipop Transition): پاپ آپ با استایل زیبا
access_time۴ فروردین, ۱۳۹۹
perm_identity
ارسال شده توسط شاهکد
folder_open
پروژهها
visibility
92 بازدید

کد پاپ آپ با استایل زیبا
در بعضی از سایت ها گاهی پیش آمد که وقتی دکمه ای را کلیک کرده بودید یک پاپ آپ (پنجره فرم) زیبا برایتان گشوده شده بود. در این نمونه، سورس کد (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; });
پروژهی سورس کد را در اختیار شما قرار دادیم که می توانید نمونه ی پروژه را دانلود کرده و استفاده کنید.
امیدوارم لذت برده باشید.
پروژهی سورس کد را در اختیار شما قرار دادیم که می توانید نمونه ی پروژه را دانلود کرده و استفاده کنید.
این سورس کد را به دو زبان انگلیسی و فارسی قرار دادهایم.
دانلود فایل
برای مشاهده لینک دانلود لطفا وارد حساب کاربری خود شوید!
وارد شویدپسورد فایل : ندارد گزارش خرابی لینک
مطالب زیر را حتما مطالعه کنید
تبدیل اعداد باینری مبنای 2 به دسیمال مبنای 10 در پایتون
در این مطلب، تبدیل اعداد باینری مبنای 2 به دسیمال مبنای 10 به زبان برنامه...
بدست آوردن تعداد بیشترین مقسوم علیه با پایتون
[vc_row][vc_column][vc_column_text]بدست آوردن تعداد بیشترین مقسوم علیه دربین چند عدد با پایتون که بسیاری از دانشجویان...
تبدیل تمامی حروف یا رشته به بزرگ یا کوچک در پایتون (Python)
[vc_row][vc_column][vc_column_text] تبدیل تمامی حروف موجود در یک رشته (String) به حروف کوچک (lowercase) یا حروف...
محاسبه واریانس و میانگین با ++C
[vc_row][vc_column][vc_column_text]همان طور میدانیم که در دانشگاه در درس ریاضی به مبحث واریانس بر خورد نمودیم...
معکوس کردن رشته و آرایه با پایتون
[vc_row][vc_column][vc_column_text]در این مطلب، روش نوشتن برنامه معکوس کردن رشته و آرایه با پایتون نوشته شده...
تبدیل سانتیگراد به فارنهایت و بالعکس با ++C
[vc_row][vc_column][vc_column_text] سلسیوس (سانتیگراد) و فارنهایت مقیاس و واحد اندازه گیری درجه حرارت می باشند. آنها مقادیر...
دیدگاهتان را بنویسید