אפקט הפיכה (Flip) עם jQuery ששווה להכיר!

ברוכים השבים וגם לגולשים חדשים. היום אני רוצה להדגים לכם אפקט הפיכה (בעברית זה קצת מוזר) – Flip Effect שניתן לעשות בעזרת תוסף מעולה שנכתב בשפת jQuery ומאפשר להוסיף עוד אלמנט מדליק לאתר שלכם בצורה קלה ומהירה מאוד!

מה אנחנו צריכים?

  • את jQuery כמובן
  • את jquery.flippy.min.js
  • הבנה טובה בHtml וג'אווה סקריפט / jQuery

ניגשים לקוד

צעד ראשון: נטמיע סקריפטים נדרשים +
נכליל את הסקריפטים הרצויים בראש המסמך שלנו (הHEAD)
		// שנו את המסלולים של הקבצים למסלולים שמתאימים לאתר שלכם
		// וודאו כי flippy נטען אחרי jQuery
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.flippy.js"></script>
		
צעד שני: נוסיף קוד הפעלה לפונקציה +

נוסיף את פקודת הjQuery שתפעיל את flippy בדף שלנו. שמים קוד זה מתחת לפקודות ההכללה בחלק הקודם או בתחתית הדף שלכם מעל התג הסוגר של הBODY.

		<script type="text/javascript">
		$(function(){

			$("#btn-reverse").on("click",function(e){
				$(".flipbox").flippyReverse();
				e.preventDefault();
			});

			$("#btn-left").on("click",function(e){
				$(".flipbox").flippy({
					color_target: "red",
					direction: "left",
					duration: "750",
					verso: '<a href="http://www.sagive.co.il/professional-library/web-marketing/create-google-plus-business-page/" target="_blank"><img src="http://www.sagive.co.il/wp-content/uploads/2013/05/how-to-create-a-business-page-in-gplus.jpg" alt="איך יוצרים דף לעסקים בגוגל פלוס" class="nob" /></a>',
				 });
				 e.preventDefault();
			});

			$("#btn-right").on("click",function(e){
				$(".flipbox").flippy({
					color_target: "red",
					direction: "right",
					duration: "750",
					verso: '<a href="http://www.sagive.co.il/professional-library/web-marketing/penguin-update/" target="_blank"><img src="http://www.sagive.co.il/wp-content/uploads/2013/05/learn-about-penguin-update.jpg" alt="למדו עוד על עדכון פינגווין" class="nob" /></a>',
				 });
				 e.preventDefault();
			});

			$("#btn-top").on("click",function(e){
				$(".flipbox").flippy({
					color_target: "#b6d635",
					direction: "top",
					duration: "750",
					verso: '<a href="http://www.sagive.co.il/professional-library/web-marketing/25-jewish-internet-superstars/" target="_blank"><img src="http://www.sagive.co.il/wp-content/uploads/2013/05/25-guys-that-shaped-the-web.jpg" alt="25 יזמים ישראליים שעשו לנו את הרשת" class="nob" /></a>',
				 });
				 e.preventDefault();
			});

			$("#btn-bottom").on("click",function(e){
				$(".flipbox").flippy({
					color_target: "#03588C",
					direction: "bottom",
					duration: "750",
					verso: '<a href="http://www.sagive.co.il/professional-library/web-marketing/seo-clients-type/" target="_blank"><img src="http://www.sagive.co.il/wp-content/uploads/2013/05/clients-type-seo.jpg" alt="סוגי לקוחות בקידום אתרים" /></a>',
				 });
				 e.preventDefault();
			});

			SyntaxHighlighter.all();
		})
		</script>
		

