ანიმირებული 3D მხტუნავი ბურთი მხოლოდ CSS3 გამოყენებით

შენიშვნა: შედეგი გამოჩნდება მხოლოდ იმ ბრაუზერებში, რომელთაც აქვთ შესაბამისი CSS მახასიათებლების მხარდაჭერა.

 HTML

 HTML კოდი:

<div id="ballWrapper">
	<div id="ball"></div>
	<div id="ballShadow"></div>			
</div>	

მთელი HTML კოდი შედგება სამი მარტივი  DIV ელემენტისაგან:  “#ballWrapper” მთავარი DIV, რომელიც გარს ერტყმის ბურთს. ეს  DIV განსაზღვრავს ბურთის მდგომარეობას და სიმაღლეს ეკრანზე. შემდეგი “#ball” ელემენტი რომელიც განსაზღვრავს (markup) ბურთს და ბოლო, “#ballShadow” რომელიც განსაზღვრავს ბურთის ჩრდილს ბურთისგან განცალკევებით.  

CSS

უპირველესად უნდა განისაზღვროს საბაზისო სიგრძე და სიგანე  ‘#ballWrapper’ DIV -თვის. ეს დაგვეხმარება ბურთის ეკრანის ცენტრში პოზიციონირებაში.

#ballWrapper {
	width: 140px;
	height: 300px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin: -150px 0 0 -70px;
}

მიაქციეთ ყურადღება, რომ  DIV -ის ორივე, ზედა და მარცხენა პოზიციების თვისებები განისაზღვრა  ‘50%’, და უარყოფითი ზედა და მარცხენა ველები განისაზღვრა DIV-ის სიგრძისა და სიგანის ზუსტად ნახევარი ზომით. ამ მეთოდით ბურთი იქნება მუდამ ეკრანის ცენტრში. 

შემდეგ ხაზზე მივანიჭოთ ბურთს გარკვეული სტილი: 

#ball {
	width: 140px;
	height: 140px;
	border-radius: 70px;
	background: linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(0,0,0,0.4), 
				0 0 1px #000;	
}

ბურთი განისაზღვრა თანაბარი ზომის სიგრძე სიგანის პარამეტრებით და ჩარჩოს რადიუსით ( ‘border-radius’) სიდიდით ’70px’ (სიგრძე სიგანის ნახევარი). შესაბამისად მივიღეთ რგოლი (ბურთი) და არა ოვალი.

 შემდეგი მნიშვნელოვანი ელემენტი არის ბურთის ფერი (ფონი).  ბურთს მიცემული აქვს წრფივი გრადიენტი (linear background) და სამი განსხვავებული დონის ჩრდილი (box shadow), რაც გვაძლევს  3D ეფექტს.

თუ დააკვირდებით ბურთს, შეამჩნევთ, რომ  მცირე ზომის ოვალური ფორმა აქვს ზედა მხარეს, რაც მას არეკვლის ეფექტს აძლევს. შესაბამისი სტილი შემდეგია:

#ball::after {
	content: "";
	width: 80px; 
	height: 40px; 
	position: absolute;
	left: 30px;
	top: 10px;	
	background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
	border-radius: 40px / 20px;	
}

გამოყენებულია CSS ფსევდო ელემენტი ::after და მინიჭებული აქვს წრფივი გრადიენტი და გაუმჭირვალობა (opacity). დამატებით, ოვალური ფორმის მისაცემად გამოყენებულია ჩარჩოს რადიუსი  ’40px / 20px’ .

შემდეგი, ბურთის ჩრდილი:

 #ballShadow {
	width: 60px;
	height: 75px;
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: 50%;
	margin-left: -30px;
	background: rgba(20, 20, 20, .1);
	box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
	border-radius: 30px / 40px;	
}

მხტუნავი ანიმაცია

თავიდან ბურთს ენიჭება ანიმაციის თვისება (property):

#ball {
	animation: jump 1s infinite;
}

ანიმაციას მიენიჭა სახელი (jump), ხანგრძლივობა (1 წამი)  და გამეორების რაოდენობა  - უსასრულო  ‘infinite’ .

ანიმაცია:

@keyframes jump {
	0% {
		top: 0;
	}
	50% {
		top: 140px;
		height: 140px;
	}
	55% {
		top: 160px; 
		height: 120px; 
		border-radius: 70px / 60px;
	}
	65% {
		top: 120px; 
		height: 140px; 
		border-radius: 70px;
	}
	95% {
		top: 0;
	}
	100% {
		top: 0;
	}
}

რაც შეეხება ბურთის ჩრდილს: პირველად ჩრდილს ენიჭება შესაბამისი ანიმირების თვისება:

#ballShadow {
	animation: shrink 1s infinite;
}

გამოიყენება იგივე მნიშვნელობები, რაც ბურთის შემთხვევაში, მხოლოდ სხვა სახელით  shrink:

@-keyframes shrink {
	0% {
		bottom: 0;
		margin-left: -30px;
		width: 60px;
		height: 75px;
		background: rgba(20, 20, 20, .1);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
		border-radius: 30px / 40px;
	}
	50% {
		bottom: 30px;
		margin-left: -10px;
		width: 20px;
		height: 5px;
		background: rgba(20, 20, 20, .3);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
		border-radius: 20px / 20px;
	}
	100% {
		bottom: 0;
		margin-left: -30px;
		width: 60px;
		height: 75px;
		background: rgba(20, 20, 20, .1);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
		border-radius: 30px / 40px;
	}
}

ჩრდილის ანიმირებისას სხვა მახასიათებლები/თვისებები გამოიყენება ვიდრე ბურთისას. რეალისტური ეფექტის მისაღწევად საჭიროა ჩრდილის სიგრძის, სიგანისა და გაუმჭირვალობის ცვლილებები. ბურთი როცა უახლოვდება იატაკს, ჩრდილი უნდა იყოს უფრო მუქი და მცირე და შესაბამისად, ბურთის ახტომისას - უფრო ღია და დიდი.

და ბოლოს ბურთს დამატებული აქვს დაწკაპუნების ეფექტი “click effect”, ბურთზე დაწკაპვის და გაჩერებისას გვეჩვენება, თითქოს ბურთი გვშორდება- უკან მიდის.  ამ ეფექტის მისაღწევად გამოყენებულია ფსევდო კლასი ‘:active‘ , ეფექტებით გადასვლა (transition) და გრადაცია ‘scale’ :

#ballWrapper {
	transform: scale(1);
	transition: all 5s linear 0s;
}

#ballWrapper:active {
	transform: scale(0);
}

გადასვლა გრადაციის/ზომის მნიშვნელობიდან  (1) გრადაციაზე (0) წარმოგვიდგენს ელემენტს ისე, თითქოს ის გვშორდებოდეს.