PDA

View Full Version : گفتگو: همکاری در مورد یک چیزی خیلی باحال با CSS


MostafaEs3
چهارشنبه 03 اسفند 1390, 08:35 صبح
//////////
sanay_esh
چهارشنبه 03 اسفند 1390, 09:02 صبح
سلام
با توجه به اینکه خود گوگل در این مورد مطلب زیاد نوشته میتونید از آن استفاده نمائید ولی بنده هم در این جا مطرح میکنم
این مورد مربوط میشه به ویژگیهای CSS3
که این امکان فقط در مرورگرهای زیر قابل اجرا و مشاهده است (IE این امکان را نداره این ویژگی را به کاربران خودش نشون بده )
Firefox , opera , chrome , safari
اما چگونه از این کد در صفحه HTML خود استفاده نمائید
<style>
.barrel_roll {
-webkit-transition: -webkit-transform 4s ease;
-webkit-transform: rotate(360deg);
-moz-transition: -moz-transform 4s ease;
-moz-transform: rotate(360deg);
-o-transition: -o-transform 4s ease;
-o-transform: rotate(360deg);
transition: transform 4s ease;
transform: rotate(360deg);
}
</style>






<input type="text" id="search_text">
<script>
jQuery('#search_text').bind('change keyup',function(){
var str = String( jQuery(this).val().toLowerCase() );
if(str.indexOf('"do a barrel') == 0) {
jQuery('body').addClass('barrel_roll');
setTimeout(function(){
jQuery('body').removeClass('barrel_roll');
},4000);
jQuery(this).unbind('change keyup');
}
});
</script>

آدرس منبع (http://www.acumenholdings.com/blog/how-did-google-do-a-barrel-roll/)
MostafaEs3
چهارشنبه 03 اسفند 1390, 09:21 صبح
//////////
MMSHFE
چهارشنبه 03 اسفند 1390, 09:28 صبح
دوست عزیز، این کار با Javascript و عنصر Canvas از HTML5 انجام میشه و درنتیجه فقط توی FF و Chrome کار میکنه. با کمک JS کل صفحه که توی یک عنصر Canvas ترسیم شده، به کمک تابع setTimeout هربار به اندازه بیشتری نسبت به دفعه قبل میچرخه تا زمانی که دو دور بزنه. یک نگاه به سورس صفحه گوگل بندازین متوجه میشین. البته همونطور که دوستمون اشاره کردن، با CSS هم میشه از این کارها کرد تا توی مرورگرهای Safari و... هم قابل انجام باشه ولی زیاد تعجب نکنید چون از این کارها گوگل زیاد انجام داده. مثلاً یک مدت اگه سرچ میکردین !Let it snow برف میومد و صفحه رو مه میگرفت و... کلاً توی اینترنت دنبال Google Easter Egg بگردین، چیزای جالبی پیدا میکنید. موفق باشید.
MostafaEs3
چهارشنبه 03 اسفند 1390, 10:03 صبح
//////////
MMSHFE
چهارشنبه 03 اسفند 1390, 10:37 صبح
دارم روی کدش کار میکنم. حقیقتش یک مقدار درگیر دانشجوهام شدم چون از یک طرف این ترم خیلی کوتاهه و ازطرف دیگه حجم مطالبی که میخوام بهشون بگم بالاست. سعی میکنم کد رو در اولین فرصت ممکن آماده کنم. موفق باشید.
MMSHFE
چهارشنبه 03 اسفند 1390, 12:45 عصر
این نمونه رو همینطوری با استفاده از لینکی که دوستمون گذاشتن، درست کردم. ببینید چطوره؟ توی کادر متن بنویسید do a barrel roll و دکمه Search رو بزنید.


<!doctype html>
<html>
<head>
<title>Do a barrel</title>
<script src="jqmin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#search").click(function() {
var str = String($("#text").val().toLowerCase());
if(str == "do a barrel roll") {
$("body").addClass("barrel_roll");
setTimeout(function() {
$('body').removeClass("barrel_roll");
}, 4000);
}
});
});
</script>
<style type="text/css">
.barrel_roll {
-webkit-transition: -webkit-transform 4s ease;
-webkit-transform: rotate(360deg);
-moz-transition: -moz-transform 4s ease;
-moz-transform: rotate(360deg);
-o-transition: -o-transform 4s ease;
-o-transform: rotate(360deg);
transition: transform 4s ease;
transform: rotate(360deg);
}
</style>
<meta charset="utf-8"/>
</head>
<body>
<input id="text" type="text"/>
<input id="search" type="button" value="Search"/>
<p>This is a test paragraph</p>
<p>This is a test paragraph</p>
<p>This is a test paragraph</p>
<p>This is a test paragraph</p>
<p>This is a test paragraph</p>
<p>This is a test paragraph</p>
<p>This is a test paragraph</p>
<p>This is a test paragraph</p>
<p>This is a test paragraph</p>
<p>This is a test paragraph</p>
</html>
eshpilen
چهارشنبه 03 اسفند 1390, 13:04 عصر
حالا کاربردش چیه؟
MMSHFE
چهارشنبه 03 اسفند 1390, 13:09 عصر
حالا کاربردش چیه؟
هیچی! واسه قشنگی! توی گوگل عبارت do a barrel roll رو سرچ کنید متوجه میشین.
eshpilen
چهارشنبه 03 اسفند 1390, 13:53 عصر
پس واسه بیکاریس :لبخند:
آره قبلا دیدم.
دنبال چیزهای مفید و کاربردی هستم تا چیزهایی که بیشتر سرگرمی و نمایشی هستن.
گفتم ببینم شاید اشتباه میکنم و واقعا به دردی هم میخوره!!
البته شاید در بحث طراحی بازی یه جاهایی کاربردی داشته باشه.
MMSHFE
چهارشنبه 03 اسفند 1390, 15:48 عصر
البته خیلی هم نمیشه گفت واسه بیکاریه یا فقط بدرد بازی و... میخوره. مثلاً توی یک فرم لاگین، اگه نام کاربری خالی باشه، با یک عمل چرخش کادر متن مثل همین مثال فوق یا مثلاً بزرگ شدن و کوچک شدنش برای یک لحظه، میشه توجه کاربر رو بهش جلب کنیم!
رضا قربانی
پنج شنبه 04 اسفند 1390, 13:46 عصر
پس واسه بیکاریس :لبخند:
آره قبلا دیدم.
دنبال چیزهای مفید و کاربردی هستم تا چیزهایی که بیشتر سرگرمی و نمایشی هستن.
گفتم ببینم شاید اشتباه میکنم و واقعا به دردی هم میخوره!!
البته شاید در بحث طراحی بازی یه جاهایی کاربردی داشته باشه.

اتفاقا یک کاربرد خوب برای هکر های فرضی شما داره
همیشه کار که تمام می شه باید یه طوری خودتون رو نشون بدید و اون موقع میشه زمان بی کاری و سرگرمی
واست یک نمونه میذارم تا ببینی

موفق باشید