כדי להשתמש בוורדפרס שנו את השורה הבאה

		$(function(){
		

 

לשורה הזאת

		jQuery(function($){
		
צעד שלישי: ניכן מיכל HTML ונטמיע אותו בדף +
הכינו את המיכל עליו נחיל את האפקט והטמיעו אותו בדף בו אתם מתנסים עם flippy
			<div class="flippyBox">
				<div class="flipbox-container box100">
					<div id="flipbox1" class="flipbox tcenter">
						<a href="http://www.sagive.co.il/seo-blog/50-seo-guys-about-10-seo-factors/" target="_blank"><img src="http://www.sagive.co.il/wp-content/uploads/2014/01/50-seo-on-10-params.jpg" alt="50 מקדמים על 10 פרמטרים" class="nob" /></a>
					</div>
				</div>

				<ul id="action-btn">
					<li><a class="btn" id="btn-left" href="#">שמאלה</a></li>
					<li><a class="btn" id="btn-right" href="#">ימינה</a></li>
					<li><a class="btn" id="btn-top" href="#">למעלה</a></li>
					<li><a class="btn" id="btn-bottom" href="#">למטה</a></li>
					<li><a class="btn" id="btn-reverse" href="#">חזרה</a></li>
					<br class="clear"/>
				</ul>				

			</div>
		
צעד רביעי: נוסיף קצת CSS לעיצוב +
אני מוסיף כאן CSS לדוגמה בו אני משתמש להדגים בהמשך הדף… אתם כמובן יכולים לשנות את הCSS שיתאים לכם.
			<style type="text/css">
			.flipbox-container.box50{display:inline-block;}
			.flipbox{height:300px;background:#2893b9;position:relative;}
			.flipbox span{position:absolute;bottom:10px;left:10px;}
			.flipbox span.big{font-size:65px;top:110px;left:190px;}
			.box100{width:100%;margin-bottom:15px;}
			.box50{width:49.180327868%;float:left;}
			.odd{margin-right:1.639344262%;}
			.btn{padding:5px 10px;margin:0 5px;background:#2893b9;color:#FFF;text-decoration:none;display:block;}
			#action-btn{margin:0 auto 15px;padding:0;width:350px;}
			#action-btn a{color: #fff; font-weight: bold; text-decoation: none;}
			#action-btn li{float:left;list-style-type:none;}
			#btn-left{background:red;}#btn-top{background:#b6d635;}
			#btn-bottom{background:#03588C;}
			#social{position:absolute;top:55px;left:-100px;width:120px;}
			</style>
		
אופציונלי: התאמה למתקדמים +

הפרטים הקטנים עושים את ההבדל:

רוצים לשנות את המהירות? את הצבע רקע? את כיוון התנועה? בואו נעבור על האפשרויות בעזרת פונקציה לדוגמה

* שימו לב להערות בתוך הקוד

בואו נעבור שורה על הפונקציה המלאה

		$("#btn-bottom").on("click",function(e){
			$(".flipbox").flippy({
				color_target: "#03588C",
				direction: "bottom",
				duration: "750",
				verso: '<a href="http://www.sagive.co.il/professional-library/web-marketing/seo-clients-type/" target="_blank"><img src="http://www.sagive.co.il/wp-content/uploads/2013/05/clients-type-seo.jpg" alt="סוגי לקוחות בקידום אתרים" /></a>',
			 });
			 e.preventDefault();
		});
		

 

ראשית, נסתכל על המעטפת!

		// המעטפת של הפונקציה אומרת:
		// כאשר לוחצים על כפתור עם ID בשם btn-button תבצע את הפעולה בתוך המעטפת
		$("#btn-bottom").on("click",function(e){

			 e.preventDefault(); // שורה זאת אומרת להמנע מהפעולה האוטומטית של הלינק
		});
		

 

איך משנים את האפשרויות של כל ריבוע

			$(".flipbox").flippy({
				color_target: "#03588C", // צבע הרקע של הריבוע
				direction: "bottom", // סוג המעבר אל הריבוע
				duration: "750", // כמה זמן יקח המעבר
				verso: 'מה שכאן יוצג בתוך הריבוע',
			 });
		

התוצאה הסופית

50 מקדמים על 10 פרמטרים

קבצי המקור ודוגמאות נוספות

תוסף זה מגיע אלינו באדיבות גילהלם מרטי (Guilhem Marty). כדי לבקר בדף ההדגמה המקורי של התוסף הנהדר הזה לJquery בקרו כאן: jQuery flip effect with Flippy. או בקרו בדף הפרויקט בgithub.

כמו תמיד אני מזמין אתכם להגיב ובמקרה זה גם לחלוק איתנו דוגמאות של שימוש מעניין שיצרתם עם תוסף זה. בואו לבקר אותנו בגוגל+. אם אתם אוהבים את jQuery אתם מוזמנים להרשם לרשימת התפוצה שלנו ולקבל עדכונים כשיוצאים מדריכים מעניינים חדשים.

  • אהבתם? שתפו!