ایجاد صفحه شبکه های اجتماعی با Jquery  و CSS

ایجاد صفحه شبکه های اجتماعی با Jquery و CSS

امروز در این آموزش به شما نحوه ایجاد صفحه شبکه های اجتماعی خودتان را به شما آموزش می دهیم.کارکرد کلی به این صورت است که کاربران بر روی دکمه زیر تصویر کلیک کرده و صفحات اجتماعی که شما عضو آن هستید نمایش داده خواهد شد و با کلیک دوباره بر روی آن صفحات بسته خواهند شد.با ما همراه باشید.


دریافت فایل پیش نمایش

HTML

ما در قسمت مربوط به html از دو لیست نامرتب (ul)استفاده خواهیم کرد که یکی برای نمایش خطوط اتصال(خطوط آبی ) و یکی هم برای نمایش نام شبکه های اجتماعی .که برای اولی از id=followو برای دومی از id=social استفاده کرده ایم.در انتها نیز برای نمایش دکمه از یک تگ a استفاده کرده ایم که به آن id=trigger داده ایم.

  <ul id="follow">
          
    <li class="line1">
    <span id="layerBall" class="ball">لینکدین</span><span id="layerPulse" class="pulse"></span>
    </li>
                
    <li class="line2">
   <span id="layerBall1" class="ball1">یوتیوب</span><span id="layerPulse1" class="pulse1">    </span>
    </li>
            	
    <li class="line3">
    <span id="layerBall2" class="ball2">توییتر</span><span id="layerPulse2" class="pulse2"></span>
     </li>
            	
      <li class="line4">
      <span id="layerBall3" class="ball3">فیسبوک</span><span id="layerPulse3" class="pulse3"></span>
       </li>
 </ul>
            
            <ul id="social">
            <li id="layerSocialControl3" class="facebook"><a href="#">فیسبوک</a></li>
            <li id="layerSocialControl2" class="twitter"><a href="#">تویییتر</a></li>
            <li id="layerSocialControl" class="linked"><a href="#">لینکدین</a></li>
            <li id="layerSocialControl1" class="forrst"><a href="#">یوتیوب</a></li>
            </ul>
            
        </div>
        
        <a id="trigger" href="#">دنبال کردن من!</a>

همانطور که مشاهده می کنید ما کار زیادی را در بخش html انجام نداده ایم.بخش مهم این آموزش مربوط به استایل ها می باشد.که در ادامه برایتان توضیح می دهیم.

CSS

در ابتدا ما استایل کلی را برای صفحه می نویسیم.(  سایر تگ ها ی کلیوbody)

body {
	background: #161616 url(pattern_40.gif) top left repeat;
	margin: 0;
	padding: 0;
	font: 12px normal Verdana, Arial, Helvetica, sans-serif;
	height: 100%;
	color:#fff;
}

* {margin: 0; padding: 0; outline: none;}

img {border: none;}

a { 
	text-decoration:none; 
	color:#00c6ff;
}

h1 {
	font: 4em normal Arial, Helvetica, sans-serif;
	padding: 20px;	margin: 0;
	text-align:center;
	color:#bbb;
}

h1 small{
	font: 0.2em normal  Arial, Helvetica, sans-serif;
	text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
	display: block;
}

h2 {
	font: 2em normal Arial, Helvetica, sans-serif;
	padding-bottom:30px;
	color:#fff;
	display:block;
}

.container {
	width: 960px;
	margin: 0 auto; 
	overflow: hidden;
}

.content {
	width:960px;
	min-height:500px;
	margin:0 30px;
	position:relative;
}

سپس ما استایل مربوط به دکمه نمایش شبکه های اجتماعی را می نویسیم.(id=trigger)

#trigger {
	background: #000000;
	background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8em;
	text-decoration: none;
	text-transform: lowercase;
	text-align: center;
	color: #fff;
	padding: 10px;
	border-radius: 3px;
	display: block;
	margin: 0 auto;
	width: 140px;
    direction:rtl;
    margin-left: 350px;
}
//هنگام قرار گیری موس روی آن		
#trigger:hover {
	background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
	background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
}

سپس استایل مربوط به تصویری که در وسط صفحه قرار دارد (تصویر خودمان)را می نویسیم.(class=ID-Image)

.ID-Image {
	width:300px;
	height:300px;
	background:url(photoID.png) no-repeat;
	margin:150px auto 0;
}

استایل خطوط آبی رنگ را در زیر می آوریم

#follow { 
	list-style:none; 
	position:relative;
	top:140px;
	left:140px;
	z-index:-1;
}

.running .line1,.running .line2,.running .line3,.running .line4 {
	background:#2187e7; 
	width:0px;
	height:1px;
	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
}

.running .line1 { -moz-transform:rotate(17deg);  -webkit-transform:rotate(17deg);   -moz-animation:move  0.65s linear forwards; -webkit-animation:move  0.65s linear forwards;}
.running .line2 { -moz-transform:rotate(140deg); -webkit-transform:rotate(140deg);  -moz-animation:move1 0.75s linear forwards; -webkit-animation:move1  0.75s linear forwards;}
.running .line3 { -moz-transform:rotate(235deg); -webkit-transform:rotate(235deg);  -moz-animation:move2 0.9s linear forwards;  -webkit-animation:move2  0.9s linear forwards;}
.running .line4 { -moz-transform:rotate(315deg); -webkit-transform:rotate(315deg);  -moz-animation:move3 0.5s linear forwards;  -webkit-animation:move3  0.5s linear forwards;}

کار مهمی که ما در این آموزش انجام خواهیم داد حرکت دادن خطوط آبی رنگ برای وصل شدن به شبکه مورد نظر است که این کار را ما با استفاده از کدهای زیر انجام خواهیم داد.

@-moz-keyframes move {
	۰%   { width:0px;}
	۱۰۰% { width:300px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); }
}

@-moz-keyframes move1 {
	۰%   { width:0px;}
	۱۰۰% { width:360px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); }
}

@-moz-keyframes move2 {
	۰%   { width:0px;}
	۱۰۰% { width:205px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); }
}

@-moz-keyframes move3 {
	۰%   { width:0px;}
	۱۰۰% { width:370px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); }
}

@-webkit-keyframes move {
	۰%   { width:0px;}
	۱۰۰% { width:300px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); }
}

@-webkit-keyframes move1 {
	۰%   { width:0px;}
	۱۰۰% { width:360px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); }
}

@-webkit-keyframes move2 {
	۰%   { width:0px;}
	۱۰۰% { width:205px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); }
}

@-webkit-keyframes move3 {
	۰%   { width:0px;}
	۱۰۰% { width:370px; box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5); }
}

برای برگشتن خطوط به جای اولیه خود نیز از استایل های زیر استفاده خواهیم کرد.توجه داشته باشید که فقط بخشی از کد را برایتان آموزش می دهیم.

.reverse .line1,.reverse .line2,.reverse .line3,.reverse .line4 {
	background:#2187e7; 
	width:0px;
	height:1px;
	box-shadow:0px 0px 5px 1px rgba(0,198,255,0.5);
	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
}

.reverse .line1 { -moz-transform:rotate(17deg);  -webkit-transform:rotate(17deg);   -moz-animation:moveReverse  0.65s linear forwards; -webkit-animation:moveReverse  0.65s linear forwards;}
.reverse .line2 { -moz-transform:rotate(140deg); -webkit-transform:rotate(140deg);  -moz-animation:move1Reverse 0.75s linear forwards; -webkit-animation:move1Reverse  0.75s linear forwards;}
.reverse .line3 { -moz-transform:rotate(235deg); -webkit-transform:rotate(235deg);  -moz-animation:move2Reverse 0.9s linear forwards;  -webkit-animation:move2Reverse  0.9s linear forwards;}
.reverse .line4 { -moz-transform:rotate(315deg); -webkit-transform:rotate(315deg);  -moz-animation:move3Reverse 0.5s linear forwards;  -webkit-animation:move3Reverse  0.5s linear forwards;}

@-moz-keyframes moveReverse {
 ۰% { width:300px;}
 ۱۰۰% { width:0px; box-shadow:none; }
}

@-moz-keyframes move1Reverse {
 ۰% { width:360px;}
 ۱۰۰% { width:0px; box-shadow:none; }
}

@-moz-keyframes move2Reverse {
 ۰% { width:205px;}
 ۱۰۰% { width:0px; box-shadow:none; }
}

@-moz-keyframes move3Reverse {
 ۰% { width:370px;}
 ۱۰۰% { width:0px; box-shadow:none; }
}

@-webkit-keyframes moveReverse {
 ۰% { width:300px;}
 ۱۰۰% { width:0px; box-shadow:none; }
}

@-webkit-keyframes move1Reverse {
 ۰% { width:360px;}
 ۱۰۰% { width:0px; box-shadow:none; }
}

@-webkit-keyframes move2Reverse {
 ۰% { width:205px;}
 ۱۰۰% { width:0px; box-shadow:none; }
}

@-webkit-keyframes move3Reverse {
 ۰% { width:370px;}
 ۱۰۰% { width:0px; box-shadow:none; }
}

برای نمایش نام شبکه ها نیز از انیمیشنی با کد های استفاده شده در زیر بهره خواهیم برد.

@-moz-keyframes tooltip {
	۰%  { -moz-transform:scale(0,0); opacity:0;}
	۵۰% { -moz-transform:scale(1.2,1.2); opacity:0.3; }
	۷۵% { -moz-transform:scale(0.9,0.9); opacity:0.7;}
	۱۰۰%{ -moz-transform:scale(1,1); opacity:1;}
}

@-webkit-keyframes tooltip {
	۰%  { -webkit-transform:scale(0,0); opacity:0;}
	۵۰% { -webkit-transform:scale(1.2,1.2); opacity:0.3; }
	۷۵% { -webkit-transform:scale(0.9,0.9); opacity:0.7;}
	۱۰۰%{ -webkit-transform:scale(1,1); opacity:1;}
}

Jquery

در این آموزش ما از چند سطر کد jquery استفاده خواهیم کرد.آن هم برای اعمال نمایش  و عملکرد دکمه مربوط به نمایش و عدم نمایش شبکه های اجتماعی است.

$(document).ready(function() {
    var content = $('.content');
	
    $('#trigger').live('click', function() {
        $(this).toggle(function() {
            $(this).text('بستن شبکه ها!');
            content.removeClass('reverse').addClass('running');
        }, function() {
             $(this).text('دنبال کردن من!');
            content.removeClass('running').addClass('reverse');
        }).trigger('click');
    });
	
});

پایان

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

۴ دیدگاه ها

  1. میشه از این ۲ ابزار برای واقعیت افزوده هم استفاده کرد؟

  2. آموزش بسیار جالب و کاملی بود. خیلی به درد بخور بود با این دستور تونستیم یک شبکه اجتماعی کوچیک برای پایان دوره خودمون طراحی کنیم. موفق و پیروز باشید

  3. خیلی ممنونم از سایت شما

دیدگاه خود را برای کوتاه کننده لینک بنویسید انصراف از پاسخ

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


8 × دو =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>